Replace Window title with Menu for MahApps.Metro borderless Window

autopilot picture autopilot · Jan 12, 2014 · Viewed 9.4k times · Source

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:

enter image description here

What I have got so far looks like below image:

enter image description here

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

Sony picture Sony · Apr 20, 2014

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>