Replace Window title with Menu for MahApps.Metro borderless Window

Question

I'm developing a border less WPF window application with MahApps.Metro control.

I want to have my menu where normally the window title goes (Title bar's left side). Like below image:

What I have got so far looks like below image:

I have tried setting HorizontalAlignment="Left", but the menu group remains on the right side of the title bar.

Code for this:

<Controls:MetroWindow.WindowCommands>        
    <Controls:WindowCommands HorizontalAlignment="Left">
        <Menu IsMainMenu="True" x:Name="mnuMainMenu" Height="28" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="12" Background="Transparent" Width="Auto" >

            <MenuItem Header="_File" x:Name="mnuFile" Visibility="Visible" Background="Transparent">
                <MenuItem Header="_Open" x:Name="mnuOpen" Background="Transparent" Command="{Binding MenuOpenCommand}" />

                <MenuItem Header="_Exit" x:Name="mnuExit" Click="btnExit_Click" Background="Transparent"/>
            </MenuItem>

            <MenuItem Header="_Tools">
                <MenuItem Header="_Repeat" x:Name="mnuRepete" Background="Transparent" >
                    <MenuItem Header="Repeat None" Command="{Binding RepeatNoneCommand}" IsCheckable="True"/>
                    <MenuItem Header="Repeat One" Command="{Binding RepeatOneCommand}" IsCheckable="True"/>
                    <MenuItem Header="Repeat All" Command="{Binding RepeatAllCommand}" IsCheckable="True"/>
                </MenuItem>
            </MenuItem>

            <MenuItem Header="_Store" x:Name="smOnlineMode" Background="Transparent" Click="smOnlineMode_Click" IsCheckable="True" />
            <MenuItem Header="_Play Mode" x:Name="smPlayMode" Background="Transparent" Click="smPlayMode_Click" IsCheckable="True" IsChecked="True"/>


            <MenuItem Header="_Play">
                <MenuItem Header="_Play" x:Name="mnuPlay" Background="Transparent"  Command="{Binding PlayCommand}"/>
                <MenuItem Header="P_ause" x:Name="mnuPause" Background="Transparent" Command="{Binding PauseCommand}"/>
                <MenuItem Header="_Stop" x:Name="mnuStop" Background="Transparent" Command="{Binding StopCommand}"/>
                <Separator/>
                <MenuItem Header="_Next" x:Name="mnuNext" Background="Transparent" Command="{Binding NextTrackCommand}"/>
                <MenuItem Header="P_revious" x:Name="mnuPrevious" Background="Transparent" Command="{Binding PreviousTrackCommand}" />
                <MenuItem Header="_Mute/UnMute" x:Name="smnuMute" Background="Transparent" Command="{Binding MuteSoundCommand}" />
                <!--Command="{Binding MuteSoundCommand}"-->

            </MenuItem>

            <MenuItem Header="_Help">

                <MenuItem Header="_Help" x:Name="smnuOnlineHelp" Background="Transparent" Click="smnuHelp_Click" />
                <Separator />
                <MenuItem Header="_Register Player" x:Name="smnuRegister" Background="Transparent" Click="smnuRegisterPlayer" />

                <MenuItem Header="_About Codero Music Player" x:Name="smnuAbout" Background="Transparent" Click="smnuAboutClick" />
            </MenuItem>
        </Menu>
    </Controls:WindowCommands>
</Controls:MetroWindow.WindowCommands>

Answer 1

You can do something like this

1. Remove the title from the title bar
2. Add a MetroWindow.LeftWindowCommands tag
3. Add windows command tag inside LeftWindowCommands
4. Place a stackpanel or grid and place what ever you want in the title bar

Code:

       <controls:MetroWindow.LeftWindowCommands>
          <controls:WindowCommands>
            <StackPanel Name="menuHolder" Orientation="Horizontal">
                <TextBlock Padding="10,5,10,5" Text="My Window"></TextBlock>
                <Menu Name="mymenu" Margin="0,5,0,0">
                    <MenuItem Name="File" Header="File">
                        <MenuItem Name="Open" Header="Open"/>
                        <MenuItem Name="Close" Header="Close"/>
                    </MenuItem>
                    <MenuItem Name="Edit" Header="Edit">
                        <MenuItem Name="Copy" Header="Copy"/>
                        <MenuItem Name="Paste" Header="Paste"/>
                    </MenuItem>
                </Menu>
            </StackPanel>
        </controls:WindowCommands>     

Answer 2

The solution that works for me in MahApps.Metro 1.6.5 is to bind the TitleTemplate dependency property with the MenuBar and Title Textblock in the Main Window as shown below:

MainWindow.xaml:

<Controls:MetroWindow
        x:Class="MahAppsMetroDemo.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:MahAppsMetroDemo"
        mc:Ignorable="d"
        Title="ILSpy"
        Height="450" Width="800"
        xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        Icon="/MahAppsMetroDemo;component/Resources/ILSpy.ico"
    >
    <Controls:MetroWindow.TitleTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <Menu
                    Grid.Column="0"
                    Margin="6,0">
                <MenuItem Name="File" Header="File">
                    <MenuItem Name="Open" Header="Open"/>
                    <MenuItem Name="Close" Header="Close"/>
                </MenuItem>
                <MenuItem Name="Edit" Header="Edit">
                    <MenuItem Name="Copy" Header="Copy"/>
                    <MenuItem Name="Paste" Header="Paste"/>
                </MenuItem>
            </Menu>
                <TextBlock
                    Grid.Column="1"
                    Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type Controls:MetroWindow}},Path=Title}"
                    HorizontalAlignment="Left" VerticalAlignment="Center"
                    Padding="10,5,10,5"
                    Margin="6,0"
                    FontSize="16"
                    FontWeight="Bold"
                    />
            </Grid>
        </DataTemplate>
    </Controls:MetroWindow.TitleTemplate>
    <Grid>

    </Grid>
</Controls:MetroWindow>

MainWindow.cs

namespace MahAppsMetroDemo
{
    using MahApps.Metro.Controls;

    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : MetroWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}