O GridSplitter

Como você viu nos artigos anteriores, o painel Grade torna muito fácil dividir o espaço disponível em células individuais. Usando as definições de coluna e linha, você pode facilmente decidir quanto espaço cada linha ou coluna deve ocupar, mas e se você quiser permitir que o usuário altere isso? É aqui que entra o controle GridSplitter.

O GridSplitter é usado simplesmente adicionando-o a uma coluna ou linha em um Grid, com a quantidade adequada de espaço para ele, por exemplo. 5 pixels. Ele permitirá que o usuário o arraste de um lado para outro ou para cima e para baixo, enquanto altera o tamanho da coluna ou linha em cada um dos lados dele. Aqui está um exemplo:

<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>

Como você pode ver, eu simplesmente criei uma grade com duas colunas igualmente largas, com uma coluna de 5 pixels no meio. Cada um dos lados é apenas um controle TextBlock para ilustrar o ponto. Como você pode ver nas capturas de tela, o GridSplitter é renderizado como uma linha divisória entre as duas colunas e, assim que o mouse passa sobre ele, o cursor é alterado para refletir que ele pode ser redimensionado.

GridSplitter horizontal

O GridSplitter é muito fácil de usar e, claro, também suporta splits horizontais. Na verdade, você dificilmente terá que alterar nada para fazer com que ele funcione horizontalmente em vez de verticalmente, como mostrará o próximo exemplo:

<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>

Como você pode ver, eu simplesmente mudei as colunas para linhas e no GridSplitter, eu defini Altura ao invés de Largura. O GridSplitter descobre o resto sozinho, mas caso isso não aconteça, você pode usar a propriedade ResizeDirection para forçá-lo no modo Rows ou Columns.