Язык программирования C#9 и платформа .NET5

Прежде всего, обратите внимание, что колонка, которая будет поддерживать разделитель, имеет свойство Width, установленное в Auto. Вдобавок элемент GridSplitter использует синтаксис присоединяемых свойств для указания, с какой колонкой он работает. В выводе (рис. 25.7) можно заметить 5-пиксельный разделитель, который позволяет изменять размер каждого элемента Label. Из-за того, что для элементов Label не было задано свойство Height или Width, они заполняют всю ячейку.

Позиционирование содержимого внутри панелей DockPanel

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

В файле SimpleDockPanel.xaml определена следующая простая панель DockPanel, которая дает результат, показанный на рис. 25.8:

 

 

      Content="Enter Car Information"/>

 

 

 

 

На заметку! Если добавить множество элементов к одной стороне DockPanel, то они выстроятся вдоль указанной грани в порядке их объявления.

Преимущество применения типов DockPanel заключается в том, что при изменении пользователем размера окна каждый элемент остается прикрепленным к указанной (посредством DockPanel.Dock) стороне панели. Также обратите внимание, что внутри открывающего дескриптора DockPanel в этом примере атрибут LastChildFill установлен в true. Поскольку элемент Button на самом деле является "последним дочерним" элементом в контейнере, он будет растянут, чтобы занять все оставшееся пространство.

Включение прокрутки в типах панелей

Полезно упомянуть, что в рамках инфраструктуры WPF поставляется класс ScrollViewer, который обеспечивает автоматическое поведение прокрутки данных внутри объектов панелей. Вот как он определяется в файле SimpleScrollViewer.xaml:

 

   

   

   

   

   

 

Результат визуализации приведенного определения XAML представлен на рис. 25.9 (обратите внимание на то, что справа в окне отображается линейка прокрутки, т.к. размера окна не хватает, чтобы показать все пять кнопок).

Как и можно было ожидать, каждый класс панели предлагает многочисленные члены, позволяющие точно настраивать размещение содержимого. В качестве связанного замечания: многие элементы управления WPF поддерживают два удобных свойства (Padding и Margin), которые предоставляют элементу управления возможность самостоятельного информирования панели о том, как с ним следует обращаться. В частности, свойство Padding управляет тем, сколько свободного пространства должно окружать внутренний элемент управления, а свойство Margin контролирует объем дополнительного пространства вне элемента управления.

На этом краткий экскурс в основные типы панелей WPF и различные способы позиционирования их содержимого завершен. Далее будет показано, как использовать визуальные конструкторы Visual Studio для создания компоновок.

Конфигурирование панелей с использованием визуальных конструкторов Visual Studio

 Теперь, когда вы ознакомились с разметкой XAML, применяемой при определении ряда общих диспетчеров компоновки, полезно знать, что IDE-среда Visual Studio предлагает очень хорошую поддержку для конструирования компоновок. Ключевым компонентом является окно Document Outline, описанное ранее в главе. Чтобы проиллюстрировать некоторые основы, мы создадим новый проект приложения WPF по имени VisualLayoutTester.

В первоначальной разметке для Window по умолчанию используется диспетчер компоновки Grid:

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

  xmlns:local="clr-namespace:VisualLayoutTesterApp"

  mc:Ignorable="d"

    Title="MainWindow" Height="450" Width="800">

   

   

Если вы благополучно применяете систему компоновки Grid, то на рис. 25.10 заметите, что можно легко разделять и менять размеры ячеек сетки, используя визуальный конструктор. Сначала необходимо выбрать компонент Grid в окне Document Outline и затем щелкнуть на границе сетки, чтобы создать новые строки и колонки.