Using the DockPanel layout panel

A DockPanel layout panel in a Windows Presentation Foundation (WPF) project provides a layout area within which you can arrange child objects around the edge of the screen based on compass direction: North, South, East, and West. The DockPanel was historically used for root layout in other forms packages, because it allows panels to be docked around the edge of the screen.

When you add child objects to a DockPanel, the objects are docked to the left part of the panel by default. The last child object that you add can fill the remaining space in the panel if the LastChildFill property for that object is set to True. By default, this property is set to False. When objects fill up the panel, they are then clipped or hidden by the parent layout container.

If you drag a child object of a DockPanel on the artboard, notice that a large four-way pointer shows the directions that you can dock the object (see image below). You can use this four-way pointer as an alternative way to change dock orientation. Simply drag the object over the direction arrow that you want. Notice that the direction arrow that you select becomes highlighted, to indicate that you can drop the object to dock it in that direction.

Add a DockPanel to a document by selecting DockPanel  from the Assets panel or from the layout container button in the Tools panel, and then dragging with the pointer on the artboard. The following XAML code is added to your project:

<Grid x:Name="LayoutRoot">
   <DockPanel HorizontalAlignment="Left" Height="100" LastChildFill="False" VerticalAlignment="Top" Width="100"/>
</Grid>

For more about how to work with DockPanel objects, see the related topics, Change the docking order and Change the dock orientation.