WPF DockPanel with Toolbar and Statusbar

Question

I'm learning WPF and am trying to have a form that consists of a toolbar at the top, a statusbar at the bottom and the rest will be occupied by controls used for data entry.

This is what I have so far:

<Window x:Class="MyApp.MyForm"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MyForm" Height="346" Width="459">
    <DockPanel>
        <ToolBarTray DockPanel.Dock="Top">
            <ToolBar>
                <Button Command="New" Content="New" />
                <Button Command="Open" Content="Open" />
                <Button Command="Save" Content="Save" />
            </ToolBar>
        </ToolBarTray>
    </DockPanel>
</Window>

How do I add a statusbar at the bottom and another panel that will occupy the rest of the form?

Answer 1

You can use DockPanel to arrange your controls. like this Toolbar will be dock at top, Statusbar at bottom and rest space will be assigned to datagrid because we have set the "LastChildFill" to true in dockpanel.

<Window x:Class="MyApp.MyForm"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MyForm" Height="346" Width="459">
<DockPanel LastChildFill="True">
    <ToolBarTray DockPanel.Dock="Top">
        <ToolBar>
            <Button Command="Edit" Content="Edit" />
            <Button Command="Delete" Content="Delete" />
            <Button Command="Refresh" Content="Refresh" />
        </ToolBar>
    </ToolBarTray>
<StatusBar Name="statusbar" DockPanel.Dock="Bottom">statusbar</StatusBar>
<DataGrid Name="grdEmployees" ItemsSource="{Binding EmpCollection}" />

Answer 2

Suggest you use Grid which can handle complex layout.

 <Grid>
        <Grid.RowDefinitions>
            <RowDefinition x:Name="Toolbar1"  Height="50" />
            <RowDefinition x:Name="Toolbar2"  Height="50" />
            <RowDefinition x:Name="ForDataVisualize"  Height="*" />
            <RowDefinition x:Name="ForStatusbar" Height="25" />
        </Grid.RowDefinitions>
 </Grid>

Answer 3

This is what I got playing around with your code:

<Window x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MyForm" Height="346" Width="459">
    <DockPanel Margin="0,0,0,-4">
        <ToolBarTray DockPanel.Dock="Top">
            <ToolBar>
                <Button Command="New" Content="New" />
                <Button Command="Open" Content="Open" />
                <Button Command="Save" Content="Save" />
            </ToolBar>
        </ToolBarTray>
        <StatusBar Height="21" VerticalAlignment="Bottom" DockPanel.Dock="Bottom" HorizontalAlignment="Right" Width="431" Margin="0,0,10,0"/>
        <Grid Height="267" VerticalAlignment="Top" Width="451" DockPanel.Dock="Left"/>
    </DockPanel>
</Window>