Sliverlight教程 下载本文

这会让 StackPanel 水平地排布3个按钮,如下图所示:

Grid面板

Grid 控件是最灵活的布局面板,它支持用多行和多列的方式排布控件。在概念上,它和 HTML 里的 Table (表格)类似。

不同于 Table 的是,你不需要将控件内嵌到行/列元素中,而是通过定义 属性来定义 Grid 的行和列。这两个属性需要定义在 标签内。这样之后,你就可以在其中的控件上,用 XAML 的“附加属性”语法指定它属于哪一行、哪一列。 比如,我们可以用如下语法定义3行3列的 Grid 布局,然后在其中放置4个按钮:

以上代码会按下图方式排布按钮:

除了支持绝对尺寸定义(如:Height=\),Grid 的 RowDefinition 和 ColumnDefinition 控件还支持自动改变大小的模式(Height=\),这样会

根据其中内容的尺寸自动改变 Grid 或 Row 的尺寸(你也可以指定最大或最小尺寸限制)。

Grid 的 Row 和 ColumnDefinitions 还支持叫做 \Sizing\(按比例缩放)的特性。用这个特性,可以让 Grid 的行列按相对比例的方式排放(如:你可以指定第二行的尺寸为第一行的2倍)。

你会发现 Grid 提供了非常多的功能和灵活性 - 而它也许会成为你最终最常用的布局面板控件。

用布局面板排布我们的 Digg 页面

我们创建 Digg 例子的目标,是得到最终看起来像下图的页面:

要创建这种布局,我们首先添加一个其中包含两个 RowDefinition 的根级 Grid 面板。第一行的高度是 40 像素,而第二行则占据所有剩下的空间(Height=\):

小技巧:注意上面我将 Grid 的 ShowGridLines 属性设置为 True. 这样我们在运行时就能轻易的看到其行列的分界线: