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>
效果圖如下所示: