Two dockpanels inside another dockpanel

Question

How to get these dockpanels right ?

<DockPanel Grid.Row="1" LastChildFill="True" HorizontalAlignment="Stretch">
    <DockPanel Width="400" LastChildFill="False" HorizontalAlignment="Left">
            <DockPanel>
                <TextBlock Width="400" />
            </DockPanel>
            <DockPanel  Height="35" DockPanel.Dock="Bottom" LastChildFill="False">
                <Button x:Name="btnRefresh" Content="Refersh" />
            </DockPanel>
    </DockPanel>

The DockPanel with the TextBlock spans over the DockPanel that is docked at the bottom, I want it to fit right up to it. Any ideas?

Ok, it turns out: the panel docked at the bottom must preceed the dockpanel above it in the xaml declaration. LastChildFill="True" applies to the control that is declared last in the code.

<DockPanel Grid.Row="1" LastChildFill="True" HorizontalAlignment="Stretch">
    <DockPanel Width="400" LastChildFill="False" HorizontalAlignment="Left">
        <DockPanel  Height="35" DockPanel.Dock="Bottom" LastChildFill="False">
            <Button x:Name="btnRefresh" Content="Refersh" />
        </DockPanel>
        <DockPanel>
            <TextBlock Width="400" />
        </DockPanel>
    </DockPanel>

Sheridan · Accepted Answer · 2013-10-08T16:25:47.507

4

Please refer to the DockPanel Class page at MSDN which has all the help that you need. The XAML example from the linked page:

<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="Blue" BorderBrush="Black" BorderThickness="1" 
        DockPanel.Dock="Top">
        <TextBlock Foreground="White">Dock = "Top"</TextBlock>
    </Border>
    <Border Height="25" Background="Yellow" 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 will fill the remaining space</TextBlock>
    </Border>
</DockPanel>

Note the use of the DockPanel.Dock attached properties.

enter image description here

edited Oct 08 '13 at 16:25

answered Oct 08 '13 at 15:47

Sheridan

68,826
24
143
183

+1 Well, I looked at it *today* and am grateful for the exhibit! What I don't get is how the system icon got disappeared... – Gayot Fow Oct 08 '13 at 16:33
Ooops... I have a WPF application that I use to test answers in, such as this one, and it still has the code in it that I used to answer [another question](http://stackoverflow.com/questions/18580430/hide-the-icon-from-a-wpf-window) which was asking how to remove the `Icon` from a WPF `Window`. – Sheridan Oct 08 '13 at 21:48
NIce example, for me the lesson learned is that LastChildFill="True" applies to the last control in the declaration, so the panel that is docked at the bottom must preceed the others in xaml. – Gerard Oct 09 '13 at 11:02
Yeah, it's a strange concept, but it makes a bit more sense when you know about it. :) – Sheridan Oct 09 '13 at 11:07

score 2 · Answer 2 · answered Oct 08 '13 at 15:46

2

<DockPanel Grid.Row="1" LastChildFill="True" HorizontalAlignment="Stretch">
   <DockPanel Width="400" LastChildFill="False" HorizontalAlignment="Left">
       <Button x:Name="btnRefresh" Content="Refersh" 
               Height="35" DockPanel.Dock="Bottom" />

       <TextBlock Width="400" />
   </DockPanel>

   <!-- Other UI Elements here? -->

<DockPanel>

answered Oct 08 '13 at 15:46

Federico Berasategui

43,562
11
100
154

Well, your solution is not a stack of two dockpanels, but the fitting is correct. I discovered why that is: your controls are in different order, so the order is important. – Gerard Oct 08 '13 at 15:55
@gerard you don't need a `DockPanel` or any other type of panel with a single child. It doesn't make sense. Panels are intended to have multiple children so that they can lay them out correctly. – Federico Berasategui Oct 08 '13 at 15:57
the panels will get mulitple children, it was just an example. – Gerard Oct 08 '13 at 15:59

Two dockpanels inside another dockpanel

2 Answers2

Linked