Поделиться через

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

  • Статья

Элемент управления 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

    Столбцы

    Auto

    Столбец

    Строки

    Grid.Column

    Столбец, в который нужно поместить элемент управления GridSplitter. (Индексы столбцов отсчитываются от нуля.)

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    Общее число строк в панели Grid.

    Ширина

    Ненулевое число. Например, 10.

    Высота

    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

    Строки

    Auto

    Столбец

    Строки

    Grid.Column

    0

    Grid.ColumnSpan

    Общее число столбцов в панели Grid.

    Grid.Row

    Строка, в которую нужно поместить элемент управления GridSplitter. (Индексы строк отсчитываются от нуля.)

    Grid.RowSpan

    1

    Ширина

    Auto

    Высота

    Ненулевое число. Например, 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