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

49

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

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

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

<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 (Вид --> Другие окна --> Структура документа):

Document Outline (Структура документа)
Пройди тесты
Лучший чат для C# программистов