[SOLVED] How to have a Tab control fill the center of a DockPanel in WPF

How to have a Tab control fill the center of a DockPanel in WPF

I have a WPF Window with a DockPanel that contains a Menu, a TabControl, and a Status Bar. I can get the Menu to dock to the top and the Status Bar to dock to the bottom, but I can't get the Tab control to fill the area between those two controls.

<Window x:Class="MediaCatalog.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:MediaCatalog"
    mc:Ignorable="d"
    Title="Window1" Height="450" Width="800">
<DockPanel LastChildFill="False">
    <Menu Width="Auto" VerticalAlignment="Top" HorizontalAlignment="Left" 
                        DockPanel.Dock="Top">
    </Menu>
    <TabControl DockPanel.Dock="Top" Margin="0,0,0,0" 
                              BorderThickness="1,1,1,1" Height="291">
    </TabControl>
    <StatusBar DockPanel.Dock="Bottom" Height="22">
        <StatusBar/>
    </StatusBar>
</DockPanel>

Solution

The last element will fill the DockPanel unless you set LastChildFill to false:

<DockPanel>
    <Menu DockPanel.Dock="Top">
        <MenuItem Header="A" />
        <MenuItem Header="B" />
    </Menu>

    <StatusBar DockPanel.Dock="Bottom" Height="22" />

    <TabControl Margin="0,0,0,0" BorderThickness="1,1,1,1">
        <TabItem Header="A" />
        <TabItem Header="B" />
    </TabControl>
</DockPanel>

Note that you shouldn't set the DockPanel.Dock attached property of the last element.

Also, you don't want to specify a default Height for the TabControl if you want it to fill the remaining space.

The above sample markup will make the TabControl fill the remaining space between the top Menu and the bottom StatusBar: