GridSplitter - разделенные окна

WPF --- Основа WPF --- GridSplitter - разделенные окна

Каждый пользователь Windows встречался с разделительными полосами — перемещаемыми разделителями, которые отделяют одну часть окна от другой. Например, в проводнике Windows слева находится список папок, а справа — список файлов. Перетаскивая разделительную полосу, можно устанавливать пропорции между этими двумя панелями в окне.

В WPF полосы разделителей представлены классом GridSplitter и являются средствами Grid. Добавляя GridSplitter к Grid, вы предоставляете пользователю возможность изменения размеров строк и колонок.

Большинство программистов считают GridSplitter наиболее интуитивно понятной частью WPF. Чтобы разобраться, как использовать его для получения требуемого эффекта, нужно лишь немного поэкспериментировать. Ниже предлагается несколько подсказок:

• GridSplitter должен быть помещен в ячейку Grid. Его можно поместить в ячейку с существующим содержимым — тогда понадобится настроить установки полей, чтобы они не перекрывались. Лучший подход заключается в резервировании специальной колонки или строки для GridSplitter, со значениями Height или Width, равными Auto.

• GridSplitter всегда изменяет размер всей строки или колонки (вне отдельной ячейки). Чтобы сделать внешний вид GridSplitter соответствующим такому поведению, необходимо растянуть GridSplitter по всей строке или колонке, а не ограничиваться единственной ячейкой. Для этого используются свойства RowSpan и ColumnSpan.

• Изначально GridSplitter настолько мал, что его не видно. Чтобы сделать его удобным, понадобится указать его минимальный размер. В случае вертикальной разделяющей полосы нужно установить VerticalAlignment в Stretch (чтобы он заполнил всю высоту доступной области), a Width — в фиксированный размер (например, 10 независимых от устройства единиц). В случае горизонтальной разделительной полосы следует установить HorizontalAlignment в Stretch, a Height — в фиксированный размер.

• Выравнивание GridSplitter также определяет, будет ли разделительная полоса горизонтальной (используемой для изменения размеров строк) или вертикальной (для изменения размеров колонок). В случае горизонтальной разделительной полосы необходимо установить VerticalAlignment в Center (что принято по умолчанию), указав тем самым, что перетаскивание разделителя изменит размеры строк, находящихся выше и ниже. В случае вертикальной разделительной полосы понадобится установить HorizontalAlignment в Center, чтобы изменять размеры соседних колонок.

Изменить поведение установки размеров можно через свойства ResizeDirection и ResizeBehavior объекта GridSplitter. Однако проще поставить это поведение в зависимость от установок выравнивания, что и принято по умолчанию.

Еще не запутались? Чтобы закрепить эти правила, стоит взглянуть на реальный код примера:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Элемент Grid" Height="250" Width="380">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button>Button1</Button>
        <Button Grid.Column="2">Button2</Button>
        <Button Grid.Row="1">Button3</Button>
        <Button Grid.Row="1" Grid.Column="2">Button4</Button>
        <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Width="5"
                      VerticalAlignment="Stretch" HorizontalAlignment="Center"></GridSplitter>
    </Grid>
</Window>

Эта разметка включает одну дополнительную деталь. Когда объявляется GridSplitter, свойство ShowsPreview устанавливается в false. В результате, когда полоса разделителя перетаскивается от одной стороны к другой, колонки немедленно изменяют свой размер. Но если установить ShowsPreview в true, то при перетаскивании отображается лишь серая тень, следующая за курсором мыши, которая показывает, куда попадет разделитель после отпускания кнопки мыши. Вплоть до этого момента колонки изменять размеры не будут. После получения фокуса элементом GridSplitter для изменения размера можно также использовать клавиши со стрелками.

ShowsPreview — не единственное свойство GridSplitter, которое доступно для установки. Можно также изменить свойство DragIncrement, если полоса разделителя должна перемещаться "шагами" (например, по 10 единиц за раз). Для управления минимально и максимально допустимыми размерами колонок просто устанавливаются соответствующие свойства в разделе ColumnDefinitions, как было показано в предыдущем примере.

Обычно Grid содержит не более одного GridSplitter. Тем не менее, можно вкладывать один Grid в другой, и при этом каждый из них будет иметь собственный GridSplitter. Это позволяет создавать окна, которые разделены на две области (например, на левую и правую панель), одна из которых (скажем, правая), в свою очередь, также разделена на два раздела (на верхний и нижний с изменяемыми размерами).