El GridSplitter

Como viste en los artículos anteriores, el panel Cuadrícula (Grid) hace que sea muy fácil dividir el espacio disponible en celdas individuales. Usando definiciones de columnas y filas, puedes decidir fácilmente cuánto espacio debe ocupar cada fila o columna, pero ¿qué sucede si deseas permitir que el usuario cambie esto? Aquí es donde el control GridSplitter entra en juego.

El GridSplitter se usa simplemente agregándolo a una columna o una fila en una Grid, con la cantidad adecuada de espacio para ello, por ejemplo: 5 píxeles. Luego permitirá al usuario arrastrarlo de lado a lado o arriba y abajo, mientras cambia el tamaño de la columna o fila en cada uno de los lados de la misma. Aquí hay un ejemplo:

<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 puedes ver, simplemente he creado una cuadrícula con dos columnas igualmente anchas, con una columna de 5 píxeles en el centro. Cada uno de los lados es solo un control TextBlock para ilustrar el punto. Como se puede ver en las capturas de pantalla, el GridSplitter se representa como una línea divisoria entre las dos columnas y cuando el ratón está sobre él, el cursor se cambia para reflejar que se puede cambiar el tamaño.

GridSplitter Horizontal

El GridSplitter es muy fácil de usar y, por supuesto, también admite divisiones horizontales. De hecho, apenas tienes que cambiar nada para que funcione horizontalmente en lugar de verticalmente, como se mostrará en el siguiente ejemplo:

<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 puedes ver, simplemente cambié las columnas por filas en el GridSplitter y definí una Altura en lugar de un Ancho. El GridSplitter se da cuenta por si mismo del cambio, pero en caso de que no lo haga, puede usar la propiedad ResizeDirection para forzarlo al modo Filas o Columnas.