GridSplitter

Jak zauważyłeś w poprzednich artykułach, stosując panel Grid można bardzo łatwo można dzielić dostępną przestrzeń na pojedyńcze komórki . Wykorzystując definicję kolumn oraz wierszy, jesteś w stanie określić ile przestrzeni mają one zajmować. Jednak co zrobić jeżeli będziesz chciał pozostawić ten wybór użytownikowi? Z pomocą przychodzi GridSplitter.

W celu zastosowania właściwości GridSplitter należy go dodać do kolumny, lub wiersza z odpowiednią ilością przestrzeni, np. 5 pikseli. Umożliwi to użytkownikowi na przeciąganie go z jednej strony na drugą, lub z góry na dół, tym samym zmieniając rozmiar kolumn lub wierszy, po obu jego stronach. Przykład poniżej:

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

Jak widzisz, stworzyłem prostą siatkę wraz z dwoma kolumnami o takiej samej szerokości oraz kolumną o szerokości 5 pikseli pomiędzy nimi. Boczne kolumny zawierają tylko kontrolkę TextBlock aby zilustrować problem. Jak możesz zobaczyć na zrzucie ekranu, GridSplitter jest reprezentowany przez szarą linię pomiędzy dwiema kolumnami wraz z efektem zmiany kursora, kiedy ten jest nad, aby pokazać, że możliwa jest zmiana szerokości.

GridSplitter w poziomie

GridSplitter jest bardzo prosty w zastosowaniu i można go stosować także do dzielenia interfejsu w poziomie. W gruncie rzeczy zmiany jakich należy dokonać w kodzie, aby podział interfejsu był horyzontalny są minimalne:

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

Jak widzisz, po prostu zamieniłem kolumny na wiersze oraz określiłem wysokość GridSplitter'a zamiast szerokości. Reszty GridSplitter domyśli się sam, jednak w przypadku, gdyby mu się nie udało, użyj właściwości ResizeDirection aby wymusić na nim tryb wierszy (Rows) lub kolumn (Columns).