Search code examples
wpfdockpanel

WPF: Two controls in a DockPanel docked "Top" and "Bottom" still leaves space at the bottom

I have the simple WPF UserControl as can be seen below.

I do not understand why this code doesn't pin the green Grid to the bottom of the DockPanel:

enter image description here

If I add something in between the two blocks, then the green is pinned to the bottom:

enter image description here

Here is the simple code:

<UserControl
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:tWorks.Alfa.OperatorClient.UserControls.Vehicles"
         xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol" x:Class="tWorks.Alfa.OperatorClient.UserControls.Vehicles.Misc_Vehicles_GpsTrackBarContext"
         mc:Ignorable="d" 
         d:DesignHeight="260" d:DesignWidth="450">
<DockPanel>
    <Grid DockPanel.Dock="Top" Height="50" Background="Red"></Grid>
    <Grid DockPanel.Dock="Bottom" Height="50" Background="Green"></Grid>
    <Grid Height="50" Background="Blue"></Grid>
</DockPanel>
</UserControl>
Solution

  • You need to prevent the last child from stretching:

    <DockPanel LastChildFill="False"/>

    Otherwise the DockPanel.Dock="Bottom" will be ignored for the last child and it is instead placed in the whole remaining area. There it will be aligned center because its Height="50".