O controle DockPanel

O DockPanel facilita a colocação de conteúdo em todas as quatro direções (superior, inferior, esquerda e direita). Isso o torna uma ótima opção em muitas situações, onde você deseja dividir a janela em áreas específicas, especialmente porque, por padrão, o último elemento dentro do DockPanel, a menos que esse recurso seja especificamente desativado, preencherá automaticamente o restante do espaço (centro ).

Como vimos com muitos dos outros painéis no WPF, você começa a aproveitar as possibilidades do painel usando uma propriedade anexada dele, nesse caso a propriedade DockPanel.Dock, que decide em qual direção você deseja que o controle filho doca para. Se você não usar isso, o primeiro controle será ancorado à esquerda, com o último ocupando o espaço restante. Veja um exemplo de como você o usa:

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

Como já foi mencionado, não atribuímos uma posição de encaixe para o último filho, porque centraliza automaticamente o controle, permitindo que ele preencha o espaço restante. Você também notará que os controles ao redor do centro só ocupam a quantidade de espaço que eles precisam - todo o resto é deixado para a posição central. É também por isso que você verá o botão direito ocupar um pouco mais de espaço do que o botão esquerdo - o caractere extra no texto simplesmente requer mais pixels.

A última coisa que você provavelmente notará é como o espaço é dividido. Por exemplo, o botão Top não recebe todo o espaço no topo, porque o botão Esquerda faz parte dele. O DockPanel decide qual controle favorecer, observando sua posição na marcação. Nesse caso, o botão Esquerda recebe precedência porque é colocado primeiro na marcação. Felizmente, isso também significa que é muito fácil mudar, como veremos no próximo exemplo, onde também nivelamos o espaço ao atribuir larguras / alturas aos controles filhos:

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

Os controles superior e inferior agora têm precedência sobre os controles esquerdo e direito, e todos eles ocupam 50 pixels em altura ou largura. Se você aumentar ou diminuir a janela, você também verá que essa largura / altura estática permanece a mesma, não importa o que - apenas a área do centro aumenta ou diminui de tamanho à medida que você redimensiona a janela.

LastChildFill

Como já mencionado, o comportamento padrão é que o último filho do DockPanel ocupe o restante do espaço, mas isso pode ser desabilitado usando o LastChildFill. Veja um exemplo de como desativá-lo e, ao mesmo tempo, mostraremos a capacidade de encaixar mais de um controle no mesmo lado:

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

Neste exemplo, colocamos dois controles à esquerda e dois controles à direita e, ao mesmo tempo, desativamos a propriedade LastChildFill. Isso nos deixa com espaço vazio no centro, o que pode ser preferível em alguns casos.