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?

score 11 · Accepted Answer · answered Nov 12 '13 at 14:24

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}" />

enter image description here

I finally got my code to work after seeing your example. Thank you. I didn't realize that the "main fill control" needed to actually be the last item added. I'm way too used to Winforms. — Krythic, Dec 20 '15 at 17:16

score 0 · Answer 2 · answered Nov 12 '13 at 14:15

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>

score -1 · Answer 3 · answered Nov 12 '13 at 14:23

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>

WPF DockPanel with Toolbar and Statusbar

3 Answers3