互联力量Silverlight Grid控件常见用法

在Silverlight中最强大的布局容器就是Grid，本篇将重点描述Silverlight Grid控件，你如果对Silverlight 布局控件概念不了解，可以参考互联力量的Silverlight教程相关内容Silverlight WrapPanel和DockPanel用法。

你了解HTML的Table吗，Grid就是Silverlight的“Table”，也是由行和列组成，默认不显示的，用来布局控件的容器。使用Grid其实只要两步：第一步，定出Grid结构，由几行几列来完成布局，第二步，把控件放在Gird合适的单元格上。具体的方法是用 Grid.ColumnDefinitions定义列集合，用 Grid.RowDefinitions 定义行集合，比如：下面的例子，定义两行三列，如下：

图1

图2

asp.net教程

接着可以把子控件排列到Grid里面，如把四个Button，排列成“Z”字形，方法是在控件上用Grid.Row属性，确定要排在哪一行，Grid.Column属性确定排在哪一列，首行首列的索引是0，如下：

图3

图4

看到这，Grid控件的布局还是很容易的，但是有个问题，Grid单元格的大小总是默认平均分配，如果想设置不同大小的单元格，该怎么办？下面给大家说说，调整Grid大小的三种方式：

方式一：绝对大小：直接设置width或height属性改变大小，以像素为单位。写法是：<ColumnDefinition ;</ColumnDefinition>

方式二：自动大小：根据单元格里面的控件内容，自动分配大小,写法是：<ColumnDefinition ;</ColumnDefinition>

方式三：比例大小：按比例缩放大小。写法是：<ColumnDefinition ;</ColumnDefinition>如果想要第二列是第一列的2倍宽度，这样写：<ColumnDefinition Width=”2*”></ColumnDefinition>

下面，我在以稍复杂的例子，综合描述Grid控件的布局用法。我们通常在windows窗体程序中使用对话框，在Silverlight中，如何制作类似的对话框呢？分析，对话框有两个按钮，OK和Cancel，有提示文本，为了美观，按钮和文本分在两行显示，之间用分隔线划开。为实现这个构图，先用Grid分为两行，根据Grid大小三种调整策略，button所在行的高度，应该由button的大小自动分配，剩下的高度，按比例分给文本所在行，Grid行布局如下：

图5

asp.net源码

文本提示用TextBlock控件，放在第一行位置显示，如下：

<TextBlock Grid.Row=”0″ … Text=”This is simply a test of nested containers.”/>

接下来，按钮显示在第二行，你考虑过吗，按钮有两个，要并排显示在同一行，这时应该怎样写，对了，我在StackPanel控件和布局属性用法中提到StackPanel的用法，它可以实现水平方向的顺序布局，这样我在Grid里面嵌套StackPanel，把StackPanel放在Grid的第二行，button放在StackPanel右向水平布局，从而实现效果，完整代码如下：

图6

图7

这里强调一点，Silverlight的Grid布局在概念上类似HTML的Table布局，所以你也可以用完全的Grid布局，比如写成两行三列，然后把第一行合并单元格（用Grid.ColumnSpan=”3″），也可以实现上面的布局效果，但是我个人偏向用多种布局控件嵌套，这样清爽许多(你想想html里面div是不是比table简洁)。

顺便说个VS2010的技巧，XAML标记很多的时候，查找某个元素很麻烦，你可以打开菜单“视图”，“其它窗口”，“文档大纲”，你会发现所用的标记都以Tree的方式呈现，很直观，方便选取和修改，本例的文档大纲如图：

图8