How to: Change Dock Properties

The following example shows how to change the value of the DockPanel.Dock attached property for elements contained in a DockPanel. This example also demonstrates the functionality of the different Dock values.

The example declares two Rectangle elements and assigns each element a Name. Two rows of Button elements represent the Dock enumeration values for each Rectangle. The LightCoral colored Button elements represent the same-colored Rectangle. The LightSkyBlue colored Button elements represent the same-colored Rectangle. Clicking one of these buttons invokes an event handler that changes the DockPanel.Dock position. In addition, the text contained in the TextBlock changes to show the new docking direction for the Rectangle.

<StackPanel Orientation="Horizontal" DockPanel.Dock="Top" Margin="0,0,0,10">
  <Button Click="OnClick1" Background="LightCoral">Dock = "Left"</Button>
  <Button Click="OnClick2" Background="LightCoral">Dock = "Right"</Button>
  <Button Click="OnClick3" Background="LightCoral">Dock = "Top"</Button>
  <Button Click="OnClick4" Background="LightCoral">Dock = "Bottom"</Button>

<TextBlock DockPanel.Dock="Top" Name="Txt2">The Dock property of the LightSkyBlue Rectangle is set to Right</TextBlock>

<StackPanel Orientation="Horizontal" DockPanel.Dock="Top" Margin="0,0,0,10">
  <Button Click="OnClick5" Background="LightSkyBlue" Foreground="White">Dock = "Left"</Button>
  <Button Click="OnClick6" Background="LightSkyBlue" Foreground="White">Dock = "Right"</Button>
  <Button Click="OnClick7" Background="LightSkyBlue" Foreground="White">Dock = "Top"</Button>
  <Button Click="OnClick8" Background="LightSkyBlue" Foreground="White">Dock = "Bottom"</Button>

<TextBlock DockPanel.Dock="Top" Name="Txt3">The LastChildFill property is set to True (default).</TextBlock>
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top" Margin="0,0,0,10">
  <Button Click="OnClick9" Background="White">LastChildDock="True"</Button>
  <Button Click="OnClick10" Background="White">LastChildDock="False"</Button>

<Border Background="LightGoldenRodYellow" BorderBrush="Black" BorderThickness="1">
  <DockPanel Name="myDP">
    <Rectangle Name="rect1" MinWidth="200" MinHeight="200" Stroke="Black" Fill="LightCoral" />
    <Rectangle Name="rect2" MinWidth="200" MinHeight="200" Stroke="Black" Fill="LightSkyBlue" />

The events that are defined in the preceding Extensible Application Markup Language (XAML) file are handled in a code-behind file. The event handlers set the DockPanel.Dock attached property value for a particular element using code at run-time. One such event handler is shown below.

private void OnClick1(object sender, RoutedEventArgs e)
    DockPanel.SetDock(rect1, Dock.Left);
    Txt1.Text = "The Dock Property of the LightCoral Rectangle is set to Left";