Le DockPanel

Le DockPanel permet facilement d'accrocher ou d'amarrer du contenu dans les quatre directions (haut, bas, gauche et droite). Cela en fait un très bon choix lorsque vous voulez diviser la fenêtre en différentes zones. En effet, tant que cette option n'est pas explicitement spécifiée, le dernier élément ajouté au DockPanel remplira automatiquement l'espace restant (au centre).

Comme vous avez pu le voir avec les autres panels du WPF, vous commencez à profiter des possibilités des panels en utilisant leurs propriétés attachées. Dans notre cas, la propriété DockPanel.Dock décide de la direction dans laquelle vous allez amarrer vos contrôles enfants. Si vous ne le faites pas, le(s) premier(s) contrôle(s) sera amarré à la gauche, et le dernier remplira tout l'espace disponible restant. Voici un exemple d'utilisation:

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

Comme expliqué précédemment, nous ne spécifions pas de position pour le dernier enfant, lui laissant la possibilité de remplir l'espace disponible. Vous remarquerez également, que les autres contrôles autour ne prennent que l'espace qui leur est strictement nécessaire - tout le reste est laissé pour la position centrale. C'est aussi pour cela que le bouton de gauche prend moins d'espace que le bouton de droite, "Right" ayant un caractère de plus que "Left".

La dernière chose que vous remarquerez sûrement est la façon dont l'espace est divisé. Par exemple, le bouton du haut ne dispose pas de toute la largeur, parce que le bouton de gauche en prend une partie. Le DockPanel décide de qui est prioritaire en fonction de l'ordre de définition dans le code. Ici le bouton de gauche est prioritaire parce qu'il est défini avant dans le code. Heureusement, cela veut aussi dire que cela est très facile à modifier, comme nous pouvons le voir dans le prochain exemple où nous avons également uniformisé les hauteurs et les largeurs:

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

Les boutons du haut et du bas sont désormais prioritaires par rapport aux boutons gauche et droite, et ils ont tous 50 pixels de hauteur ou de largeur. Si vous modifiez la taille de la fenêtre, vous remarquerez que les hauteurs et largeurs sont fixes, sauf pour la partie centrale qui est automatiquement redimensionnée.

LastChildFill

Comme mentionné, le comportement par défaut du dernier enfant est de prendre tout l'espace disponible. Mais cela peut être désactivé en utilisant la propriété LastChildFill. Voici un exemple lorsque nous la désactivons; nous montrons également la possibilité d'amarrer plus d'un contrôle sur un même côté:

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

Dans cet exemple, nous plaçons deux contrôles à gauche et deux à droites, tout en désactivant la propriété LastChildFill. Cela laisse un espace vide au milieu, ce qui est parfois préférable.