WPF-Steuerelemente: Das DockPanel

Das DockPanel-Element ist eines der Steuerelemente, mit dem sich untergeordnete Steuerelemente ausrichten lassen. Das interessante an diesem Steuerelement ist, dass die enthaltenen Elemente jeweils an der angegebenen Seite des DockPanels angedockt werden. Damit lassen sich interessante Anordnungen erzielen. Welche das sind und wie Sie diese realisieren, erfahren Sie in diesem Artikel.

Grundlagen

Neben dem DockPanel gibt es noch einige weitere Elemente zum Anordnen der untergeordneten Elemente. Das bekannteste ist wohl das Grid-Element, das ja auch standardmäßig als einziges untergeordnetes Element in neuen Window– oder Page-Elementen angezeigt wird. Während sich mit dem Grid-Steuerelement ein Raster, bestehend aus Zeilen und Spalten, realisieren lässt, bietet das DockPanel ganz andere Möglichkeiten.

Sie können diesem beliebig viele Unterelemente zuweisen, für die Sie jeweils angeben, ob diese oben, unten, links oder rechts innerhalb des DockPanels angedockt werden sollen. Das angegebene Element nimmt dann, wenn es links oder rechts angeordnet wurde, jeweils die gesamte Höhe ein, und wenn es oben oder unten angeordnet wurde, die gesamte Breite.

Die Reihenfolge entscheidet dann darüber, welchem Element welcher Platz zufällt. Wie dies aussieht, zeigen wir anhand von Beispielen. Im ersten Fall haben wir vier Button-Elemente angeordnet, die über die Eigenschaft DockPanel.Dock mit den Werten Top, Left, Bottom und Right versehen wurden (siehe Beispielprojekt unter Beispiel #1) – siehe Listing 1.

<DockPanel>
     <Button DockPanel.Dock="Top" Content="Erstes Element, angedockt an TOP"></Button>
     <Button DockPanel.Dock="Left" Content="Zweites Element, 
angedockt an LEFT"></Button>
     <Button DockPanel.Dock="Bottom" Content="Drittes Element, angedockt an BOTTOM"></Button>
     <Button DockPanel.Dock="Right" Content="Viertes Element, angedockt an RIGHT"></Button>
</DockPanel>

Listing 1: Code für vier Elemente, die an den vier Seiten eines Fensters angedockt werden

Bild 1 zeigt, wie das Ergebnis im Fenster aussieht. Das erste Element landet oben und nimmt die komplette Breite ein. Das zweite Element landet links, erhält aber nur noch die Höhe, die das erste Element übrig lässt. Die folgenden Elemente führen dies fort, bis das vierte Element den verbleibenden Platz einnimmt. Das Verhalten des letzten Elements lässt sich übrigens durch das Attribut LastChildFill des DockPanel-Elements beeinflussen. Stellen Sie dieses auf den Wert False ein, nimmt das letzte Element nur den Platz ein, den der Inhalt erfordert (siehe Beispielprojekt unter Beispiel #2):

Beispiel für vier an den verschiedenen Seiten angedockte Steuerelemente

Bild 1: Beispiel für vier an den verschiedenen Seiten angedockte Steuerelemente

Das DockPanel-Element ist eines der Steuerelemente, mit dem sich untergeordnete Steuerelemente ausrichten lassen. Das interessante an diesem Steuerelement ist, dass die enthaltenen Elemente jeweils an der angegebenen Seite des DockPanels angedockt werden. Damit lassen sich interessante Anordnungen erzielen. Welche das sind und wie Sie diese realisieren, erfahren Sie in diesem Artikel.

Grundlagen

Neben dem DockPanel gibt es noch einige weitere Elemente zum Anordnen der untergeordneten Elemente. Das bekannteste ist wohl das Grid-Element, das ja auch standardmäßig als einziges untergeordnetes Element in neuen Window– oder Page-Elementen angezeigt wird. Während sich mit dem Grid-Steuerelement ein Raster, bestehend aus Zeilen und Spalten, realisieren lässt, bietet das DockPanel ganz andere Möglichkeiten.

Sie können diesem beliebig viele Unterelemente zuweisen, für die Sie jeweils angeben, ob diese oben, unten, links oder rechts innerhalb des DockPanels angedockt werden sollen. Das angegebene Element nimmt dann, wenn es links oder rechts angeordnet wurde, jeweils die gesamte Höhe ein, und wenn es oben oder unten angeordnet wurde, die gesamte Breite.

Die Reihenfolge entscheidet dann darüber, welchem Element welcher Platz zufällt. Wie dies aussieht, zeigen wir anhand von Beispielen. Im ersten Fall haben wir vier Button-Elemente angeordnet, die über die Eigenschaft DockPanel.Dock mit den Werten Top, Left, Bottom und Right versehen wurden (siehe Beispielprojekt unter Beispiel #1) – siehe Listing 1.

<DockPanel>
     <Button DockPanel.Dock="Top" Content="Erstes Element, angedockt an TOP"></Button>
     <Button DockPanel.Dock="Left" Content="Zweites Element, 
angedockt an LEFT"></Button>
     <Button DockPanel.Dock="Bottom" Content="Drittes Element, angedockt an BOTTOM"></Button>
     <Button DockPanel.Dock="Right" Content="Viertes Element, angedockt an RIGHT"></Button>
</DockPanel>

Listing 1: Code für vier Elemente, die an den vier Seiten eines Fensters angedockt werden

Bild 1 zeigt, wie das Ergebnis im Fenster aussieht. Das erste Element landet oben und nimmt die komplette Breite ein. Das zweite Element landet links, erhält aber nur noch die Höhe, die das erste Element übrig lässt. Die folgenden Elemente führen dies fort, bis das vierte Element den verbleibenden Platz einnimmt. Das Verhalten des letzten Elements lässt sich übrigens durch das Attribut LastChildFill des DockPanel-Elements beeinflussen. Stellen Sie dieses auf den Wert False ein, nimmt das letzte Element nur den Platz ein, den der Inhalt erfordert (siehe Beispielprojekt unter Beispiel #2):

Beispiel für vier an den verschiedenen Seiten angedockte Steuerelemente

Bild 1: Beispiel für vier an den verschiedenen Seiten angedockte Steuerelemente

Access, SQL und Cloud Automation

Unser exklusives Angebot für Dich!

VB-Entwickler
12,50 € im Monat*

(Gilt für den Abschluss eines Jahres-Abonnements.)

Hier geht’s weiter →

Die ersten 4 Wochen kostenlos testen – voller Zugriff auf alle Artikel, vollständigen Code und Beispieldatenbanken. Kein Risiko: Wenn es nicht passt, kündigst Du einfach innerhalb der ersten vier Wochen.

PayPal VISA Mastercard SEPA
Kostenlos & unverbindlich

Oder hast Du eine konkrete Frage zu Deiner eigenen Access-Anwendung?

Vielleicht stellt Deine Anwendung Dich vor eine Herausforderung, zu der Du bisher keine Lösung findest. Schlechte Performance, kein ausreichender Zugriffsschutz, Du bist unsicher über Dein Datenmodell oder Dein Code liefert unerklärliche Fehler?

In unserem kostenlosen Access-Audit schaut sich André Minhorst persönlich gemeinsam mit Dir Deine Lösung per Zoom an – und zeigt Dir, wo Datenmodell, VBA-Code, Ergonomie und Sicherheit Optimierungspotenzial bieten.

Jetzt kostenloses Access-Audit anfordern →