Вложение контейнеров компоновки

WPF --- Основа WPF --- Вложение контейнеров компоновки

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

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

• Создайте горизонтальную панель StackPanel для размещения рядом кнопок ОК и Cancel.

• Поместите панель StackPanel в DockPanel и пристыкуйте ее к нижней части окна.

• Установите свойство DockPanel.LastChildFill в true, чтобы можно было использовать остаток окна для заполнения прочим содержимым. Сюда можно добавить другой элемент управления компоновкой либо просто обычный элемент управления TextBox (как в примере).

• Установите значения полей, чтобы распределить пустое пространство.

Ниже показана итоговая разметка:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Пример компоновки" SizeToContent="WidthAndHeight" >
    <DockPanel LastChildFill="True" MinWidth="400" MinHeight="300">
        <StackPanel DockPanel.Dock="Bottom" HorizontalAlignment="Right"
                    Orientation="Horizontal" MinHeight="40">
            <Button Margin="5" Padding="5">OK</Button>
            <Button Margin="5" Padding="5">Cancel</Button>
        </StackPanel>
        <TextBox DockPanel.Dock="Top" Margin="5" FontSize="12"
                 BorderBrush="LightBlue" BorderThickness="3">Какой то текст...</TextBox>
    </DockPanel>
</Window>

На первый взгляд может показаться, что все это требует больше работы, чем точное размещение с использованием координат в традиционном приложении Windows Forms. Во многих случаях так оно и есть. Однако более высокие временные затраты на установку компенсируются легкостью, с которой можно в будущем изменять пользовательский интерфейс. Например, если вы решите, что кнопки ОК и Cancel должны размещаться по центру нижней части окна, достаточно просто изменить выравнивание содержащей их панели StackPanel:

<StackPanel DockPanel.Dock="Bottom" HorizontalAlignment="Center" ... >

Такой дизайн — простое окно с центрированными кнопками — уже демонстрирует результат, который был невозможен в Windows Forms из .NET 1.x (по крайней мере, невозможен без написания кода) и который требовал специализированных контейнеров компоновки в Windows Forms из .NET 2.0. И если вы когда-либо видели код для визуального конструктора, сгенерированный процессом сериализации Windows Forms, то согласились бы, что используемая здесь разметка яснее, проще и компактнее. Добавив стиль к этому окну, можно еще более усовершенствовать его и удалить другие излишние детали (вроде установки полей), чтобы создать по-настоящему адаптируемый пользовательский интерфейс.

При наличии дерева элементов с плотными вложениями очень легко потерять представление об общей структуре. В Visual Studio доступно удобное средство, показывающее древовидное представление элементов и позволяющее выбирать в нем нужный элемент для просмотра или модификации. Этим средством является окно Document Outline (Структура документа), которое открывается выбором пункта меню View --> Other Windows --> Document Outline (Вид --> Другие окна --> Структура документа):