18.6 DockPanel 

Viele Fenster weisen ein grundlegendes Layout auf. Denken Sie nur beispielsweise an den Windows-Explorer. Für solche Fenster benutzen Sie am besten einen Container vom Typ DockPanel. Dieser Container erlaubt es Ihnen festzulegen, an welcher Seite die enthaltenen Controls ausgerichtet werden sollen. Die Komponenten können dabei links, rechts, oben oder unten am DockPanel positioniert werden. Die Ausrichtung wird bei jedem Control durch die Attached Property DockPanel.Dock festgelegt.
<DockPanel> <Button DockPanel.Dock="Top">Button1</Button> <Button DockPanel.Dock="Left">Button2</Button> <Button DockPanel.Dock="Left">Button3</Button> <Button DockPanel.Dock="Right">Button4</Button> <Button DockPanel.Dock="Bottom">Button5</Button> <Button DockPanel.Dock="Bottom">Button6</Button> </DockPanel>
Die Reihenfolge der Controls im XAML-Code bestimmt die Darstellung im Fenster. Es gilt die Regel, dass die Komponente, die zuletzt eingefügt worden ist, standardmäßig den verbleibenden Rest des Containers in Anspruch nimmt. Dabei spielt es keine Rolle, ob Sie eine Dockposition angegeben haben oder nicht. So baut sich das Layout der Form Element für Element auf. Elemente gleicher Ausrichtung werden dabei horizontal oder vertikal gestapelt, wie im Beispielcode Button2 und Button3.
Abbildung 18.13 Controls in einem DockPanel
Das Verhalten, dass das letzte Element den verbleibenden Rest des Containers ausfüllt, können Sie ändern, indem Sie das Attribut LastChildFill auf false setzen. Die Vorgabe ist true. Wie danach das letzte Element dargestellt wird, hängt davon ab, ob das letzte Element mit DockPanel.Dock eine explizite Ausrichtung erfährt oder nicht. Verzichten Sie darauf, wird das Element an der linken Seite des verbleibenden Freiraums angedockt. Ansonsten folgt es der Einstellung von DockPanel.Dock. In jedem Fall verbleibt eine freie Fläche im Container.
<DockPanel LastChildFill="False"> <Button DockPanel.Dock="Top">Button1</Button> <Button DockPanel.Dock="Left">Button2</Button> <Button DockPanel.Dock="Left">Button3</Button> <Button DockPanel.Dock="Right">Button4</Button> <Button DockPanel.Dock="Bottom">Button5</Button> <Button DockPanel.Dock="Bottom">Button6</Button> </DockPanel>
Abbildung 18.14 Auswirkung der Einstellung LastChildFill=«false«
Die im DockPanel enthaltenen Elemente müssen nicht unbedingt ganze Bereiche ausfüllen. Sie können über die Eigenschaften Width und Height die Darstellungsgröße festlegen:
<DockPanel LastChildFill="False"> <Button DockPanel.Dock="Top" Width="80">Button1</Button> <Button DockPanel.Dock="Left" Width="20">Button2</Button> <Button DockPanel.Dock="Left" Width="70">Button3</Button> <Button DockPanel.Dock="Right">Button4</Button> <Button DockPanel.Dock="Bottom" Width="30">Button5</Button> <Button DockPanel.Dock="Bottom">Button6</Button> </DockPanel>
Abbildung 18.15 Darstellungsgröße im Dockpanel