Das DockPanel Steuerelement

Das DockPanel macht es einfach, Inhalte in alle vier Richtungen (oben, unten, links und rechts) anzuheften. Dies macht es zu einer guten Wahl in vielen Situationen, in denen Sie das Fenster in bestimmte Bereiche aufteilen möchten, vor allem weil das letzte Element innerhalb des DockPanels, sofern diese Funktion nicht speziell deaktiviert ist, automatisch den Rest des Bereichs (Mitte) ausfüllt.

Wie wir bei vielen anderen Panels in WPF gesehen haben, fangen Sie an, die Möglichkeiten des Panels zu nutzen, indem Sie eine angehängte Eigenschaft davon verwenden, in diesem Fall die Eigenschaft DockPanel.Dock, die entscheidet, in welche Richtung Sie die Kind-Steuerelemente andocken möchten. Wenn Sie dieses nicht verwenden, wird das erste Steuerelement links angedockt, wobei das letzte den verbleibenden Platz einnimmt. Hier ist ein Beispiel, wie Sie es verwenden:

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

Wie bereits erwähnt, weisen wir dem letzten Kind keine Dockposition zu, da es automatisch zentriert wird und somit den verbleibenden Platz ausfüllt. Sie werden auch feststellen, dass die Steuerelemente um die Mitte herum nur so viel Platz beanspruchen, wie sie benötigen - alles andere bleibt für die Mittelposition übrig. Das ist auch der Grund, warum der rechte Button etwas mehr Platz einnimmt als der linke Button - das zusätzliche Zeichen im Text benötigt einfach mehr Pixel.

Die letzte Sache, die Ihnen auffallen wird, ist, wie der Raum geteilt wird. Zum Beispiel bekommt der Top-Button nicht den gesamten oberen Bereich, weil der Left-Button einen Teil davon einnimmt. Das DockPanel entscheidet, welches Steuerelement zu bevorzugen ist, indem es ihre Position im Markup betrachtet. In diesem Fall hat der linke Button Vorrang, da er im Markup an erster Stelle steht. Zum Glück bedeutet das, dass es sehr einfach zu ändern ist, wie wir im nächsten Beispiel sehen werden, wo wir auch den Raum ein wenig ausgeglichen haben, indem wir den Kinder-Steuerelementen Breiten/Höhen zuweisen:

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

Die oberen und unteren Steuerelemente haben nun Vorrang vor den linken und rechten Steuerelementen und nehmen 50 Pixel in Höhe oder Breite ein. Wenn Sie das Fenster größer oder kleiner machen, werden Sie auch sehen, dass diese statische Breite/Höhe immer gleich bleibt - nur der mittlere Bereich vergrößert oder verkleinert sich, wenn Sie die Größe des Fensters ändern.

LastChildFill

Wie bereits erwähnt, ist es das Standardverhalten, dass das letzte Kind des DockPanels den Rest des Platzes einnimmt, aber dies kann mit dem LastChildFill deaktiviert werden. Hier ein Beispiel, wo wir es deaktivieren, und gleichzeitig zeigen wir die Fähigkeit, mehr als ein Steuerelement an die gleiche Seite anzudocken:

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

In diesem Beispiel docken wir zwei Controls links und zwei Controls rechts an und deaktivieren gleichzeitig die LastChildFill-Eigenschaft. Dies lässt uns in der Mitte freien Raum, was in manchen Fällen bevorzugt ist.