Язык программирования C#9 и платформа .NET5 - Эндрю Троелсен

Button на самом деле является "последним дочерним" элементом в контейнере, он будет растянут, чтобы занять все оставшееся пространство.

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

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

<ScrollViewer>

  <StackPanel>

    <Button Content ="First" Background = "Green" Height ="50"/>

    <Button Content ="Second" Background = "Red" Height ="50"/>

    <Button Content ="Third" Background = "Pink" Height ="50"/>

    <Button Content ="Fourth" Background = "Yellow" Height ="50"/>

    <Button Content ="Fifth" Background = "Blue" Height ="50"/>

  </StackPanel>

</ScrollViewer>

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

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

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

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

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

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

<Window x:Class="VisualLayoutTester.MainWindow"

  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>

    </Grid>

</Window>

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

Теперь предположим, что определена сетка с каким-то числом ячеек. Далее можно перетаскивать элементы управления в интересующую ячейку сетки и IDE-среда будет автоматически устанавливать их свойства Grid.Row и Grid.Column. Вот как может выглядеть разметка, сгенерированная IDE-средой после перетаскивания элемента Button в предопределенную ячейку:

<Button x:Name="button" Content="Button" Grid.Column="1"

  HorizontalAlignment="Left"

  Margin="21,21.4,0,0" Grid.Row="1"

  VerticalAlignment="Top" Width="75"/>

Пусть, например, было решено вообще не использовать элемент Grid. Щелчок правой кнопкой мыши на любом узле разметки в окне Document Outline приводит к открытию контекстного меню, которое содержит пункт, позволяющий заменить текущий контейнер другим (рис. 25.11). Следует осознавать, что такое действие (с высокой вероятностью) радикально изменит позиции элементов управления, потому что они станут удовлетворять правилам нового типа панели.

Еще один удобный трюк связан с возможностью выбора в визуальном конструкторе набора элементов управления и последующего их группирования внутри нового вложенного диспетчера компоновки. Предположим, что имеется панель Grid, которая содержит набор произвольных объектов. Выделите множество элементов на поверхности визуального конструктора, щелкая кнопкой мыши при нажатой клавише <Ctrl>. Если вы затем щелкните правой кнопкой мыши на выбранном наборе, то с помощью открывшегося контекстного меню сможете сгруппировать выделенные элементы в новую вложенную панель (рис. 25.12).

После этого снова загляните в окно Document Outline, чтобы проконтролировать вложенную систему компоновки. Так как строятся полнофункциональные окна WPF, скорее всего, всегда нужно будет использовать систему вложенных компоновок, а не просто выбирать единственную панель для отображения всего пользовательского интерфейса (фактически в оставшихся примерах приложений WPF обычно так и будет делаться). В качестве финального замечания следует указать, что все узлы в окне Document Outline поддерживают перетаскивание.

Например, если требуется переместить в родительскую панель элемент управления, который в текущий момент находится внутри Canvas, тогда можно поступить так, как иллюстрируется на рис. 25.13.

В последующих главах, посвященных WPF, будут представлены дополнительные ускоренные приемы для работы с компоновкой там, где они возможны. Тем не менее, определенно полезно посвятить какое-то время самостоятельному экспериментированию и проверке разнообразных средств. В следующем примере данной главы будет демонстрироваться построение вложенного диспетчера компоновки для специального приложения обработки текста (с проверкой правописания).

Построение окна с использованием вложенных панелей

Как упоминалось ранее, в типичном окне WPF для получения желаемой системы компоновки применяется не единственный элемент управления типа панели, а одни панели вкладываются внутрь других. Начните с создания нового проекта приложения WPF по имени MyWordPad.

Вашей целью является конструирование компоновки, в которой главное окно имеет расположенную в верхней части систему меню, под ней — панель инструментов и в нижней части окна — строку состояния. Строка состояния будет содержать область для текстовых подсказок, которые отображаются при выборе пользователем пункта меню (или кнопки в панели инструментов). Система меню и панель инструментов предоставят триггеры пользовательского интерфейса для закрытия приложения и отображения вариантов правописания в виджете Expander.

На рис. 25.14 показана начальная компоновка; она также иллюстрирует возможности правописания в рамках инфраструктуры WPF.

Чтобы приступить к построению интересующего пользовательского интерфейса, модифицируйте начальное определение XAML типа Window для использования дочернего элемента DockPanel вместо стандартного элемента управления Grid:

<Window x:Class="MyWordPad.MainWindow"

  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:MyWordPad"

    mc:Ignorable="d"

    Title="My Spell Checker" Height="450" Width="800">

  <! -- Эта панель устанавливает содержимое окна -->

  <DockPanel>

  </DockPanel>

</Window>

Построение системы меню

Системы меню