Der GridSplitter

Wie in den vorherigen Artikeln gezeigt, erlaubt das Grid Panel eine einfache Unterteilung des verfügbaren Platzes in einzelnen Zellen. Über das Setzen der Spalten- und Zeilendefinition, kannst du leicht entscheiden, wie viel Platz jede Reihe oder Spalte einnehmen soll. Aber was ist, wenn du willst, dass der Nutzer das ändern darf? Das ist der der Zeitpunkt, in dem der GridSplitter ins Spiel kommt.

Solang genügend Platz (etwa 5 px) für ihn vorhanden ist, kann der GridSplitter einfach zwischen Spalten oder Zeilen hinzugefügt werden. Das erlaubt den Nutzer, den GridSplitter von Seite zu Seite oder hoch und runter zu ziehen, währenddessen die Größe der Spalten oder Reihen sich dementsprechend anpassen. Hier ist ein Beispiel:

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

Wie du sehen kannst, erstellte ich ein Grid mit zwei gleich großen Spalten und eine 5px große Spalte in der Mitte. Jede der Seiten beinhaltet ein TextBlock Steuerelement. Wie der Screenshot zeigt, wird der GridSplitter als spaltende Linie zwischen den beiden Spalten angezeigt. Sobald der Mauszeiger sich darüber befindet, verändert dieser sich, um zu verdeutlichen, dass die Spaltenbreite verändert werden kann.

Horizontaler GridSplitter

Der GridSplitter ist sehr einfach zu verwenden und natürlich wird auch das horizontale Splitten von Spalten unterstützt. Du musst noch nicht mal viel im Code verändern, um es statt vertikal auch horizontal nutzen zu können, wie das folgende Beispiel zeigt:

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

Wie du siehst, i veränderte einfach die Spalten zu Zeilen und im GridSplitter definierte ich die Eigenschaft Height (Höhe) statt Width (Breite). Den Rest bestimmt der GridSplitter für sich selbst. Doch wenn doch nachgebessert werden muss, kannst du die Eigenschaft ResizeDirection setzen und so den Spalten- oder Zeilen-Modus erzwingen.