原文:零元学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之路
喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您