【轉】【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>

　　效果圖如下所示：