WPF 控件专题 GridSplitter详解

1、GridSplitter 介绍

    GridSplitter：表示重新分布 Grid 控件的列间距或行间距的控件。

**************************************************************************************************************

2、常用属性介绍

    Background：背景色。        IsEnabled：使能，是否可用。
    
    BorderBrush：边框颜色。        Name：元素的标示名称。
    
    BorderThickness：边框大小。    Opacity：透明度。
    
    Width/Height：宽度/高度。    Margin：元素的外边距。
    
    HorizontalAlignment/VerticalAlignment：该元素在父元素中的水平对齐方式/垂直对齐方式。
    
    HorizontalContentAlignment/VerticalContentAlignment：控件内容的水平对齐方式/垂直对齐方式。

**************************************************************************************************************

3、具体代码示例

<Grid Margin="10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
	<Grid.ColumnDefinitions>
		<ColumnDefinition/>
		<ColumnDefinition/>
	Grid.ColumnDefinitions>
	<Border Background="Teal"/>
	<Border Grid.Column="1" Background="Yellow"/>
	<GridSplitter Grid.Column ="0" Background="Red" Width="3" HorizontalAlignment="Right" VerticalAlignment="Stretch"/>
Grid>
 
 
<StackPanel Orientation="Horizontal">
	<Grid Margin="10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="200" Height="400">
		<Grid.ColumnDefinitions>
			<ColumnDefinition/>
			<ColumnDefinition Width="auto"/>
			<ColumnDefinition/>
		Grid.ColumnDefinitions>
		<Border Background="Teal"/>
		<Border Grid.Column="2" Background="Yellow"/>
		<GridSplitter Grid.Column ="1" Background="Red" Width="3" HorizontalAlignment="Right" VerticalAlignment="Stretch"/>
	Grid>
    
	<GridSplitter Margin="10" Background="Red" Width="3" HorizontalAlignment="Center" VerticalAlignment="Stretch" />
StackPanel>

**************************************************************************************************************

4、效果图

  

     在左图鼠标移到GridSpliter上时鼠标变成SizeWE样式，点击左键，然后向左右拖动鼠标，就会使得Grid的两个区域的大小改变，如右图。

    代码示例二效果图：

  

**************************************************************************************************************
5、总结和扩展

    GridSplitter只有在Grid中，拖动时才能进行区域的重新布局；若不在Grid下，可以当分隔条使用。

**************************************************************************************************************