Контейнер DockPanel

DockPanel дозволяє прикріпити свій вміст до однієї зі сторін (top, bottom, left чи right). Тому завдяки ньому можна з легкістю поділити вікно на окремі області. Зокрема тому що, останній елемент в контейнері автоматично займає весь простір, що залишився.

Перевагою багатьох контейнерів WPF є зв'язані властивості. Така властивість в DockPanel називається Dock. Вона позначає сторону, до якої ви хочете прикріпити дочірній елемент. За умовчуванням, перший елемент прикріплюється до лівої сторони, а останній займає весь доступний простір.

<Window x:Class="WpfTutorialSamples.Panels.DockPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="250" Width="250">
	<DockPanel>
		<Button DockPanel.Dock="Left">Left</Button>
		<Button DockPanel.Dock="Top">Top</Button>
		<Button DockPanel.Dock="Right">Right</Button>
		<Button DockPanel.Dock="Bottom">Bottom</Button>
		<Button>Center</Button>
	</DockPanel>
</Window>

Як вже згадано, ми не задавали прикріплення останнього елементу, бо він автоматично заповнює весь доступний простір. Інші дочірні елементи займають лише потрібний їм простір, а все решту заповнює центральний елемент. Саме тому права кнопка більша за ліву, адже 5 символів вимагають більше місця ніж 4.

Останнє, що вам слід запам'ятати - це розподіл місця. Наприклад, верхня кнопка не займає всю верхню сторону, адже її частково витісняє ліва кнопка. DockPanel вибирає пріоритет для дочірніх елементів на основі їх позиції в розмітці. Чим вище елемент в розмітці, тим вищий його пріоритет. Однак цей підхід можна вимкнути, вручну задавши розмір дочірніх елементів, як це зроблено в наступному прикладі:

<Window x:Class="WpfTutorialSamples.Panels.DockPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="250" Width="250">
	<DockPanel>
		<Button DockPanel.Dock="Top" Height="50">Top</Button>
		<Button DockPanel.Dock="Bottom" Height="50">Bottom</Button>
		<Button DockPanel.Dock="Left" Width="50">Left</Button>
		<Button DockPanel.Dock="Right" Width="50">Right</Button>	
		<Button>Center</Button>
	</DockPanel>
</Window>

Тепер верхня й нижня кнопки отримали пріоритет перед бічними. Крім того всі елементи мають висоту чи ширину 50 пікселів. Якщо ви зміните розмір вікна, то побачите, що величини задані вручну залишаться незмінними. Змінюватиметься лише розмір центрального елемента.

Властивість LastChildFill

Як вже згадано, за умовчуванням, останній дочірній елемент займає весь доступний простір, однак цю поведінку можна вимкнути, скориставшийсь властивістю LastChildFill. Ось приклад, в якому не лише показано, як це працює, а й те, як прикріпити по декілька елементів до однієї сторони:

<Window x:Class="WpfTutorialSamples.Panels.DockPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="300" Width="300">
	<DockPanel LastChildFill="False">
		<Button DockPanel.Dock="Top" Height="50">Top</Button>
		<Button DockPanel.Dock="Bottom" Height="50">Bottom</Button>
		<Button DockPanel.Dock="Left" Width="50">Left</Button>
		<Button DockPanel.Dock="Left" Width="50">Left</Button>
		<Button DockPanel.Dock="Right" Width="50">Right</Button>
		<Button DockPanel.Dock="Right" Width="50">Right</Button>
	</DockPanel>
</Window>

В цьому прикладі ми прикріпили по 2 елементи керування до обох бічних сторін. Крім того ми вимкнули властивість LastChildFill. Завдяки цьому вдалося отримати вільний простір всередині контейнера.