How to create WPF responsive menu bar (full-width)

Question

I have a WPF application which has a Full screen with WindowState="Maximized" enabled but I can not doc the Menu to display full screen. I removed the width property from the window but still displaying the menu in small part of the screen.

How can I make the Menu to behave responsive?

<Window x:Class="UMAp.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:UBrochure"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525" WindowState="Maximized">
    <Grid Background="Gray" >
        <Menu x:Name="menu" HorizontalAlignment="Left" Height="28" VerticalAlignment="Top" >
            <Button Content="Edit" BorderThickness="0" Background="#FFF0F0F0"/>
            <Button BorderThickness="0" Content="  Templates" Background="#FFF0F0F0"/>
        </Menu>
        <Grid Background="#FF51514B" HorizontalAlignment="Left" Height="291" Margin="0,28,0,0" VerticalAlignment="Top" Width="134"/>
    </Grid>
</Window>

Answer 1

What I did to get this working:

1. Set the with and height of the menu to Auto

2. Set the alignments to Stretch on all alignments.

3. Also I'd divided the grid in two columns header and body and set the first column height to a maximum height so it doesn't become to large when the program is full screen.

<Grid Background="Gray" >
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition MaxHeight="15" Height="10*"/>
    </Grid.RowDefinitions>
    <Menu x:Name="menu" Height="Auto" Width="Auto" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
        <Button Content="Edit" BorderThickness="0" Background="#FFF0F0F0"/>
        <Button BorderThickness="0" Content="  Templates" Background="#FFF0F0F0"/>
    </Menu>
    <Grid Background="#FF51514B" HorizontalAlignment="Left" Height="291" Margin="0,28,0,0" VerticalAlignment="Top" Width="134" Grid.RowSpan="2"/>
</Grid>

Answer 2

A better solution is to use DockPanel instead of a Grid as your outer container. Set the menu's DockPanel.Dock="Top" and it will automatically adjust its size without you having to hard-code anything. Any child of the DockPanel will dock against the specified side of the window, in the order they appear in XAML. If LastChildFill is true (it is by default), the last child will automatically fill up any remaining space. You can create some fairly complex layout using this method.

<Window x:Class="FilterWithBindableCount.Window1"
        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"
        mc:Ignorable="d"
        Title="Window1" Height="300" Width="300">
    <DockPanel>
        <Menu DockPanel.Dock="Top">
            <Button Content="Edit" BorderThickness="0" Background="#FFF0F0F0"/>
            <Button BorderThickness="0" Content="Templates" Background="#FFF0F0F0"/>
        </Menu>
        <Grid>
            <!--Grid content here-->
        </Grid>
    </DockPanel>
</Window>

One of the key to successfully using WPF is know what all the different layout containers are, and when to use them.