La Grid - Le séparateur

Comme vous avez pu le voir dans les chapitres précédents, la Grid rend très facile la division de l'espace en différentes zones. Par l'utilisation de RowDefinition et ColumnDefinition, vous pouvez facilement décider combien d'espace chaque ligne et chaque colonne doit occuper. Mais comment cela se passe-t-il si vous voulez laisser à l'utilisateur la possibilité de changer ces dimensions? C'est là que le séparateur (GridSplitter) entre dans la danse.

Le GridSplitter s'utilise simplement en l'ajoutant à une ligne ou une colonne, avec une taille suffisante (5 pixels par exemple). Il vous permettra ensuite de le tirer de haut en bas ou de gauche à droite, tout en redimensionnant les colonnes ou les lignes de chaque côté. Voici un exemple:

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

Comme vous pouvez le voir, j'ai simplement créé deux colonnes de tailles identiques, avec une colonne séparatrice de 5 pixels de large. De chaque côté se trouve un Textblock pour illustrer le cas. Comme vous pouvez l'observer sur l'aperçu, le GridSplitter est représenté comme une ligne divisant les deux colonnes. En outre, dès que la souris survole le GridSplitter, le curseur change pour signifier qu'il est possible de redimensionner.

GridSplitter horizontal

Le GridSplitter est très facile à utiliser et supporte bien sûr la séparation horizontale. En fait vous n'avez presque rien à changer pour que cela fonctionne, comme le montre l'exemple suivant:

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

Comme vous le voyez, j'ai simplement défini des lignes plutôt que des colonnes, et une hauteur plutôt qu'une largeur. Le GridSplitter sait alors comment se comporter. Dans le cas ou cela ne fonctionne pas bien, vous pouvez toujours forcer un comportement avec la propriété ResizeDirection et les valeurs Rows et Columns.