零元学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)Viewbox跟Border一样，一次至只能容纳一个子物件

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

??? 例如Grid、StackPanel、Canvas，而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之路

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

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