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

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

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

?

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

?

?

?

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

?

?

?

<实至名归的容器大哥>

Blend 4内的容器有很多种，比较常运用到的除了有Grid、Canvas、Border、StackPanel，还有可以配合运用的DockPanel、GridSplitter、以及新增加的PathListBox等等。

当然还有其他的容器，以後会一一介绍。

?

开启一个新专案，我们可以看到在Blend 4主要工作区就是以Grid做为预设的容器。

?

简单来说，Grid就像是html的table一样，为设计页面时最外层的版型容器，而Grid也是最常用到的布局容器。

学好布局容器是很重要的，若不会善用容器，很容易就会发生做不出预期相同的版面，而你会了Grid，就等於会了一半的容器了!!

?

?

<以实做学会Grid> 运用(一)

本段要教大家如何运用Grid的特性，让页面里的物件不会因为浏览器的视窗大小而改变物件大小。

?

01

打开Blend 4 後选择Top Menu的 File->New Project(快捷键Shift+Ctrl+N)。

选择Silverlight Application+ Website为你的项目类型；把主要工作区大小改为800*600後，我们把版面切成九格。

在Blend4 中分割行跟列，只需要将滑鼠放在主要版面的外围深蓝色区块上，单击滑鼠後就会产生分割线。

分割完後，我们运用分割线的位置设定把版面调成九等份，如下图：

可以看到Layout的width的地方，我们设定为0.33，值为Star。

以原始码来看，行跟列皆为0".33*"，0.33後面的星号，代表着该行或该列宽度或高度将会跟着内容的改变而改变；

相反的，若是没有星号，代表着该行列不会因为内容的改变而改变，会固定宽高值。

?

		   1: <UserControl

		   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

		   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

		   4:     x:Class="SilverlightApplication3.MainPage"

		   5:     Width="800" Height="600">

		   6:? 

		   7:     <Grid x:Name="LayoutRoot" Background="White">

		   8:         <Grid.RowDefinitions>

		   9:             <RowDefinition Height="0.33*"/>

		  10:             <RowDefinition Height="0.33*"/>

		  11:             <RowDefinition Height="0.33*"/>

		  12:         </Grid.RowDefinitions>

		  13:         <Grid.ColumnDefinitions>

		  14:             <ColumnDefinition Width="0.33*"/>

		  15:             <ColumnDefinition Width="0.33*"/>

		  16:             <ColumnDefinition Width="0.33*"/>

		  17:         </Grid.ColumnDefinitions>

		  18:     </Grid>

		  19: </UserControl>

?

02

接着我们放入9个相同大小的Rectangle。

我随意的在9格里面各放一个之後，全选它们，一并设定长、宽，还有边界。

如下图：

?

完成後，按下F5，我们来看看效果。

?

请拖动浏览器右下角，使浏览器的视窗变大或缩小。

发现了吗?我们所置入的9个Rectangle并没有因为浏览器的视窗变大或缩小而有所改变。

?

那若是我们要让所置入的物件能跟着浏览器等比例的变大或缩小该如何设定呢?

?

<以实做学会Grid> 运用(二)

本段要教大家如何运用Grid的特性，让页面里的物件可以藉着浏览器视窗缩放达到等比例的改变。

?

01

我们直接使用刚刚的专案来做应用。

同样的，我们全选9个Rectangle後，点选Layout的width还有heigh後方的Set of Auto；为了清楚的分隔每个Rectangle，所以我们把边界的距离拉大，接设为10。

接着，UserControl的width与heigh也要一并改为Auto，会变成下图：

?

Rectangle都不见了!?

别紧张，我们看看原始码：

		   1: <UserControl

		   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

		   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

		   4:     x:Class="SilverlightApplication3.MainPage">

		   5:? 

		   6:     <Grid x:Name="LayoutRoot" Background="White">

		   7:         <Grid.RowDefinitions>

		   8:             <RowDefinition Height="0.333*"/>

		   9:             <RowDefinition Height="0.333*"/>

		  10:             <RowDefinition Height="0.333*"/>

		  11:         </Grid.RowDefinitions>

		  12:         <Grid.ColumnDefinitions>

		  13:             <ColumnDefinition Width="0.334*"/>

		  14:             <ColumnDefinition Width="0.334*"/>

		  15:             <ColumnDefinition Width="0.332*"/>

		  16:         </Grid.ColumnDefinitions>

		  17:         <Rectangle Fill="#FF212168" Margin="10" Stroke="Black"/>

		  18:         <Rectangle Grid.Column="1" Fill="#FF212168" Margin="10" Stroke="Black"/>

		  19:         <Rectangle Grid.Column="2" Fill="#FF212168" Margin="10" Stroke="Black"/>

		  20:         <Rectangle Fill="#FF212168" Margin="10" Grid.Row="1" Stroke="Black"/>

		  21:         <Rectangle Grid.Column="1" Fill="#FF212168" Margin="10" Grid.Row="1" Stroke="Black"/>

		  22:         <Rectangle Grid.Column="2" Fill="#FF212168" Margin="10" Grid.Row="1" Stroke="Black"/>

		  23:         <Rectangle Fill="#FF212168" Margin="10" Grid.Row="2" Stroke="Black"/>

		  24:         <Rectangle Grid.Column="1" Fill="#FF212168" Margin="10" Grid.Row="2" Stroke="Black"/>

		  25:         <Rectangle Grid.Column="2" Fill="#FF212168" Margin="10" Grid.Row="2" Stroke="Black"/>

		  26:     </Grid>

		  27: </UserControl>

我们可以很明显的看到，原本在原始码第五行的地方，UserControl的width为800、height为600；

?

而现在我们UserControl的width与height皆为Auto，所以原始码不会显示，原因是因为Auto是UserControl容器的预设值。

往下拉，有9个我们设计好的Rectangle。

?

完成後，按下F5，我们来看看效果。

?

请拖动浏览器右下角，使浏览器的视窗变大或缩小。

你会了解，我们所置入的9个Rectangle能跟着浏览器等比例的变大或缩小。

?

Grid厉害的地方不只这样喔!

想知道Grid的还能怎麽使用吗?

~下集待续~

?

?

?

本篇的教学就到此。

?

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

一步一步迈向HIE之路

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

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