Роздільник контейнера Grid

У минулих статтях ви побачили, що контейнер Grid дозаоляє з легкістю розділяти простір на окремі клітинки. Можна легко вибрати розмір стовпців та рядків, додавши відповідні елементи. Але, як надати користувачу можливість його змінювати? Тут буде в нагоді елемент GridSplitter.

Щоб застосовути GridSplitter достатньо просто додати його до рядка або стовпця контейнеру Grid. Після цього користувач може перетягувати його з боку в бік або з низу вверх. Ось приклад:

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

Як ви бачите, я створив Grid з двома рівними колонками по боках та стовпцем, завширшки 5 пікселів, посередині. Обидві бічні колонки містять елемент TextBlock для наглядності. На скріншоті видно, що елемент GridSplitter візуалізується, як роздільна лінія між двома стовпцями. Як тільки ви наводите на нього курсор миші, його вигляд змінюється, щоб показати можливість змінювати ширину колонок.

Горизонтальний GridSplitter

Використання елементу GridSplitter для розділення по горизонталі, нічим не відрізняється від застосування для розділення по вертикалі. У цьому можна переконатися в наступному прикладі:

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

Як ви бачите я просто поміняв рядки на стовпці, а в елементі GridSplitter я замінив властивість Width на Height. Зазвичай GridSplitter сам визначає свою вісь, однак якщо цього не сталося, то ви можете скористатися властивістю ResizeDirection, щоб вибрати режим роботи (з рядками чи з колонками).