DockPanel.Dock="Right" is not working for single control on Maximized window?

Question

I am using DockPanel.Dock for docking controls at the specific place(i.e left/right). The problem is my controls are not docking according to the DockPanel.Dock position.

Below is the code for single control with DockPanel.Dock="Right"

    <DockPanel>

         <TextBlock
              Text            ="Left1"
              Margin          ="5"
              DockPanel.Dock  ="Left"
              Style           ="{StaticResource TextBlockStyle}"
              />

         <TextBlock
              Text            ="Left2"
              Margin          ="5"
              DockPanel.Dock  ="Left"
              Style           ="{StaticResource TextBlockStyle}"
              />

         <TextBlock
              Text            ="Right1"
              Margin          ="5"
              DockPanel.Dock  ="Right"
              Style           ="{StaticResource TextBlockStyle}"
              />

   </DockPanel>

code for multiple controls with DockPanel.Dock="Right"

    <DockPanel>

         <TextBlock
              Text            ="Left1"
              Margin          ="5"
              DockPanel.Dock  ="Left"
              Style           ="{StaticResource TextBlockStyle}"
              />

         <TextBlock
              Text            ="Left2"
              Margin          ="5"
              DockPanel.Dock  ="Left"
              Style           ="{StaticResource TextBlockStyle}"
              />

         <TextBlock
              Text            ="Right1"
              Margin          ="5"
              DockPanel.Dock  ="Right"
              Style           ="{StaticResource TextBlockStyle}"
              />

         <TextBlock
              Text            ="Right2"
              Margin          ="5"
              DockPanel.Dock  ="Right"
              Style           ="{StaticResource TextBlockStyle}"
              />

   </DockPanel>

Expecting Output:

Any idea or thought will be appreciated. Thanks in Advance

Answer 1

You should make use of the LastChildFill property:

<DockPanel LastChildFill="False">

    <TextBlock
      Text            ="Left1"
      Margin          ="5"
      DockPanel.Dock  ="Left"
      />

    <TextBlock
      Text            ="Left2"
      Margin          ="5"
      DockPanel.Dock  ="Left"
      />

    <StackPanel Orientation="Horizontal" DockPanel.Dock="Right">
        <TextBlock
      Text            ="Right1"
      Margin          ="5"
      />
    <TextBlock
      Text            ="Right2"
      Margin          ="5"
      />

  </StackPanel>


</DockPanel>

Answer 2

This is happening because the LastChildFill property of DockPanel is defaulted to true. For your desired output, set it to false.

As per MSDN:

If you set the LastChildFill property to true, which is the default setting, the last child element of a DockPanel always fills the remaining space, regardless of any other dock value that you set on the last child element. To dock a child element in another direction, you must set the LastChildFill property to false and must also specify an explicit dock direction for the last child element.

Sample UI and XAML with usage of DockPanel:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="DockPanel Sample">
  <DockPanel LastChildFill="True">
    <Border Height="25" Background="SkyBlue" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top">
      <TextBlock Foreground="Black">Dock = "Top"</TextBlock>
    </Border>
    <Border Height="25" Background="SkyBlue" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top">
      <TextBlock Foreground="Black">Dock = "Top"</TextBlock>
    </Border>
    <Border Height="25" Background="LemonChiffon" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Bottom">
      <TextBlock Foreground="Black">Dock = "Bottom"</TextBlock>
    </Border>
    <Border Width="200" Background="PaleGreen" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Left">
      <TextBlock Foreground="Black">Dock = "Left"</TextBlock>
    </Border>
    <Border Background="White" BorderBrush="Black" BorderThickness="1">
      <TextBlock Foreground="Black">This content will "Fill" the remaining space</TextBlock>
    </Border>
  </DockPanel>
</Page>

If you dont want above behaviour, set LastChildFill="False" in above XAML sample and watch the result.