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

在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

asp.net教程

接着可以把子控件排列到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 ;</ColumnDefinition>

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

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

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

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

图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右向水平布局,从而实现效果,完整代码如下:

互联力量-.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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章