SilverLight学习笔记--Silverlight中GridSplitter控件的使用

 对于Grid控件我们比较熟悉了，而我们在Grid控件中引入GridSplitter控件的目的就可以动态地改变Grid控件的单元格宽和高。
   本文就是和大家一起学习如何引入和使用GridSplitter控件。
   如何引入
   要引入GridSplitter控件，我们需要在xaml文件头引入
 xmlns:sp="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" 

如何使用
   一、左右分隔(共有两种分法)
   方法1、建立一个Grid,"一行两列"。加入GridSplitter控件，此控件放在第二列的最左边(或者第一列的最右边)，我们可以看到黄色的竖条，此竖条可以被左右移动，拖动它时，左右单元格的宽度也随之发生了改变。

xaml文件如下:

Code

方法2、建立一个Grid,一行三列。加入GridSplitter控件，此控件放在第二列中，我们可以看到黄色的竖条，此竖条可以被左右移动，拖动它时，左右单元格的宽度也随之发生了改变。
  xaml文件如下:

Code

 注意：第二列的Width属性设置为Auto,即： <ColumnDefinition Width="Auto" />，这样它将包裹内含在其内的GridSplitter控件，从而看不出它是一列，而是一个分隔条
   如果我们改变它的Width属性，重新设置为25， <ColumnDefinition Width="25" />，我们可以看到第二列展现出来，新的效果如下

 注意：我们可以修改GridSplitter左右两边的单元格的 MinWidth和MaxWidth属性值，从而影响到GridSplitter能够左右移动的范围
   代码如下:

Code

 

 注意: 你可以使用一个Brush对象来设置GridSplitter的Background property.
   二、上下分隔
   建立一个Grid，两行一列。加入GridSplitter控件，我们可以看到黄色的横条，此横条可以被上下移动，拖动它时，上下单元格的高度也随之发生了改变。

 xaml文件如下:
Code

  注意：我们也可用类似于左右分隔的方法来操作上下分隔的效果。

     三、上下左右均可分隔
    3、建立一个Grid,两行两列，加入GridSplitter控件，我们可以看到两个分隔条，移动它们可以分别改变上下、左右的单元格大小。

 xaml文件如下:

Code

 

  注意：我们要用到 Grid.ColumnSpan 属性值来把GridSplitter的宽度延长到其它单元格。否则其宽度仅限于它所放置的那个单元格内。
   注意:GridSplitter 另一个有用的属性是PreviewStyle，当我们设置为true时，当移动GridSplitter条时我们看到移动的是一个阴影条，当PreviewStyle属性设置为false时，GridSplitter的当前样式条将随着移动。请自行变更此项设置看看效果。
前往：Silverlight学习笔记清单
本文参照了部分网络资料，希望能够抛砖引玉，大家共同学习。
(转载本文请注明出处)
posted @ 2009-07-26 08:30  wsdj  阅读(4654)  评论(0)  编辑  收藏  举报