De GridSplitter (Rasterverdeler)

Zoals je kan zien in de voorgaande artikels vereenvoudigt het Gridpanel (raster) het opdelen van de beschikbare ruimte in afzonderlijke vakken. Aan de hand van een kolom- en rijdefinities bepaal je gemakkelijk hoeveel plaats een kolom of een rij mag innemen. Maar wat gebeurt er als je een gebruiker wil toestaan dit aan te passen ? Dan is de Gridsplitter (raster verdeler) bediening van toepassing.

De Gridsplitter (rasterverdeler) kan eenvoudig worden toegevoegd aan een rij of kolom in het Grid (raster) met opgave van de gewenste afmetingen, bijvoorbeeld 5 pixels. De gebruiker kan de splitter dan horizontaal of verticaal verslepen en zo de afmetingen van beide kanten van de Gridsplitter aanpassen. Hier volgt een voorbeeld:

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

Zoals je kan zien, heb ik een eenvoudige Grid (raster) gemaakt met twee kolommen van gelijke breedte met ertussen een kolom van 5 pixel breed. Om dit duidelijk te maken bevat elk van de kolommen een tekstblok. In de schermafbeelding is te zien dat de GridSplitter wordt weergegeven als een scheidingslijn tussen beide kolommen. Op het moment dat de muiswijzer er over gaat, wijzigt die om aan te geven dat de tussenkolom kan worden aangepast.

Horizontal GridSplitter

De GridSplitter is eenvoudig te gebruiken en kan ook horizontale verdelingen maken. Het vraagt maar een kleine aanpassing om het horizontaal te gebruiken in plaats van verticaal zoals het volgende voorbeeld bewijst:

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

Zoals je kan zien, heb ik de kolommen in rijen omgezet en voor de GridSplitter een Hoogte in plaats van een Breedte ingesteld. De GridSplitter kan de rest voor zichzelf uitwerken. Als het toch niet automatisch zou lukken, kan je de GridSplitter in Kolom dan wel Rij instelling dwingen door de ResizeDirection eigenschap te gebruiken.