Панель DockPanel

DockPanel позволяет пристыковывать содержащиеся в ней элементы во всех четырех направлениях (к верху, к низу, справа и слева). Эта панель является прекрасным выбором, если вам нужно разделить окно на специальные области; в частности и потому, что по умолчанию последний элемент внутри DockPanel автоматически заполняет все оставшееся пространство (в центре), если специально не отключить это свойство.

Как мы уже видели для многих других панелей WPF, преимущества тех или иных возможностей панелей проявляются при использовании свойств, присущих им; в данном случае это свойство DockPanel.Dock, которое определяет, к какому краю будет пристыкован дочерний элемент. Если вы не указываете явно это свойство, то первые элементы будут пристыкованы к левой стороне, а последний займет оставшееся пространство. Ниже приведен пример использования свойства 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>

Как уже говорилось, мы не указываем позицию стыковки для последнего дочернего элемента, поскольку происходит его автоматическое размещение по центру. Вы также можете заметить, что элементы вокруг центра занимают ровно столько места, сколько им необходимо, все остальное пространство остается для центральной позиции. Именно поэтому кнопка Right занимает несколько больше места, чем Left – лишний символ в ее надписи требует для текста больше пикселей.

Последнее, на что мы хотим обратить ваше внимание, это то, как распределяется пространство между дочерними элементами. Например, кнопка Top не занимает все верхнее пространство, поскольку часть его уже занято кнопкой Left. Панель DockPanel определяет предпочтения элементов в соответствии с их позицией в разметке. К счастью, эта же особенность позволяет легко изменить ситуацию, что показано в следующем примере, в котором мы слегка выровняли пространство за счет явного указания широт (Width) и высот (Height) дочерних элементов.

<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>

Верхний (Top) и нижний (Bottom) элементы теперь имеют предпочтение перед левым (Left) и (Right) правым элементами и всем им назначены высота или ширина в 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>

В данном примере мы присоединили два элемента к левой стороне и два элемента к правой стороне и при этом отключили свойство LastChildFill. Это позволило нам сохранить свободное пространство в центре, что может быть полезным в некоторых случаях.