WPF Add menu in line with title bar

Question

I've been searching for ways to get a menu in line with the title bar like the below image. It has the logo on the far left that acts as a menu item and the rest of the text menu items following after it. I've only found ways to get a menu that looks like the second image, where the menu is below the title bar. How can I put the menu in line with the title bar in XAML?

Answer 1

1. First put a Grid with two rows in the form.

2. Put a Menu in the first row.

3. In the second row is the content of the form.

4. Place a DockPanel in the first row and a Menu on the left with DockPanel.Dock = "Left"

5. Place a Border on the set side to place the required Buttons with DockPanel.Dock="Right"

The following code implements the above steps

---

<Window x:Class="For_Test.TestWindow"
        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:For_Test"
        mc:Ignorable="d"
         Title="CanvasWindow" Height="450" Width="800" WindowStyle="None" BorderBrush="Gray" BorderThickness="2">
<Window.Resources>
    <Style TargetType="{x:Type local:TestWindow}">
        <Setter Property="WindowChrome.WindowChrome">
            <Setter.Value>
                <WindowChrome CornerRadius="0" GlassFrameThickness="0" ResizeBorderThickness="0" CaptionHeight="0"></WindowChrome>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <DockPanel Grid.Row="0">
            <DockPanel.Background>
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                    <GradientStop Color="#FF454545" Offset="0.528" />
                    <GradientStop Color="#FF555555" Offset="0.01" />
                    <GradientStop Color="#FF454545" Offset="1" />
                    <GradientStop Color="#FF666666" Offset="1" />
                </LinearGradientBrush>
            </DockPanel.Background>
            <Menu Width="Auto" Name="menu1" VerticalAlignment="Top" DockPanel.Dock="Left" Foreground="White" Background="Transparent" Padding="5 5 5 5">
                <MenuItem Header="File" IsCheckable="true" FontSize="12">

                </MenuItem>
                <MenuItem Header="Settings" IsCheckable="true" Foreground="White" FontSize="12">

                </MenuItem>
                <MenuItem Header="Security" IsCheckable="true" Foreground="White" FontSize="12">

                </MenuItem>
                <MenuItem Header="Database" IsCheckable="true" Foreground="White" FontSize="12">


                </MenuItem>
            </Menu>
            <Border HorizontalAlignment="Right" DockPanel.Dock="Right" Padding="5 5 5 5">
                <StackPanel Orientation="Horizontal" FlowDirection="RightToLeft">
                    <Button Content="Colse" Width="50" Foreground="White" Background="Transparent" BorderBrush="#FFDDDDDD" BorderThickness="1"></Button>
                    <Button Content="Minimize" Width="60" Foreground="White" Background="Transparent" BorderBrush="#FFDDDDDD" BorderThickness="1" Margin="5 0 0 0"></Button>
                </StackPanel>
            </Border>
        </DockPanel>
        <StackPanel Grid.Row="1" Background="Blue">
            <TextBlock Text="Content"></TextBlock>
        </StackPanel>
    </Grid>
</Window>

In TestWindow.cs i put the code to move the form by dragging it on the header and closing the application.

public partial class TestWindow: Window
{
   public TestWindow()
   {
      InitializeComponent();
   }

   private void btnClose_Click(object sender, RoutedEventArgs e)
   {
      Application.Current.Shutdown();
   }

   private void DockPanel_MouseDown(object sender, MouseButtonEventArgs e)
   {
      this.DragMove();
   }
}

Note: Setting WindowStyle="None" removes the Windows header and adds an extra margin to the window, which is cleared by setting the following code.

<Window.Resources>
    <Style TargetType="{x:Type local:TestWindow}">
        <Setter Property="WindowChrome.WindowChrome">
            <Setter.Value>
                <WindowChrome CornerRadius="0" GlassFrameThickness="0" ResizeBorderThickness="0" CaptionHeight="0"></WindowChrome>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

In TargetType="{x: Type local:TestWindow}" enter your window name instead of TestWindow in the code above.

demo :

Answer 2

Unfortunately, there is no easy way to add elements to the default title bar. The way to go is to implement your own title bar which requires you to implement all the features yourslef that would normally come with the default title bar (at least all the features you whant).

This blog article provides a pretty good solution to create a W10 like title bar which can be enhanced by custom elements. The solution is quite lengthy and it would not be apropriate to share the whole blog here. In case the link might break in the future, here is an application where the blogs author used the described implementation.