Dock Controls in WPF

Question

I'm very new to WPF but I'm used to winforms. In winforms when I want to dock a control I just use DockStyle but I don't know how to do it in wpf. From the answer to this question , I have been able to dock my richtextbox in the window.

But my problem now is how to dock my status bar and menustrip at the top and bottom of the window. I have tried using

<Window x:Class="Textpad.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Textpad" Height="324" Width="390" FontFamily="Tahoma">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="368*" />
        <ColumnDefinition Width="0*" />
    </Grid.ColumnDefinitions>
    <Menu Height="23" HorizontalAlignment="Center" Name="menu1" VerticalAlignment="Top" Width="368" Grid.ColumnSpan="2">
        <MenuItem Header="File">
            <MenuItem Header="New" />
            <MenuItem Header="Open" />
            <MenuItem Header="Save" />
            <MenuItem Header="Save as" />
            <Separator />
            <MenuItem Header="Print" />
            <MenuItem Header="Print Preview" />
            <MenuItem Header="Page Setup" />
            <Separator />
            <MenuItem Header="Exit" />
        </MenuItem>
        <MenuItem Header="Edit">
            <MenuItem Header="Undo" />
            <MenuItem Header="Redo" />
            <Separator />
            <MenuItem Header="Cut" />
            <MenuItem Header="Copy" />
            <MenuItem Header="Paste" />
            <MenuItem Header="Delete" />
            <Separator />
            <MenuItem Header="Find" />
            <MenuItem Header="Replace" />
            <Separator />
            <MenuItem Header="Select All" />
        </MenuItem>
        <MenuItem Header="Format">
            <MenuItem Header="Word Wrap" />
            <Separator />
            <MenuItem Header="Font" />
            <MenuItem Header="Text Color" />
        </MenuItem>
        <MenuItem Header="View">
            <MenuItem Header="Status Bar" />
        </MenuItem>
        <MenuItem Header="Help">
            <MenuItem Header="About Textpad" />
        </MenuItem>
    </Menu>
    <DockPanel>
        <StatusBar Height="23 " HorizontalAlignment="Stretch" Name="statusBar1" Width="368" Grid.ColumnSpan="2" DockPanel.Dock="Bottom">
            <StatusBarItem Content="This is status baritem content to test" />
        </StatusBar>
    </DockPanel>
    <RichTextBox HorizontalAlignment="Stretch" Margin="0,21" Name="richTextBox1" VerticalAlignment="Stretch" TextChanged="richTextBox1_TextChanged" VerticalContentAlignment="Top" Grid.ColumnSpan="2" />
</Grid>

But the menu and status bar are docked at the center of the window when maximised.

Please what am i doing wrong?

Answer 1

You need a DockPanel and set the DockPanel.Dock Attached Property to the elements you want to dock:

<Window>
   <DockPanel>
      <StatusBar Height="23" DockPanel.Dock="Bottom"/>
      <Menu Height="23" DockPanel.Dock="Top"/>

      <!-- Main Window Content here -->
   </DockPanel>
</Window>

Remove the Margin and VerticalAlignment properties from these elements.

Edit: Correct your XAML like this:

<Window x:Class="Textpad.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Textpad" Height="324" Width="390" FontFamily="Tahoma">
    <DockPanel>

        <Menu Height="23" DockPanel.Dock="Top">
           <!-- MenuItems Here -->
        </Menu>

        <StatusBar Height="23" DockPanel.Dock="Bottom">
            <StatusBarItem Content="Amesinlola Tijesunimi is my Name and baseball is the game" />
        </StatusBar>

       <RichTextBox Margin="0,21" TextChanged="richTextBox1_TextChanged" VerticalContentAlignment="Top"/>

    </DockPanel>
</Window>