WPF gui design with xaml

Question

I am new to XAML so i dont't know how to do it right. My design should have a menu-bar at the top (100% width), followed by a other bar with a button on the left and one on the right (100% width) after this it should be a sidebar on the left (about 100px) and the rest should be "content" so there i want to place my controls (buttons, listviews, grids, lkab

With my code it looks not bad, but the sidebar should be under the dockpanel that contains two dockpanels.

http://oi66.tinypic.com/xf5dhw.jpg

<Window Background="#f5f5f5" Width="1280" Height="800" x:Class="WpfApplication3.MainWindow"
    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:WpfApplication3"
    mc:Ignorable="d"
    Title="primoxx">
<Grid>
    <DockPanel LastChildFill="False" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Top">
        <DockPanel DockPanel.Dock="Top">
            <Menu DockPanel.Dock="Top">
                <MenuItem Header="_Datei" />
                <MenuItem Header="_Bearbeiten" />
                <MenuItem Header="_Verwaltung" />
                <MenuItem Header="_Vorlagen" />
                <MenuItem Header="_Gestaltung" />
                <MenuItem Header="_Extras" />
                <MenuItem Header="_Hilfe" />
            </Menu>
        </DockPanel>
        <DockPanel Background="White" LastChildFill="False" DockPanel.Dock="Top">
            <Button Height="30px">My Button</Button>
        </DockPanel>
    </DockPanel>
    <DockPanel Grid.Row="1" VerticalAlignment="Top">
        <DockPanel DockPanel.Dock="Left">
            <StackPanel>
                <Button Style="{StaticResource subMenuButton}">Hello</Button>
            </StackPanel>
        </DockPanel>
        <DockPanel DockPanel.Dock="Right">

        </DockPanel>
    </DockPanel>
</Grid>

Answer 1

I think you have misunderstood how DockPanel.Dock works

it can go in any UIElement and will then set the dock in the first parent that is a dock panel so you shouldn't need half the dock panels you are using try this instead

<Window Background="#f5f5f5" Width="1280" Height="800" x:Class="WpfApplication3.MainWindow"
    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:WpfApplication3"
    mc:Ignorable="d"
    Title="primoxx">
    <DockPanel >
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_Datei" />
            <MenuItem Header="_Bearbeiten" />
            <MenuItem Header="_Verwaltung" />
            <MenuItem Header="_Vorlagen" />
            <MenuItem Header="_Gestaltung" />
            <MenuItem Header="_Extras" />
            <MenuItem Header="_Hilfe" />
        </Menu>
        <!--if you want to have both buttons on 50% width-->
        <UniformGrid DockPanel.Dock="Top" Columns="2">
            <Button DockPanel.Dock="Left">Hello</Button>
            <Button DockPanel.Dock="Right" Height="30px">My Button</Button>
        </UniformGrid>
        <!--if you want to have both buttons on auto size -->
        <DockPanel LastChildFill="False" DockPanel.Dock="Top">
            <Button DockPanel.Dock="Left">Hello</Button>
            <Button DockPanel.Dock="Right" Height="30px">My Button</Button>
        </DockPanel>
        <StackPanel DockPanel.Dock="Left" Background="blue" MinWidth="100"/>
        <ContentControl  />
    </DockPanel>
</Window>

Note: i've coloured the side panel blue so you can see it

Answer 2

The Grid panel defines a flexible grid area that consists of columns and rows that should be very useful here: https://msdn.microsoft.com/en-us/library/system.windows.controls.grid(v=vs.110).aspx

You add a RowDefinition for each row you want in the Grid and a ColumnDefinition for each column and then you set the Grid.Row/Grid.Column attached properties of each element in the Grid to determine its position within the same. An element may span several columns or rows by setting the Grid.ColumnSpan and Grid.RowSpan properties respectively. The following sample markup should give you the idea:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <!-- first row, the Menu spans both columns -->
    <Menu Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2">
        <MenuItem Header="_Datei" />
        <MenuItem Header="_Bearbeiten" />
        <MenuItem Header="_Verwaltung" />
        <MenuItem Header="_Vorlagen" />
        <MenuItem Header="_Gestaltung" />
        <MenuItem Header="_Extras" />
        <MenuItem Header="_Hilfe" />
    </Menu>
    <!-- the bar with one button to the left and another one to the right-->
    <Button Content="Left" Grid.Column="0" Grid.Row="1" />
    <Button Content="Right" Grid.Column="1" Grid.Row="1" />

    <Grid Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Border Background="Silver" Grid.Column="0">
            <!-- Sidebar-->
        </Border>
        <Border Background="Yellow" Grid.Column="1">
            <!-- The Content-->
        </Border>
    </Grid>
</Grid>