First Look at Silverlight 2--Part2：使用Layout层管理
理解Layout层管理
Silverlight和WPF支持灵活的Layout层管理，可以使开发设计人员方便的控制UI界面的布局。这个层管理系统支持固定定位模式（控件可以使用坐标点描述确切的位置），也可以使用动态定位模式，自动确定层和控件的尺寸适应浏览器窗口尺寸的变化。
使用Silverlight和WPF的开发者可以使用Layout层面板定位重画控件尺寸及位置。Silverlight2包含的Layout层管理面板通常使用下面3种中的一种。
Cavas（画布面板）
StackPanel（堆栈面板）
Grid（表格面板）
画布面板（Cavas Panel）
画布面板是一种基本的层面板，使用明确的坐标来控制内部控件的位置。使用XAML的“Attached Properties”特性（你可以指定控件相对与所在的画布的位置，例如：相对画布Left，TOP，Right，Bottom），你可以定位画布中元素的位置。当程序允许扩展所包含的控件集合时，你只要指明新增控件相对于画布的相对位置就可以了，不允许要更改新添加控件后台代码。
我们新添了两个按钮控件到Canvas层面板上，相对于画布面板的左面都是50个像素（Pixel）,相对画布上方一个是50个像素，一个是150个像素。
图1
这两个按钮显示结果如下：
图2
当包含在层面板上的元素很少变化时，画布面板是一个不错的选择。但是在控件比较多或者界面经常需要改变尺寸进行变化时，画布面板则不是很灵活。在这种情况下你不得不自己下代码去控制控件的变化。对于动态的情况最好StackPanel堆栈面板和Grid表格面板。
StackPanel堆栈面板很好的定位行或列中的控件。典型的应用场景是控制界面中小块区域上控件的布局。
例如：我们可以用“Veriically”垂直排列刚才我们创建的三个按钮，XAML代码如下：
图3
当运行StackPanel时，按钮将自动按照垂直方式进行排列。
图4
我们可以更改设置StackPanel的“Orientation”水平属性，取代缺省设置的“Horizontal”垂直排列。
图5
将自动控制按钮控件按照水平方式进行排列。
图6
GridPanel（表格面板）
表格面板是最灵活的Layout层面板，支持多行多列的控件布局。与HTML中的Tablet很类似。
不同于HTML的Tablet，不需要将控件嵌入到行列元素中，用户可以在Grid面板中使用
例如：你可以定义一个3行3列的Grid表格面板层，在XAML文件中指定4个按钮的的位置。
图7
Grid表格面板展现按钮控件布局如下：
图8
Grid表格面板支持行列定义的绝对尺寸（例如：Height=“60“）。也支持动态尺寸模式（例如：height=“Auto“，基于内容尺寸自动设置Grid或者Row行的尺寸，再根据需要指定最大、最小限制。
Grid表格面板行列定义支持“Proportional Size”比例尺寸特性，可以静定Grid中各行、各列之间的比例关系（例如：可以做一个行比另一个行长2倍）
Grid表格面板强大而且灵活，可能是最常用的层面板。
使用Layout层面板布局我们的Digg页面
我们的Digg示例程序是想创建一个如下图的页面：
图9
为了创建这样的层布局，我们需要加入一个包含两个行定义的Grid面板。第一行40像素高，第二行使用“*”（Height=“*”）：
图10
提示：我们设置Grid表格面板的“ShowGridLines”属性为“TRUE”。这样可以在运行测试时比较清楚的看到行列的边界线。
图11
我们接着将再加入第2个Grid表格面板在第1行作为第1个Grid的子面板。用它来标题头。将它分为3列作为标题，搜索文本框和搜索按钮。
图12
当我们完成这些，Digg搜索页面的基本Layout层布局就基本完成了：
图13
提示：对于比较特殊的交叉表格Grid，我们可以将Grid定义成2行3列并且使用Grid的ColSpan/RowSpan将多个列进行合并（类似Html表格中的行列合并）。我们选择交叉网格的方法主要是认为他对我们接下来的工作比较简单。
接下来我们的工作就是将需要的控件添加到Grid上去。
对于页头（Header），为了美化边界，我们使用带有圆角的矩形（CornerRadius=10） <Border>文本控件，并且为标题设置一些文字。我们在第二列使用<TextBox>文本框作为搜索框。在第三列使用<Button>按钮控件。接下来我们还会在第2行放一些文字，以后我们将会在这显示搜索结果。
提示：下面将使用风格信息（FontSize字号，Colors颜色，Margins边距等）格式化控件。后面的章节中我们将会将这写风格设置封装到CSS文件中，供这个程序重用。
图14
当我们运行这个程序，显示如下：
图15
动态调整程序的尺寸
大家可能注意到在我们上面的XAML代码中顶级控件的设置是固定宽度和高度的：
图16
这种设定下，我们的Silverlight程序将保持固定的尺寸。当改变浏览器尺寸是，显示如下：
图17
在一些应用场景下，在一个HTML页面的固定区域限定嵌入的程序是有必要的。对于我们的Digg搜索程序，我们希望当浏览器尺寸变化时，程序能够自动调整以获得更好的用户体验。
如果想改变是非常容易的，只需要在删除根节点Width宽，Height高数据就可以了。
图18
我们的Silverlight程序可以自动缩放填充所嵌入浏览器。因为我们的SilverlightTestPage.html测试页面使我们Silverlight程序的宿主页面，使用了<div>标签，在CSS文件中设定了Width100%的宽度高多设置，我们的Digg程序将填充整个浏览器。
图19
现在页头的内容将随着浏览器的宽度而自动调整尺寸。
图20
当我们缩小浏览器的尺寸，文本输入框和搜索按钮将保持原有的尺寸，应为我们的Grid表格面板中列的长度是固定的。而使用<Border>完成的“Digg Search”标题内容将会自动调整，因为我们在grid表格面板中Grid列的长度宽度是允许自动变化的Width=“*”
我们一行代码也不需要写，就可以控制Layout层的行为，Grid容器和Layout管理系统将负责处理动态的尺寸调整和布局。