Silverlight 和 WPF 都支持一种灵活的布局管理系统,能让开发者和设计师轻松的定位 UI 上的控件。该布局系统对显式指定坐标的控件支持固定的定位模型;除此之外,还支持一种更为动态的定位模型,控件和布局能随着浏览器的大小改变而自动改变其大小和方位。
在 Silverlight 和 WPF 中,开发者可以用布局面板来协调包含在其中的控件的位置和大小。Silverlight Beta1 中内建的布局面板包括在 WPF 中最常用的3种:
Canvas面板
Canvas 面板是一种很基础的布局面板,它支持对其中的控件采用绝对坐标定位。
你可以通过一种 XAML 特性--- "附加属性” 对 Canvas 中的元素进行定位。用附加属性,你可以指定控件相对于其直接父 Canvas 控件的上、下、左、右坐标的位置。附加属性很有用,因为它让父面板可以扩展其中包含的控件的属性集。Canvas 通过定义扩展属性 Top 和 Left, 就能定义其中 Button (或其他任何 UI 元素)的 Left, Top,而不需要真正向 Button 类中添加这个属性,或 修改 Button 类。
我们可以向 Canvas 容器中添加两个按钮,指定其距离 Canvas 左侧的距离为 50 像素,离上边的距离则分别为 50 像素和 150 像素。使用如下 XAML 语法即可完成(其中 Canvas.Top 和 Canvas.Left 都是附加属性的例子):
这些代码绘制的界面效果如下:

Canvas 适用于其中包含的 UI 元素比较固定的情形,但是如果你想向其中添加更多的控件,或者 UI 需要改变大小或能够移动,Canvas 显得不太灵活。这时,你不得不忙于手写代码来移动 Canvas 中的东西(这很痛苦)。应付这种动态的场景,更好的办法通常是使用其它带有相关功能的内建语义的布局面板,如 StackPanel 和 Grid。
StackPanel
StackPanel 是一种简单的布局面板,它支持用行或列的方式来定位其中包含的控件。StackPanel 常用于安排页面上的一个很小的 UI 部分。
例如,我们可以用下面的 XAML 标签在页面上垂直的排布3个按钮:
在运行时刻,StackPanel 会自动在一个垂直地堆叠(stack)中排列我们的按钮(【译注:这也是为什么叫 StackPanel 的原因】),如下所示:

同样,我们还可以把 Orientation 属性设置为 Horizontal 而不是 Vertical (默认值):
这会让 StackPanel 水平地排布3个按钮,如下图所示:

Grid面板
Grid 控件是最灵活的布局面板,它支持用多行和多列的方式排布控件。在概念上,它和 HTML 里的 Table (表格)类似。
不同于 Table 的是,你不需要将控件内嵌到行/列元素中,而是通过定义 <Grid.RowDefinitions> 和 <Grid.ColumnDefinitions> 属性来定义 Grid 的行和列。这两个属性需要定义在 <Grid> 标签内。这样之后,你就可以在其中的控件上,用 XAML 的“附加属性”语法指定它属于哪一行、哪一列。
比如,我们可以用如下语法定义3行3列的 Grid 布局,然后在其中放置4个按钮: