WPF4 TabControl/Grid in a DockPanel is hiding StatusBar

Question

I have a window filled with a DockPanel containing 3 elements, a MenuBar docked at the top, a StatusBar docked at the bottom and a TabControl filling the body.

At least, I would like the TabControl to fill the body. In the visual designer, the TabControl and StatusBar are laid out side by side instead of top & bottom. When I run the application, the TabControl expands to fill the DockPanel below the MenuBar and the StatusBar disappears. (I am guessing it is being pushed off the visible canvas of the parent window.)

I tried setting vertical & horizontal alignment per this recommendation. I tried setting ZIndex on the StatusBar. I tried using a stack panel (both docked inside the DockPanel and replacing the DockPanel). All to no avail :-(

Following is an extract of the XAML I'm using to render my DockPanel. Any suggestions on what I'm doing wrong? Is there a better way to do this than using a DockPanel?

    <DockPanel>
    <Menu Name="_menu" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" DockPanel.Dock="Top">
        <MenuItem Header="_User Maintenance">
        </MenuItem>
    </Menu>
    <TabControl 
        x:Name="_panel" 
        ItemsSource="{Binding Path=AllTabs}" 
        Margin="0,0,0,0" 
        Visibility="{Binding Path=Visibility}" 
        DockPanel.Dock="Top"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        >
    </TabControl>
    <StatusBar Name="_statusBar" DockPanel.Dock="Bottom" Margin="0,0,0,0" VerticalAlignment="Bottom">
        <StatusBar.ItemsPanel>
            <ItemsPanelTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="26"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                </Grid>
            </ItemsPanelTemplate>
        </StatusBar.ItemsPanel>
        <StatusBarItem Grid.Column="0" Grid.Row="0">
            <ProgressBar Name="_progressBar" Height="20" IsIndeterminate="True" Margin="4,0,4,0" VerticalAlignment="Top" Width="600"/>
        </StatusBarItem>
    </StatusBar>
</DockPanel>

Edit:

By adding DockPanel.Dock="Top" to the TabControl along with both HorizontalAlignment & VerticalAlignment="Stretch", I was able to get the TabControl to stack above the StatusBar instead of next to it in the visual designer. Now, the StatusBar only disappears at runtime for some of my TabItems.

My TabControl is databound to a ViewModel that exposes a list of UserControls. Each UserControl contains its own databound DataGrid (and usually a few other controls). In those tabs for which the DataGrid only displays a few rows, the TabControl & TabItem only stretch to contain the UserGrid, leaving the StatusBar visible at the bottom of the page. On those tabs where the DataGrid shows many rows, the TabControl stretches to fill the window, somehow hiding the StatusBar.

In case it helps, here is my DataGrid definition:

 <DataGrid 
        Name="_customerGrid" 
        Grid.Column="0" 
        Grid.ColumnSpan="3" 
        Grid.Row="1" 
        AutoGenerateColumns="False" 
        CanUserSortColumns="True"
        ColumnHeaderStyle="{StaticResource columnHeaderStyle}"
        HorizontalAlignment="Left" 
        ItemsSource="{Binding Path=AllCustomers}" 
        RowDetailsVisibilityMode="VisibleWhenSelected"
        RowStyle="{StaticResource DataGridRowStyle}"
        SelectionUnit="FullRow"
        VerticalAlignment="Top">

Thanks!

Answer 1

DockPanel depends on the order in which the items are added. You'll have to add the docked items first before adding the item that takes up the remaining space. In your case, you'll just have to rearrange your items to something like this:

<DockPanel>
  <Menu DockPanel.Dock="Top".../>
  <StatusBar DockPanel.Dock="Bottom".../>
  <TabControl/>
</DockPanel>