Разделитель GridSplitter

Как вы могли увидеть из предыдущих статей, панель Grid позволяет легко разделить доступное пространство на индивидуальные ячейки. Используя определения рядов и колонок, вы также легко можете решить, какое пространство будет занимать каждый ряд или колонка. Но что, если вы захотите позволить пользователю изменять установленные размеры. Здесь в игру вступает разделитель GridSplitter.

Разделитель GridSplitter используется простым добавлением в колонку или ряд панели Grid с указанием его размера, например, 5 пикселей. После этого пользователь может перетаскивать его со стороны в сторону или вверх-вниз, изменяя размер колонки или ряда с каждой стороны разделителя. Ниже приведен пример:

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

Как вы видите, я просто создал сетку с двумя равными по ширине колонками и одной колонкой между ними в 5 пикселей шириной. В каждой из боковых колонок для иллюстрации находятся текстовые блоки TextBlock. Как видно из скриншота, разделитель 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>

В примере я просто изменил колонки (Column) на ряды (Row), а для разделителя GridSplitter определил высоту Height вместо ширины Width. Остальное поведение разделитель GridSplitter понимает самостоятельно, но в некоторых случаях вы можете явно установить режим рядов Rows или колонок Columns при помощи свойства ResizeDirection.