Silverlight教程2：使用布局管理

      理解布局管理

      Silverlight 和 WPF 都支持一种灵活的布局管理系统，能让开发者和设计师轻松的定位 UI 上的控件。该布局系统对显式指定坐标的控件支持固定的定位模型；除此之外，还支持一种更为动态的定位模型，控件和布局能随着浏览器的大小改变而自动改变其大小和方位。

      在 Silverlight 和 WPF 中，开发者可以用布局面板来协调包含在其中的控件的位置和大小。Silverlight Beta1 中内建的布局面板包括在 WPF 中最常用的3种：

• Canvas
• StackPanel
• Grid

      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个按钮：