DockPanel is useful for describing the overall layout of a simple user interface. You can carve up the basic structure of your window using a DockPanel, and then use the other panels to manage the details.
A DockPanel arranges each child element so that it fills a particular edge of the panel. If multiple children are docked to the same edge, they simply stack up against that edge in order. By default, the final child fills any remaining space not occupied by controls docked to the panel's edges.
Example 3-4 shows a simple DockPanel-based layout. Five buttons have been added to illustrate each option. Notice that four of them have a DockPanel.Dock attribute applied. This property is defined by DockPanel to allow elements inside a DockPanel to specify their position. DockPanel.Dock is an attached property (as described in the upcoming sidebar, "Attached Properties and Layout").
Example 3-4. Simple DockPanel layout
<Button DockPanel.Dock="Top">Top</Button> <Button DockPanel.Dock="Bottom">Bottom</Button> <Button DockPanel.Dock="Left">Left</Button> <Button DockPanel.Dock="Right">Right</Button> <Button>Fill</Button> </DockPanel>
Most WPF panels allow child elements to specify their layout requirements. For example, a child of a DockPanel needs to be able to specify to which edge it would like to dock. The obvious solution would be for a base class such as FrameworkElement to define a Dock property—all WPF user interface elements derive from FrameworkElement, so this would enable anything to specify its dock position. However, DockPanel is not the only panel type, so we would need to add properties for the benefit of other panels, too. This would add a lot of clutter. Worse, it would also be inflexible—what if you want to design a custom panel that implements some new layout mechanism? It might need to define new attributes for its children to use.
Attached properties solve this problem. They allow one element to define properties that can be "attached" to some other element. DockPanel defines a Dock property that can be attached to any child. In XAML, the dotted attribute syntax (DockPanel.Dock) signifies that an attached property is being used. Example 3-4 uses this technique. See Appendix A for more detailed information about XAML and attached properties.
Figure 3-5 shows how the UI built in Example 3-4 looks on-screen. Notice how the Top and Bottom buttons have filled the entire top and bottom edges of the window, and yet the Left and Right buttons do not fill their edges—the Top and Bottom buttons have taken control of the corners. This is because Top and Bottom were added to the panel first.
Figure 3-5. Simple DockPanel layout
If you swapped these over so that the Left and Right buttons came first in the markup, as shown in Example 3-5, they would fill their whole edges, including the corners, leaving the Top and Bottom buttons with just the remaining space. Figure 3-6 shows the results.
Example 3-5. Docking Left and Right before Top and Bottom
<DockPanel> <Button DockPanel.Dock="Left">Left</Button> <Button DockPanel.Dock="Right">Right</Button> <Button DockPanel.Dock="Top">Top</Button> <Button DockPanel.Dock="Bottom">Bottom</Button> <Button>Fill</Button> </DockPanel>
Figure 3-6. DockPanel layout, with Left and Right docked first
Elements never overlap in a DockPanel, so each successive child only gets to use space not already used by the previous children. By default, the final child takes all of the remaining space, but if you would prefer to leave a blank space in the middle, you can set the LastChildFill attribute of the DockPanel to False. (It defaults to True.) The final child will dock to the left by default, leaving the center empty.
For items docked to the top or bottom, DockPanel sets the width to fill the space available, but for the height, it sizes to content—as described in the earlier sidebar. Likewise, items docked to the left or right have their heights fixed to fill the available space, but size to content horizontally. In Figures 3-5 and 3-6, the buttons at the top and bottom are just tall enough to contain their text. Likewise, the buttons docked to the left and right are just wide enough to hold their text. If we put a lot more text into one of the buttons, it will try to expand in order to make the text fit. We can see in Figure 3-7 that the DockPanel is letting the button be exactly as wide as it wants to be.
The DockPanel is good for creating the top-level structure of a basic user interface. For example, you could use it to position a menu and a toolbar at the top of the window, with other content filling the remaining space. However, if you have lots of controls to arrange, it can be helpful to have table-like layout functionality. For this, we turn to the powerful Grid panel.
Figure 3-7. DockPanel layout, with an unusually wide button
Was this article helpful?
What you need to know about… Project Management Made Easy! Project management consists of more than just a large building project and can encompass small projects as well. No matter what the size of your project, you need to have some sort of project management. How you manage your project has everything to do with its outcome.