Практическое руководство. Создание масштабируемого пользователем приложения с помощью GridSplitter

Обновлен: Ноябрь 2007

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

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

Ниже приводятся некоторые рекомендации по работе с элементом управления GridSplitter.

• Поместите элемент управления GridSplitter в выделенную строку или столбец, которые не содержат других элементов управления.

• Задайте для высоты строки или ширины столбца, содержащего элемент управления GridSplitter, значение Auto.

• Выделите отдельную панель Grid для элемента управления GridSplitter. Добавьте дополнительные панели-контейнеры на панель Grid для завершения макета.

Создание вертикального разделителя GridSplitter

1. В представлении конструктора выберите элемент управления Grid. Дополнительные сведения см. в разделе Практическое руководство. Выбор и перемещение элементов в область конструктора.

2. Добавьте столбец, в котором должен находиться GridSplitter. Дополнительные сведения см. в разделе Практическое руководство. Добавление строк и столбцов в таблицу.

   Примечание.
   В некоторых случаях могут возникнуть трудности при размещении строк и столбцов в конструкторе. В этом случае можно настроить элемент управления Grid с помощью редактора XAML. Образец разметки XAML см. в подразделе примеров в конце этого раздела.

3. Перетащите с Панели элементов элемент управления GridSplitter в добавленный столбец.

4. В окне Свойства установите следующие свойства для элемента управления GridSplitter:

   Свойство	Значение	Возможные значения
   ResizeBehavior	BasedOnAlignment	BasedOnAlignment CurrentAndNext PreviousAndCurrent PreviousAndNext
   ResizeDirection	Columns	Auto Column Rows
   Grid.Column	Столбец, в который нужно поместить элемент управления GridSplitter. (Индексы столбцов отсчитываются от нуля.)
   Grid.ColumnSpan	1
   Grid.Row	0
   Grid.RowSpan	Общее число строк в панели Grid.
   Width	Ненулевое число. Например, 10.
   Height	Auto
   HorizontalAlignment	Stretch	Left Center Right Stretch
   VerticalAlignment	Stretch	Top Center Bottom Stretch
   Margin	0

5. В представлении конструктора выберите элемент управления Grid.

6. Присвойте значение «Auto» свойству «Width» столбца «ColumnDefinition», содержащего элемент управления GridSplitter.

Создание горизонтального разделителя GridSplitter

1. В представлении конструктора выберите элемент управления Grid. Дополнительные сведения см. в разделе Практическое руководство. Выбор и перемещение элементов в область конструктора.

2. Добавьте строку, в которой должен находиться элемент управления GridSplitter. Дополнительные сведения см. в разделе Практическое руководство. Добавление строк и столбцов в таблицу.

   Примечание.
   В некоторых случаях могут возникнуть трудности при размещении строк и столбцов в конструкторе. В этом случае можно настроить панель Grid с помощью редактора XAML. Образец разметки XAML см. в подразделе примеров в конце этого раздела.

3. Перетащите с Панели элементов элемент управления GridSplitter в добавленную строку.

4. В окне Свойства установите следующие свойства для элемента управления GridSplitter:

   Свойство	Значение	Возможные значения
   ResizeBehavior	BasedOnAlignment	BasedOnAlignment CurrentAndNext PreviousAndCurrent PreviousAndNext
   ResizeDirection	Rows	Auto Column Rows
   Grid.Column	0
   Grid.ColumnSpan	Общее число столбцов в панели Grid.
   Grid.Row	Строка, в которую нужно поместить элемент управления GridSplitter. (Индексы строк отсчитываются от нуля.)
   Grid.RowSpan	1
   Width	Auto
   Height	Ненулевое число. Например, 10.
   HorizontalAlignment	Stretch	Left Center Right Stretch
   VerticalAlignment	Stretch	Top Center Bottom Stretch
   Margin	0

5. В представлении конструктора выберите панель Grid.

6. Присвойте значение «Auto» свойству «Height» для строки RowDefinition, содержащей элемент управления GridSplitter.

Пример

В следующем коде XAML создается горизонтальный разделитель GridSplitter:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
        <RowDefinition MinHeight="70" />
    </Grid.RowDefinitions>
    <DockPanel Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Stretch" Margin="0" Background="LightBlue" Name="DockPanel1">
    </DockPanel>
    <GridSplitter Grid.Row="1" Grid.RowSpan="1" ResizeDirection="Rows" Width="Auto" Height="10" HorizontalAlignment="Stretch" Margin="0" Name="GridSplitter1" />
    <Grid Grid.Row="2" HorizontalAlignment="Stretch" Margin="0" Background="PaleGoldenrod" Name="Grid1">
    </Grid>
</Grid>

См. также

Задачи

Пошаговое руководство. Создание масштабируемого приложения с помощью конструктора WPF

Ссылки

GridSplitter

Другие ресурсы

Макеты в конструкторе WPF

Класс GridSplitter