Контейнеры в WPF. DockPanel

Контейнер DockPanel позволяет прижимать элементы управления к какой либо стороне контейнера.

Свойства контейнера DockPanel

Контейнер DockPanel предоставляет нам следующие свойства для размещения элементов:

Пример использования DockPanel

Ниже представлен пример использования контейнера DockPanel с расположенными в нём пятью кнопками.

<Window x:Class="WpfApp2.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp2"
        mc:Ignorable="d"
        Title="MainWindow" Height="275" Width="400">
    <DockPanel>
        <Button DockPanel.Dock="Top" Content="Top" Background="Red"/>
        <Button DockPanel.Dock="Bottom" Content="Bottom" Background="Blue"/>
        <Button DockPanel.Dock="Right" Content="Bottom" Background="Green"/>
        <Button DockPanel.Dock="Left" Content="Bottom" Background="Yellow"/>
        <Button DockPanel.Dock="Left" Content="Bottom" Background="Violet"/>
    </DockPanel>
</Window>

Результатом такого кода XAML будет следующий внешний вид приложения:

Здесь стоит обратить внимание на следующие моменты:

1. Для элементов, у которых не установлено свойство Height, но установлено свойство DockPanel.Dock="Top" или DockPanel.Dock="Bottom" высота автоматически становится такой, чтобы отобразить то, что содержится в свойстве Content (в нашем случае — это обычный текст).
2. Для элементов у которых не установлено свойство Width, но установлено свойство DockPanel.Dock="Right" или DockPanel.Dock="Left" ширина автоматически становится такой, чтобы отобразить содержимое свойства Content, либо элемент старается занять всё доступное пространство в контейнере.  Например, для желтой и розовой кнопки установлено одно и то же значение свойства  DockPanel.Dock="Left". Так как у этих элементов не установлено свойство Width, то для желтой кнопки размер подобран так, чтобы отобразить текст, а розовая занимает всё оставшееся доступное место в контейнере.

Свойство LastChildFill

Это свойство DockPanel принимает значение True/False и указывает должен ли последний элемент занимать всё оставшееся доступное пространство или нет. Значение по умолчанию — True. Исходя из этого, мы могли бы составить исходный код примера выше следующим образом:

<Window x:Class="WpfApp2.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp2"
        mc:Ignorable="d"
        Title="MainWindow" Height="275" Width="400">
    <DockPanel LastChildFill="True">
        <Button DockPanel.Dock="Top" Content="Top" Background="Red"/>
        <Button DockPanel.Dock="Bottom" Content="Bottom" Background="Blue"/>
        <Button DockPanel.Dock="Right" Content="Right" Background="Green"/>
        <Button DockPanel.Dock="Left" Content="Left" Background="Yellow"/>
        <Button Content="Left" Background="Pink"/>
    </DockPanel>
</Window>

Как можно видеть, у последней кнопки отсутствует значение свойства DockPanel.Dock. Тем не менее, результат будет тот же, что и на рисунке выше. Если же у DockPanel установить свойство LastChildFill="False", то результат будет следующим:

Итого

Контейнер WPF DockPanel позволяет «прижимать» содержимое к определенным краям контейнера. Этот контейнер удобно использовать для создания стандартных интерфейсов приложений где верхняя часть занимается какими-либо меню, нижняя — используется для второстепенных функций, а центр — содержит полезный контент.