• 码农007   2014/8/13 13:11:00
  • Silverlight中GridSplitter控件的使用
  • 关键字: Silverlight 布局控件
  •  对于Grid控件我们比较熟悉了,而我们在Grid控件中引入GridSplitter控件的目的就可以动态地改变Grid控件的单元格宽和高。

    本文就是和大家一起学习如何引入和使用GridSplitter控件。
    如何引入
     要引入GridSplitter控件,我们需要在xaml文件头引入
     xmlns:sp="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" 
    如何使用
     一、左右分隔(共有两种分法)
    方法1、建立一个Grid,"一行两列"。加入GridSplitter控件,此控件放在第二列的最左边(或者第一列的最右边),我们可以看到黄色的竖条,此竖条可以被左右移动,拖动它时,左右单元格的宽度也随之发生了改变。
    xaml文件如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <UserControl x:Class="MySplitControl.Page"
        xmlns:sp="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" 
        Width="400" Height="300">
        <Grid x:Name="LayoutRoot" ShowGridLines="True" Background="White" Width="400"  Height="300">
            <Grid.RowDefinitions>
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Rectangle Fill="Red" Grid.Column="0" Grid.Row="0"></Rectangle>
            <Rectangle Fill="Aqua"  Grid.Column="1" Grid.Row="0"></Rectangle>        
            <sp:GridSplitter x:Name="grsplSplitterColumn" Grid.Column="1"  
    HorizontalAlignment="Left"  VerticalAlignment="Stretch" Background="Yellow"  Width="6">
    </sp:GridSplitter>
        </Grid>
    </UserControl>

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <UserControl x:Class="MySplitControl.Page"
        xmlns:sp="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" 
        Width="400" Height="300">
        <Grid x:Name="LayoutRoot" ShowGridLines="True" Background="White" Width="400"  Height="300">
            <Grid.RowDefinitions>
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Rectangle Fill="Red" Grid.Column="0" Grid.Row="0"></Rectangle>
            <Rectangle Fill="Blue" Grid.Column="1" Grid.Row="0"></Rectangle>
            <Rectangle Fill="Aqua"  Grid.Column="2" Grid.Row="0"></Rectangle>
            <sp:GridSplitter x:Name="grsplSplitterColumn" Grid.Column="1"  
    HorizontalAlignment="Center"  VerticalAlignment="Stretch" Background="Yellow"  Width="6">
    </sp:GridSplitter>
        </Grid>
    </UserControl>

    注意:第二列的Width属性设置为Auto,即: <ColumnDefinition Width="Auto" />,这样它将包裹内含在其内的GridSplitter控件,从而看不出它是一列,而是一个分隔条 如果我们改变它的Width属性,重新设置为25, <ColumnDefinition Width="25" />,我们可以看到第二列展现出来,新的效果如下
    注意:我们可以修改GridSplitter左右两边的单元格的 MinWidth和MaxWidth属性值,从而影响到GridSplitter能够左右移动的范围
    代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <UserControl x:Class="MySplitControl.Page"
        xmlns:sp="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" 
        Width="400" Height="300">
        <Grid x:Name="LayoutRoot" ShowGridLines="True" Background="White" Width="400"  Height="300">
            <Grid.RowDefinitions>
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition  MaxWidth="350" MinWidth="250"/>
                <ColumnDefinition Width="25" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Rectangle Fill="Red" Grid.Column="0" Grid.Row="0"></Rectangle>
            <Rectangle Fill="Blue" Grid.Column="1" Grid.Row="0"></Rectangle>
            <Rectangle Fill="Aqua"  Grid.Column="2" Grid.Row="0"></Rectangle>
            <sp:GridSplitter x:Name="grsplSplitterColumn" Grid.Column="1"  
    HorizontalAlignment="Center"  VerticalAlignment="Stretch" Background="Yellow"  Width="6">
    </sp:GridSplitter>
        </Grid>
    </UserControl>
     

     注意: 你可以使用一个Brush对象来设置GridSplitter的Background property.

    二、上下分隔
    建立一个Grid,两行一列。加入GridSplitter控件,我们可以看到黄色的横条,此横条可以被上下移动,拖动它时,上下单元格的高度也随之发生了改变。

     xaml文件如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
     <UserControl x:Class