WPF: How to make HeaderedContentControl.Content fit height?

Question

I am having a form in maximize mode, within the form contains a HeaderContentControl. Within the HeaderContentControl.Content, i added a DockLayout, but the problem is that DockLayout is not fit to the form height.

How can I resolve this problem? Here's the xaml file:

<Window x:Class="Prototype.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Prototype"
    Title="XXX"
    x:Name="frmMain"
    Width="581" Height="340" ResizeMode="CanMinimize" 
    WindowStartupLocation="CenterScreen" WindowState="Maximized" 
    WindowStyle="None" IsHitTestVisible="True" Topmost="False"  AllowsTransparency="True" Background="Transparent" Loaded="frmMain_Loaded">
    <!-- Copyright Microsoft Corporation. All Rights Reserved. -->
    <Window.Resources>
        <Style TargetType="{x:Type local:MainWindow}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type local:MainWindow}">

                            <Border Background="#FF333333"
                BorderBrush="#FFCCCCCC"
                BorderThickness="1"
                CornerRadius="5"
                Padding='2'>
                                <HeaderedContentControl>
                                    <HeaderedContentControl.Header>
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="19*" />  
                                            </Grid.RowDefinitions>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="212*" />
                                                <ColumnDefinition Width="84*" />
                                                <ColumnDefinition Width='Auto' />
                                            </Grid.ColumnDefinitions>

                                            <Rectangle Grid.ColumnSpan="3" Fill="#FF505050" />

                                            <TextBlock FontSize="13"
                                                FontWeight='Bold'
                                                VerticalAlignment='Center'
                                                Margin="6,5,3,6"
                                                Text="XXX" Grid.ColumnSpan="2" OpacityMask="#FFCECECE" Foreground="#FFF3F3F3" Height="20" />
                                            <Button x:Name='WindowCloseButton'
                                                    Grid.Column="2"
                                                    Width="17"
                                                    Height="17"
                                                    Cursor='Hand'
                                                    Margin="8,6,6,8"
                                                    VerticalAlignment='Center'
                                                    Click='WindowCloseButton_Click' FontFamily="Lucida Console">
                                                <Button.Background>
                                                    <ImageBrush />
                                                </Button.Background>

                                                <Image Source="/Prototype;component/Resource/window-close.png"></Image>
                                            </Button>
                                        </Grid>
                                    </HeaderedContentControl.Header>

                                    <!-- New Content Area -->
                                    <HeaderedContentControl.Content>
                                        <ContentPresenter Content="{TemplateBinding Content}" />
                                    </HeaderedContentControl.Content>
                                </HeaderedContentControl>
                            </Border>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="{x:Type MenuItem}">
            <Setter Property="Foreground" Value="#FF7B7B7B"></Setter>

            <Style.Triggers>
                <Trigger Property="IsHighlighted" Value="True">
                    <Setter Property="Foreground" Value="#333333"></Setter>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Foreground" Value="#333333"></Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>


    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="23" />
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Menu Height="23" Name="menuContext" Margin="0,0" Background="#FF7B7B7B" Foreground="White" Grid.Row="0">
            <MenuItem Header="File" Background="#FF7B7B7B" Foreground="White">
                <MenuItem Header="Open" Margin="0,1"/>
                <MenuItem Header="Save" Margin="0,1"/>
                <MenuItem Header="Exit" Margin="0,1" UseLayoutRounding="True" />
            </MenuItem>
        </Menu>
        <Grid Grid.Row="1" ShowGridLines="True">
            <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>
        </Grid>
    </Grid>

</Window>

Answer 1

Problem here is HeaderedContentControl uses StackPanel internally to layout header and content.

To fix that, use a Grid instead or re-template HeaderedContentControl to use Grid.

Example:

<ControlTemplate TargetType="HeaderedContentControl">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <ContentControl Content="{TemplateBinding Header}" Grid.Row="0" />
        <ContentControl Content="{TemplateBinding Content}" Grid.Row="1" />
    </Grid>
</ControlTemplate>