How to: Create a DockPanel in C# (WPF)

Question

How to: Create a DockPanel in C# (WPF)

I am trying to create a DockPanel. The DockPanel looks fine so far. The only problem is, that it does not fit like I want it to - please see the following screenshot:

I want "Administration" to be as high (Height) as its content and let's say there are 10 elements in the DataGrid (white area below). Now I want it to be fixed in the bottom left corner. Now, when I make the window larger, I want "Geschäftskontakte" to fill the rest free area that is left. Therefore, I do have to following:

<!-- Left / Right -->
    <DockPanel DockPanel.Dock="Left" Name="dockPanelModule" Width="150">
        <Label DockPanel.Dock="Top" Content="Geschäftskontakte" Name="labelModule">
        </Label>
        <DataGrid DockPanel.Dock="Top" Name="dataGridNavigation" Height="200" HeadersVisibility="None">
            <!-- ... -->
        </DataGrid>
        <Label DockPanel.Dock="Top" Content="Administration" Name="labelAdministration">
        </Label>
        <DataGrid DockPanel.Dock="Top" Name="dataGridAdministration" HeadersVisibility="None">
            <!-- ... -->
        </DataGrid>
    </DockPanel>

I have removed unimportant information like Background.

Thanks in advance for your help!

Answer 1

The WPF DockPanel doesn't have a Dock.Fill option, but it does have a LastChildFillProperty (which is true by default), so you'd need to add the element you want to grow to Fill the space last. With all of your items set to DockPanel.Dock=Top, this would put the items out of order, but by grouping the controls with panels, and specifying DockPanel.Dock=Bottom for the bottom group, you can get the desired result:

        <DockPanel DockPanel.Dock="Left" Name="dockPanelModule" Width="150" >

        <StackPanel DockPanel.Dock="Bottom">
            <Label Content="Administration" Name="labelAdministration">
            </Label>
            <DataGrid DockPanel.Dock="Bottom" Name="dataGridAdministration" HeadersVisibility="None" MinHeight="30" >
            </DataGrid>

        </StackPanel>
        <DockPanel DockPanel.Dock="Top">
            <Label DockPanel.Dock="Top" Content="Geschäftskontakte" Name="labelModule">
            </Label>
            <DataGrid DockPanel.Dock="Bottom" Name="dataGridNavigation"  HeadersVisibility="None" MinHeight="75">
                <!-- ... -->
            </DataGrid>

        </DockPanel>                
    </DockPanel>

Answer 2

The order that children are added to the DockPanel is important.

From the MSDN DockPanel documentation:

Note: The position of child elements of a DockPanel on the screen is determined by the Dock property of the respective child elements and the relative order of those child elements under the DockPanel. Therefore, a set of child elements with the same Dock property values can be positioned differently on the screen depending on the order of these children under the DockPanel. Child ordering effects positioning because the DockPanel iterates through its child elements in order, setting the position of each element depending on remaining space.