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

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

互联力量-.net silverlight-跟互联力量学Silverlight之九_Silverlight
Grid控件常见用法-图1

图1

互联力量-.net silverlight-跟互联力量学Silverlight之九_Silverlight
Grid控件常见用法-图2

图2

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

互联力量-.net silverlight-跟互联力量学Silverlight之九_Silverlight
Grid控件常见用法-图3

图3

互联力量-.net silverlight-跟互联力量学Silverlight之九_Silverlight
Grid控件常见用法-图4

图4

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

方式一:绝对 大小:直接设置width或height属性改变大小,以像素为单位。写法是:<ColumnDefinition Width=”100″></ColumnDefinition>

方式二:自动 大小:根据单元格里面的控件内容,自动分配大小,写法是:<ColumnDefinition Width=”Auto”></ColumnDefinition>

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

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

互联力量-.net silverlight-跟互联力量学Silverlight之九_Silverlight
Grid控件常见用法-图5

图5

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

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

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

互联力量-.net silverlight-跟互联力量学Silverlight之九_Silverlight
Grid控件常见用法-图6

图6

互联力量-.net silverlight-跟互联力量学Silverlight之九_Silverlight
Grid控件常见用法-图7

图7

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

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

互联力量-.net silverlight-跟互联力量学Silverlight之九_Silverlight
Grid控件常见用法-图8

图8

版权所用 互联力量, 原文出自:http://www.foxitjob.com/2010/07/444.html