【转】【C#】【WPF】GridSplitter 控件

GridSplitter 控件类似于 Winform 里的 SplitContainer 控件（个人认为更像 Splitter），用来将 上下 或者 左右 两个区域可以拖动改变大小

参考：https://www.cnblogs.com/dagedan/archive/2012/10/26/2741105.html

 

使用方式：

<GridSplitter Width="5" />

更详细的用法可参考：https://www.cnblogs.com/Peter-Luo/p/12163979.html

四、分割窗口

　　每个Windows用户都见过分割条——能将窗口的一部分与另一部分分离的可拖动分割器。例如，当使用Windowes资源管理器时，会看到一系列文件夹(在左边)和一系列文件(在右边)。可拖动它们之间的分割条来确定每部分占据窗口的比例。

　　在WPF中，分隔条由GridSplitter类表示，它是Grid面板的功能之一。通过为Grid面板添加GridSplitter对象，用户就可以改变行和列的尺寸。

　　大多数开发人员认为WPF中的GridSplitter类不是最直观的。理解如何使用GridSplitter类，从而得到所期望的效果需要一定的经验。下面列出几条指导原则：

• GridSplitter对象必须放在Grid单元格中。可与已经存在的内容一并放到单元格中，这时需要调整边距设置，并将预留行或列的Height或Width属性的值设置为Auto。
• GridSplitter对象总是改变整行或整列的尺寸(而非改变单个单元格的尺寸)。为使GridSplitter对象的外观和行为保持一致，需要拉伸GridSplitter对象使其穿越整行或整列，而不是将其限制在单元格中。为此，可使用前面介绍过的RowSpan或ColumnSpan属性。
• 最初，GridSplitter对象很小不易看见。为了使其更可用，需要哦为其设置最小尺寸。对于竖直分隔条，需要将VerticalAlignment属性设置为Stretch(使分隔条填满区域的整个高度)，并将Width设置为固定值。对于水平分隔条，需要设置HorizontalAlignment属性来拉伸，并将Height属性设置为固定值。
• GridSplitter对齐方式还决定了分隔条是水平的（用于改变行的尺寸）还是竖直的（用于改变列的尺寸）。对于水平分隔条，需要将VerticalAlignment属性设置为Center（这也是默认值），以指明拖动分隔条改变上面行和下面行的尺寸。对于竖直分隔条，需要将HorizontalAlignment属性设置为Center，以改变分隔条两侧列的尺寸。

　　根据上面的规则，下面给出实例，如下所示：

<Window x:Class="GridLayout.GridSplitterWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridSplitterWindow" Height="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="100"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition MinWidth="50"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Grid.Row="0" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="0" Grid.Column="2" Margin="3">Right</Button>
        <Button Grid.Row="1" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="1" Grid.Column="2" Margin="3">Right</Button>
        <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" 
                      Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center" 
                      ShowsPreview="False"></GridSplitter>
    </Grid>
</Window>

　　最终效果如下所示：

 　　上面的标记还包含了一个额外的细节。在声明GridSplitter对象时，将ShowPreview属性设置为false。因此，当把分隔条从一边拖到另一边时，会立即改变列的尺寸。但是如果将ShowPreview属性设置为true，当拖动分隔条时就会看到一个灰色的阴影跟随鼠标指针，用于显示将在何处进行分割。并且直到释放了鼠标键之后列的尺寸才改变。如果GridSplitter对象获得了焦点，也可以使用箭头键改变相应的尺寸。

　　ShowPreview不是唯一可设置的GridSplitter属性。如果希望分割条以更大的幅度(如每次10个单位)进行移动，可调整DragIncrement属性。如果希望控制列的最大尺寸和最小尺寸，只需要在ColumnDefinitions部分设置合适的属性。

　　Grid面板通常包含多个GridSplitter对象，然后，可以在一个Grid面板中嵌套另一个Grid面板；而且，如果确实在Grid面板中嵌套了Grid面板，那么每个Grid面板可以有自己的GridSplitter对象。这样就可以创建被分割成两部分(如左边窗格和右边窗格)的窗口，然后将这些区域进一步分成更多部分。

<Window x:Class="GridLayout.DoubleGridSplitterWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DoubleGridSplitterWindow" Height="300" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition ></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition ></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" VerticalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Button Margin="3" Grid.Row="0">Top Left</Button>
            <Button Margin="3" Grid.Row="1">Bottom Left</Button>
        </Grid>
        <GridSplitter Grid.Column="1" Width="3" HorizontalAlignment="Center" VerticalAlignment="Stretch"
                      ShowsPreview="False"></GridSplitter>
        <Grid Grid.Column="2">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <Button Grid.Row="0" Margin="3">Top Right</Button>
            <Button Grid.Row="2" Margin="3">Bottom Right</Button>
            <GridSplitter Grid.Row="1" Height="3" VerticalAlignment="Center" HorizontalAlignment="Stretch" 
                          ShowsPreview="False"></GridSplitter>
        </Grid>
    </Grid>
</Window>

　　效果图如下所示：