在第十节中,互联力量已经教大家安装了,微软刚推出的Silverlight 4.0 简体中文正式版,从今天开始,跟互联力量学Silverlight系列将使用Silverlight 4 中文版来描述Silvelight 4 最新的案例。本节内容说到的是Silverlight GridSplitter控件,这个控件其实就是可以拖动的分隔窗体的控件,最常见的形式是资源管理器的左右分隔效果。
Silverlight GridSplitter控件在System.Windows.Controls.dll程序集,如果你是用Silverlight 3,要手动添加引用。添加的方法可以参考“Silverlight WrapPanel和DockPanel用法”。如果你已经按上节完整安装了Silverlight 4,可以直接从工具箱拖放GridSplitter控件来使用。GridSplitter从名字上可以看出,它和Grid控件是相关联的,实际上它必须放在Grid控件的单元格里面,而且这个单元格的宽或高设为“Auto”。
下面我做个用GridSplitter控件分隔左右两列效果的例子。先在Grid里面,创建三列,因为只有一行,所以可以省略行的定义。把GridSplitter放在中间一列上,左右两列分别放两个Button,代码如下:
跟互联力量学Silverlight之十一_GridSplitter控件_图1
从代码中可以看出,通过GridSplitter.Background可以设定分隔线的颜色,ShowPrevidw是设定在拖动GridSplitter的时候,实时显示拖动的结果还是等待拖动鼠标放开后显示,false表示实时的显示。运行结果如图:
跟互联力量学Silverlight之十一_GridSplitter控件_图2
接着我们实现更复杂的效果,通常在网页中,经常可以看到左右分隔的同时,还有上下分隔的效果。根据前面的例子,很明显GridSplitter是需要两个的,但是怎么放呢?分析,Grid应该有多行和列组成,GridSplitter要占用单元格,加起来应该有三行三列,分配的方式是,第一行合并三列放一个button,第二行放GridSplitter沿垂直方向拖动。第三行分别放左Button,中间的水平方向拖动GridSplitter,右Button。代码如下:
跟互联力量学Silverlight之十一_GridSplitter控件_图3
跟互联力量学Silverlight之十一_GridSplitter控件_图4
这个效果也可以用三个Grid来做,就是把最外层的Grid1里面按行放Grid2,GridSplitter1,Grid3,然后在Grid3里面再分三列,把GridSplitter2放第二列。效果相同,只是代码要更多一些。今天说到这里。