零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」相关的知识,希望对你有一定的参考价值。

原文:零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」


本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的-「Viewbox」;
以及加码赠送安装扩充元件-「Silverlight Toolkit」。

?

本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的-「Viewbox」;

以及加码赠送安装扩充元件-「Silverlight Toolkit」。

?

就是要让不会的新手都看的懂!

?

?<扩充元件>

若是你的Expression Blend 4里面没有Viewbox,那麽请到这里下载扩充元件

技术分享图片

?

?下载後解压缩执行安装完成就可以使用了!

技术分享图片

?

01

我们一步一步来做,看看 Viewbox到底的功用是什麽?

开启一个新专案後,在主要工作区放入一个Viewbox,并调整到适当的位子

技术分享图片

?

接着,在Viewbox里面放入你想放的照片或图片;直接拖拉进Viewbox就可以了

再来用在Grid章节学到的,让我们的整个版面可以随着视窗放大缩小

(忘记了吗?快点去复习一下!)

技术分享图片

?

完成後,按F5来看效果

技术分享图片

?

我们的图片是不是保持等比例的缩放呢?

?

?02

Viewbox可以直接对应Transform的设定

对於Transform的设定,我在先前的章节-2.5D转换的使用技巧-里已经有介绍过了

技术分享图片

?

最後附上此范例的Xaml,其实非常简单

		   1: <UserControl
		   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
		   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
		   5:     x:Class="viewbox.MainPage">
		   6:? 
		   7:     <Grid x:Name="LayoutRoot" Background="White">
		   8:         <Viewbox Margin="0" HorizontalAlignment="Center" VerticalAlignment="Bottom">
		   9:             <Viewbox.Projection>
		  10:                 <PlaneProjection RotationX="-63.989" RotationY="14.123" RotationZ="-17.461"/>
		  11:             </Viewbox.Projection>
		  12:             <Image Source="阿兵搞背香蕉(colorful).jpg"/>
		  13:         </Viewbox>
		  14:     </Grid>
		  15: </UserControl>

?

03

到这边,我们来重点整理:

(1)其实,Viewbox不只可以放入图档,也可以放影片

???? 所以如果想要做到全萤幕显示时,Viewbox是很好的Layout Controls

(2)ViewboxBorder一样,一次至只能容纳一个子物件

??? 若是你想在Viewbox内加入第二个以上的子物件,那你必须先放入一个容器

??? 例如GridStackPanelCanvas,而Broder若是用在这边,效用就不大了,请看Broder的介绍。

?

??? 我直接引用了msdn的xaml,有很清楚的示范;用的是StackPanel,里面放入了两个Image

		   1: <Grid x:Name="LayoutRoot" Background="White">
		   2:     <Viewbox Height="500" Width="600">
		   3:         <StackPanel Orientation="Horizontal">
		   4:             <Image Source="flower.jpg" />
		   5:             <Image Source="licorice.jpg" />
		   6:         </StackPanel>
		   7:     </Viewbox>
		   8: </Grid>

?

(3)Viewbox可以决定其子物件如何伸缩、对齐

(4)ViewBox可以使置入的子物件能随着视窗的缩放,但保持等比例

?

04

这里有一个外国人运用Viewbox所做出来的9格拼图小游戏

技术分享图片

?

不过比较不一样的是,他是反过来用的

平常是拿Viewbox当容器,但是这边是把Viewbox当成笔刷的显示容器

这里的运用是让你把视窗拉大时,拼图的图片也可以变大来玩

?

?

老话一句,想要有好的版面设计、想要设计出心里想要的布局,一定要会善用容器喔!

还有很多Layout Controls,让我们慢慢的来学习吧! :)

?

?

本篇的教学就到此。

?

?

(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)

一步一步迈向HIE之路

 

喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您

 

 




以上是关于零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」的主要内容,如果未能解决你的问题,请参考以下文章

零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」

零元学Expression Blend 4 - Chapter 19 如何让做好的Blend专案变Silverlight网页

零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」

零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」

零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」

零元学Expression Blend 4 &ndash; Chapter 21 以实作案例学习MouseDragElementBehavior