Windows Presentation Foundation comes with DockPanel a really versatile control allowing you to architect and create layout areas within which you can position and organize child elements.
When building your user interface, often you will want to ensure that specific controls and parts of your UI are always docked on the top, left, bottom, or right side. For example, the command bar area is usually docked at the top and the status bar is usually docked at the very bottom of your application.
A good practice is to use the DockPanel control as a root control and organize other panel and layout types of controls within it. Of course, you can always think about employing some different approaches and using controls such as Grid, but the DockPanel control brings you docking capability right out of the box.
In this recipe, I will show you some basic principles that you should be aware of when thinking about using the DockPanel control.
Start your Expression Blend 4 and then select New project... From the dialog that appears select WPF and then WPF Application. Make sure that Language is set to C# and Version is 4.0. At the end hit OK.
Note
Apart from WPF, DockPanel is available as a Silverlight control as well. In order to be able to use it, you need to have Silverlight Toolkit installed. The introductory part of this book contains all the information you need to know about how to obtain Silverlight Toolkits and use controls contained in it.
Once your new WPF project has been created you should notice that under the Objects and Timeline pane, Window and LayoutRoot grid controls are visible.
1. Right-click on LayoutRoot and in the pop-up menu click on Change Layout Type | DockPanel. This is the fastest way for us to use DockPanel as our root control. Of course, another possibility is to click on Asset Library located on the toolbox and then select and draw DockPanel as control.
2. Click on LayoutRoot to select it and under the Properties tab, within the Layout section make sure that the LastChildFill property is set to false (unchecked).
Now, let's go and add several rectangles on our LayoutRoot so that we can understand basic layout principles.
3. Select Rectangle from the toolbox and draw it onto your LayoutRoot. With the first rectangle selected, under the Properties panel, locate the Layout section and from the Dock drop-down list select Top. Set Width to Auto and Height to 55.
4. Now draw another rectangle. Instead of selecting and typing in values, we can set the dock position in a different way. Select Rectangle and drag it towards the top. You will notice a large four-way cursor showing you directions for possible docking locations of your object. Dock this second Rectangle at the bottom.
 |
6. Repeat this procedure for two more rectangles, but align them to the left and right side respectively. Set Height to Auto for both of them. For the left docked rectangle set the width to 200, and for the right docked rectangle, set the width to 170. Set different fill colors for each rectangle so that they are easier to notice and recognize.
7. Press F5 and start your application. It should look similar to the one in the following screenshot:
 |
8. From the toolbox, select and draw the Grid control on the LayoutRoot control. Under Properties and under Brushes, select any color for its Background property. The purpose of this color selection is only to make our Grid control a bit more distinctive.
9. Now select the LayoutRoot element (the easiest way to do this is to select it under the Objects and Timeline panel just by clicking on it) and under the Properties pane, locate a property called LastChildFill, and make sure it is checked.
 |
10. Select the newly added Grid control and set its Height and Width properties to Auto.
11. Press F5 and you should get a layout that looks close to the one in the following screenshot:
 |
The first thing we did after starting a new project was change the layout type. The default layout type is grid, but we wanted to use DockPanel so that we could explore its behavior.
DockPanel enables us to dock specific child elements. In our example, we have added several rectangles and set their Dock property. It was obvious that we could dock our objects in two different ways by manually setting the Dock property within the Properties pane or by simply dragging child objects over a large four-way cursor.
We have set specific heights and widths for child objects, but please take into account that in order to achieve that your docked control will scale appropriately, you need to set Auto for its Height or Width properties, depending on their docking direction.
At the very beginning of our recipe, we have set the LastChildFill property to false (unchecked it). the idea behind the LastChildFill property is to enable the last child element added to DockPanel to fill the remaining space. We achieved exactly that when we added Grid control and set the LastChildFill to true (checked it).
At the very beginning of our recipe, we have set the LastChildFill property to false (unchecked it). the idea behind the LastChildFill property is to enable the last child element added to DockPanel to fill the remaining space. We achieved exactly that when we added Grid control and set the LastChildFill to true (checked it).
So just to summarize: DockPanel arranges its child elements so that they fill a particular edge of the panel. What happens if you set up multiple child elements to have the same docking direction? They will simply stack up against that edge in order.
Once you have added child elements to your DockPanel you might want to change their order. That procedure is fairly simple.
1. Make your DockPanel active; the easiest way to achieve that is by double-clicking on it or selecting it under Objects and Timeline.
2. Click the child element and simply drag-and-drop it on the desired position (you are not dragging-and-dropping child elements on the artboard). Now you are dealing with them within the Objects and Timeline pane. Note that by doing this you are not changing the docking orientation (I will explain how to do that in next chapter); you are changing only the z-order. It is also sometimes called stack order.
Try experimenting with this and you will notice that the actual docking order is pretty important when it comes to the overall UI layout. The reason for that is that when elements fill up the panel (and that usually happens when we set their heights and widths to Auto), some parts might be cut off depending on the screen and child element size.
Sometimes you will face situations where you want to change the docking orientation for specific child elements after you have already set them. You can do that by following these instructions:
1. Make your DockPanel active: the easiest way to achieve that is by double-clicking it or selecting it under Objects and Timeline.
2. Click the child element and simply drag-and-drop it on the desired docking position on your artboard. Once you start dragging elements you will notice a large four-way cursor showing you docking directions. Now you only need to drag the element over the direction arrow you want. You will notice that the direction arrow that you select is highlighted indicating the docking direction.
Another way of changing the docking orientation is to select child element and under the Layout section in the Properties pane, select Top, Right, Bottom, or Left from the Dock drop-down list.
I will say it bluntly I am not a big fan of the DockPanel control. Although it is a great and simple-to-use control that enables you to create a basic layout for your UI, I will always prefer the Grid control as my control of choice when it comes to layouts. The Grid control is slightly more complicated, but it is more flexible as well. Anything you can do with DockPanel can be done with the Grid control, and then some.
Of course, DockPanel gets its credit when we talk about simplicity, and really, if your basic UI structure is really simple and you need to get things done in a fast and simple manner, consider using the DockPanel instead of Grid. Use Grid and other controls within DockPanel, work on their docking positions, and you will probably be able to create the UI you were looking for. If that doesn't work, you can always rely on Grid the most powerful of all WPF or Silverlight layout controls.