DockPanel

The DockPanel class is primarily used in the top levels of the control hierarchy to lay out the top-level controls. It provides us with the ability to dock controls to various parts of the screen, for example, a menu docked at the top, a context menu on the left, a status bar at the bottom and our main View content control in the remainder of the screen:

This layout shown in the preceding diagram can be easily achieved with just the following XAML:

<DockPanel> 
  <DockPanel.Resources> 
    <Style TargetType="{x:Type TextBlock}"> 
      <Setter Property="HorizontalAlignment" Value="Center" /> 
      <Setter Property="VerticalAlignment" Value="Center" /> 
      <Setter Property="FontSize" Value="14" /> 
    </Style> 
    <Style TargetType="{x:Type Border}"> 
      <Setter Property="BorderBrush" Value="Black" /> 
      <Setter Property="BorderThickness" Value="1" /> 
    </Style> 
  </DockPanel.Resources> 
  <Border Padding="0,3" DockPanel.Dock="Top"> 
    <TextBlock Text="Menu Bar" /> 
  </Border> 
  <Border Padding="0,3" DockPanel.Dock="Bottom"> 
    <TextBlock Text="Status Bar" /> 
  </Border> 
  <Border Width="100" DockPanel.Dock="Left"> 
    <TextBlock Text="Context Menu" TextWrapping="Wrap" /> 
  </Border> 
  <Border> 
    <TextBlock Text="View" /> 
  </Border> 
</DockPanel> 

We specify where we want each element within the panel to be docked using the DockPanel.Dock Attached Property. We can specify the left, right, top, and bottom of the panel. The remaining space is normally filled by the last child that does not explicitly set one of the Dock property. However, if that is not the behavior that we want, then we can set the LastChildFill property to false.

The DockPanel will automatically resize itself to fit its content unless its dimensions are specified, either explicitly using the Width and Height properties, or implicitly by a parent panel. If it and its children both have dimensions specified for them, there is a chance that certain children will not be provided with enough space and not be displayed correctly, as the last child is the only child that can be resized by the DockPanel. It should also be noted that this panel does not overlap its child elements.

Also note that the order that the children are declared in will affect the space and position that they are each provided with. For example, if we wanted the menu bar to fill the top of the screen, the context menu to take the remaining left side, and the View and the status bar to take the remaining space, we could just declare the context menu before the status bar:

  ...
  <Border Padding="0,3" DockPanel.Dock="Top"> 
    <TextBlock Text="Menu Bar" /> 
  </Border> 
  <Border Width="100" DockPanel.Dock="Left"> 
    <TextBlock Text="Context Menu" TextWrapping="Wrap" /> 
  </Border> 
  <Border Padding="0,3" DockPanel.Dock="Bottom"> 
    <TextBlock Text="Status Bar" /> 
  </Border> 
  <Border> 
    <TextBlock Text="View" /> 
  </Border> 
  ...

This slight change would result in the following layout: