在前面的章節你已經學到，使用Grid面板可以很容易的將可用空間劃分成單個單元格。使用行和列的定義，又很容易控制每行或每列佔據多少空間。但是，如果你想讓使用者來改變這些該怎麼辦呢？這個時候GridSplitter就出場了。

GridSplitter使用起來非常簡單，把它加到Grid裡的某一行或者某一列，再分配合適的空間如5個畫素這樣就可以了。它允許使用者從左邊到右邊，從上到下進行拖拽，這樣就改變了行或列的尺寸。來看例子：

<Window x:Class="WpfTutorialSamples.Panels.GridSplitterSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridSplitterSample" Height="300" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
        <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
        <TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
    </Grid>
</Window>
 

從上面可以看到，我建立了一個Grid，裡面包含了兩個等寬的列，以及中間5個畫素的列。兩邊都放了一個TextBlock控制元件來例證這個問題。截圖中就能看到，GridSplitter猶如一條分割線，把兩邊的列隔開了。一旦滑鼠劃到上面，就會改變形狀，告訴你可以改變尺寸。

水平的GridSplitter

GridSplitter使用非常簡單，當然也支援水平方向的分割。實際上，和垂直分割相比，你幾乎不用做什麼改變就能實現水平分割，就如下面的例子演示的：

<Window x:Class="WpfTutorialSamples.Panels.GridSplitterHorizontalSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridSplitterHorizontalSample" Height="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="5" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
        <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" />
        <TextBlock Grid.Row="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
    </Grid>
</Window>