Develop Reference

Custom MenuItem style for ContextMenu?

I need to create a custom style for MenuItem with a set of ControlTemplate per each MenuItem Role. So, I decided to use this approach from msdn
But, there's one problem - I want to get the same appearance in Popup.
Unfortunately, the appearance is different like on the picture below:
Example of code:
<Window x:Class="ExporerSubMenu.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:ExporerSubMenu"
mc:Ignorable="d"
Title="MainWindow" Height="400" Width="1000">
<Window.Resources>
<!-- Copy all styles for MenuItem ControlTemplate and Brushes -->
<!-- https://msdn.microsoft.com/fr-fr/library/ms747082(v=vs.85).aspx -->
</Window.Resources>
<Grid Background="LightBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBox Text="Local (right click)" FontSize="16" Grid.Column="0">
<TextBox.ContextMenu>
<ContextMenu>
<MenuItem Header="Restore...">
<MenuItem Header="to desktop" />
<MenuItem Header="to another folder" />
<MenuItem Header="db schema and data..." />
</MenuItem>
<MenuItem Header="to .bac file">
<MenuItem Header="to desktop" />
<MenuItem Header="to another folder" />
</MenuItem>
<MenuItem Header="to db files">
<MenuItem Header="to desktop" />
<MenuItem Header="to another folder" />
</MenuItem>
<MenuItem Header="Export data">
<MenuItem Header="db schema to desktop" />
<MenuItem Header="db schema and data..." />
</MenuItem>
<MenuItem Header="Remove" />
</ContextMenu>
</TextBox.ContextMenu>
</TextBox>
</Grid>
</Window>
Now, I have only one solution - to draw rectangles (from Blend)
<Popup x:Name="PART_Popup" AllowsTransparency="True" Focusable="False" HorizontalOffset="-2" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Right" VerticalOffset="-3">
<Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent">
<Border x:Name="SubMenuBorder" BorderBrush="#FF959595" BorderThickness="1" Background="WhiteSmoke">
<ScrollViewer x:Name="SubMenuScrollViewer" Margin="1,0" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
<Grid x:Name="Grid2" RenderOptions.ClearTypeHint="Enabled">
<Canvas x:Name="Canvas" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRect" Fill="WhiteSmoke" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
</Canvas>
<Rectangle x:Name="Rectangle" Fill="#FFF1F1F1" HorizontalAlignment="Left" Margin="1,2" RadiusY="2" RadiusX="2" Width="28"/>
<Rectangle x:Name="Rectangle1" Fill="#FFE2E3E3" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>
<Rectangle x:Name="Rectangle2" Fill="White" HorizontalAlignment="Left" Margin="30,2,0,2" Width="1"/>
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" Margin="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
</Grid>
</ScrollViewer>
</Border>
</Themes:SystemDropShadowChrome>
</Popup>
Is there any another solution to solve this ?

Gridsplitter unwanted behavior

It is my first time working with a GridSplitter in WPF. I am trying to allow the user to resize the grid that contains 2 main controls. On top is a datagrid, below is a button with a map image over it. This is what it looks like in the designer. I have a separate row just for the gridsplitter. The xaml for the row definitions is
<Grid.RowDefinitions>
<RowDefinition Height="37" />
<RowDefinition Height="274*" />
<RowDefinition Height="13*"/>
<RowDefinition Height="272*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
Interestingly, the GridSplitter seems to work if I'm moving it down. Then I can move it as needed and functions correctly. However, it seems that if I move the splitter above where the line for the row defined above it is, I am unable to move it down again. I can only continue to move it further up.
I have attached a link to a gif showing the behavior that I talk about here.
I am wondering how to go about making the GridSplitter function the same when moving it up or down, as right now, the functionality is correct only if it is moved down from it's initial starting position.
Any help is appreciated.
Update: Here is the full xaml for the user control holding the grid:
<UserControl x:Class="LWDCM.Views.JobsControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:LWDCM.Views"
xmlns:Properties="clr-namespace:LWDCM.Properties"
xmlns:Utility="clr-namespace:LWDCM.Utility"
xmlns:Styles="clr-namespace:LWDCM.Styles"
xmlns:gif="https://github.com/XamlAnimatedGif/XamlAnimatedGif"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:Converters="clr-namespace:LWDCM.Converters"
mc:Ignorable="d"
Name="jobsControl"
MinWidth="800"
MinHeight="600"
>
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../Styles/AppStyles.xaml" />
<!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<!-- Accent and AppTheme setting -->
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid x:Name="MainGrid"
Margin="0,0,0,0"
Background="#26598c"
>
<!--<Grid.Background>
<LinearGradientBrush ColorInterpolationMode="SRgbLinearInterpolation"
StartPoint="0.5, 0.0"
EndPoint="0.5, 1.0">
<GradientStopCollection>
<GradientStop Color="#FF111111"
Offset="0.0" />
<GradientStop Color="#FF333333"
Offset="0.5" />
<GradientStop Color="#FF111111"
Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush>
</Grid.Background>-->
<Grid.RowDefinitions>
<RowDefinition Height="37" />
<RowDefinition Height="274*" />
<RowDefinition Height="13*"/>
<RowDefinition Height="272*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Grid.Resources>
<ContextMenu x:Key="ListViewContextMenu">
<MenuItem x:Name="ContextRename"
Header="{x:Static Properties:Resources.RenameJob}"
Command="{Binding RenameJobCommand}" />
<MenuItem x:Name="ContextSetJobsiteAddress"
Header="{x:Static Properties:Resources.SetJobsiteAddress}"
Command="{Binding UpdateJobSiteAddressCommand}" />
<MenuItem x:Name="ContextSetCustomerAddress"
Header="{x:Static Properties:Resources.SetCustomerAddress}"
Command="{Binding UpdateCustomerInformationCommand}" />
<MenuItem x:Name="ContextSetContractorAddress"
Header="{x:Static Properties:Resources.SetContractorAddress}"
Command="{Binding UpdateContractorInformationCommand}" />
<MenuItem x:Name="ContextEditWorkOrderNumber"
Header="{x:Static Properties:Resources.EditWorkOrderNumber}"
Command="{Binding EditWorkOrderNumberCommand}" />
<Separator/>
<MenuItem x:Name="ExportToKML"
Header="{x:Static Properties:Resources.ExportToKML}"
Command="{Binding ExportToKMLCommand}"/>
</ContextMenu>
<Converters:NullVisibilityConverter x:Key="NullVisibilityConverter" />
</Grid.Resources>
<DataGrid x:Name="JobListView"
AutoGenerateColumns="False"
ItemsSource="{Binding UnitStatusCollection, Mode=TwoWay}"
CanUserDeleteRows="False"
Style="{StaticResource JobGridViewStyle}"
SelectedItem="{Binding JobsListViewSelectedUnitInfo, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Utility:DataGridColumnsBehavior.BindableColumns="{Binding DataGridColumns}"
ContextMenu="{StaticResource ListViewContextMenu}"
Margin="10,0,10,2"
Grid.Row="1"
SelectionMode="Single"
SelectionUnit="FullRow"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
RowStyle="{StaticResource DataGridRowStyle}"
CellStyle="{StaticResource DataGridCellStyle}"
AlternationCount="2"
CanUserResizeRows="False"
HorizontalGridLinesBrush="#d6d6d6"
VerticalGridLinesBrush="#d6d6d6"
Background="#EAEAEA"
>
<!--This is to allow double clicks to open a job in LWD 3x-->
<DataGrid.InputBindings>
<MouseBinding Gesture="LeftDoubleClick"
Command="{Binding OpenInLWD3xCommand}" />
<KeyBinding Key="Return"
Command="{Binding OpenInLWD3xCommand}" />
<KeyBinding Key="F5"
Command="{Binding RefreshCommand}"/>
</DataGrid.InputBindings>
<DataGrid.Resources>
<Converters:DoubleNanVisibilityConverter x:Key="DoubleNanVisibilityConverter" />
<Converters:NullVisibilityConverter x:Key="NullVisibilityConverter" />
</DataGrid.Resources>
</DataGrid>
<Button Cursor="Hand"
Grid.ZIndex="0"
Margin="10,2,10,1"
Grid.Row="3"
x:Name="cmdMapImage"
Visibility="{Binding JobsListViewSelectedUnitInfo, Converter={StaticResource NullVisibilityConverter}}"
Style="{StaticResource MapButtonStyle}"
Command="{Binding ShowMapOnlineCommand}">
<Image x:Name="mapImage"
Source="{Binding DisplayedImage}"
Tag="{Binding JobId}"
Stretch="Fill"
VerticalAlignment="Center"
RenderOptions.BitmapScalingMode="HighQuality">
</Image>
</Button>
<Rectangle Fill="#26598c"
Grid.ZIndex="1"
Margin="0,10,7,0"
Grid.Row="3"
Height="46"
VerticalAlignment="Top"
HorizontalAlignment="Right"
Width="226"
RadiusY="3.667"
RadiusX="3.667"
Focusable="False"/>
<Button Grid.ZIndex="2"
Command="{Binding ScanForwardCommand}"
x:Name="scrollRightButton"
Margin="0,20,15,0"
HorizontalAlignment="Right"
Width="30"
Height="26"
VerticalAlignment="Top"
Grid.Row="3">
<Image x:Name="scrollRight"
Source="/Assets/Down-30px-tall.png"
Stretch="Fill"
VerticalAlignment="Center"
RenderOptions.BitmapScalingMode="HighQuality">
</Image>
</Button>
<Button Grid.ZIndex="2"
Command="{Binding ScanBackwardCommand}"
x:Name="scrollLeftButton"
Margin="0,20,50,0"
RenderTransformOrigin="1,-0.617"
HorizontalAlignment="Right"
Width="30"
Height="26"
VerticalAlignment="Top"
Grid.Row="3">
<Image x:Name="scrollLeft"
Source="/Assets/Up-30px-tall.png"
Stretch="Fill"
VerticalAlignment="Center"
RenderOptions.BitmapScalingMode="HighQuality">
</Image>
</Button>
<ComboBox x:Name="ScanSizesComboBox"
Grid.ZIndex="2"
ItemsSource="{Binding ScanSizes}"
SelectedItem="{Binding SelectedScanSize, Mode=TwoWay}"
ToolTip="{Binding (Validation.Errors)[0].ErrorContent}"
Margin="0,20,85,0"
HorizontalAlignment="Right"
Width="61"
Height="26"
VerticalAlignment="Top"
Grid.Row="3" />
<Button x:Name="OpenLWD"
Grid.ZIndex="2"
Command="{Binding OpenInLWD3xCommand}"
Margin="0,20,150,0"
HorizontalAlignment="Right"
Width="75"
Height="26"
VerticalAlignment="Top"
Grid.Row="3"
Padding="0"
Background="#26598c">
<Image x:Name="openIn3x"
Source="/Assets/LWD-button.png"
Tag="{Binding JobId}"
Stretch="Fill"
VerticalAlignment="Center"
RenderOptions.BitmapScalingMode="HighQuality"
Height="27">
</Image>
</Button>
<DockPanel Grid.Row="0"
LastChildFill="False"
Grid.RowSpan="4">
<Menu x:Name="menu"
DockPanel.Dock="Top"
IsTabStop="False"
FontSize="13"
VerticalAlignment="Top"
Background="WhiteSmoke"
Height="27">
<MenuItem x:Name="FileMenu"
Header="{x:Static Properties:Resources.File}"
Background="Transparent" FontFamily="Arial">
<MenuItem x:Name="BluetoothUpload"
Header="{x:Static Properties:Resources.UploadBluetoothJob}"
IsEnabled="True"
Command="{Binding OpenLWD3xBluetoothCommand}" />
<MenuItem x:Name="FileUpload"
Header="{x:Static Properties:Resources.UploadLocalFile}"
IsEnabled="True"
Command="{Binding AddLocalJobCommand}" />
<Separator />
<MenuItem x:Name="FileLogout"
Header="{x:Static Properties:Resources.Logout}"
IsEnabled="True"
Command="{Binding LogoutCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" />
</MenuItem>
<MenuItem x:Name="ViewMenu"
Header="{x:Static Properties:Resources.View}"
Background="Transparent">
<MenuItem x:Name="ColumnOptions"
Header="{x:Static Properties:Resources.ColumnOptions}"
Background="Transparent"
Command="{Binding ShowColumnOptionsDialogCommand}" />
<MenuItem x:Name="DisplayUnits"
Header="{x:Static Properties:Resources.DisplayUnits}"
Background="Transparent"
Command="{Binding ShowUnitsSelectionCommand}" />
<Separator />
<MenuItem x:Name="ViewRefresh"
IsEnabled="True"
Header="Re_fresh"
Command="{Binding RefreshCommand}"
/>
<!--<MenuItem x:Name="ViewOptions" Header="_Options" />-->
</MenuItem>
<MenuItem x:Name="HelpMenu"
Header="{x:Static Properties:Resources.Help}"
Background="Transparent">
<MenuItem x:Name="HelpOpen"
Header="{x:Static Properties:Resources.OnlineHelp}" />
<Separator />
<MenuItem x:Name="HelpAbout"
Header="{x:Static Properties:Resources.About}"
Command="{Binding ShowAboutDialogCommand}" />
<MenuItem x:Name="DeleteUnits"
Header="Delete all Units"
Command="{Binding RemoveUnitsCommand}"/>
</MenuItem>
</Menu>
</DockPanel>
<GridSplitter x:Name="gridSplitter" Grid.Row="2" Width="Auto" MinHeight="5" MaxHeight="5" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="0,4,0,4" />
</Grid>
</UserControl>
And here is the JobGridViewStyle:
<Style x:Key="JobGridViewStyle" TargetType="DataGrid">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Background" Value="WhiteSmoke" />
<Setter Property="SelectionMode" Value="Single" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="10,0,10,0" />
</Style>

I appreciate the help. I'm really not sure why, but the solution to my answer was to add
ShowsPreview="True"
to my GridSplitter. I have no idea why this would affect the functionality, but it fixed my issue.
For reference, I was looking at this page: How to: Resize Rows with a GridSplitter when I found out the solution.
Thanks again

Filling an entire MenuButton with an Image

I'm trying to create a WPF menu that consists out of 5 simple buttons that are filled entire with a single image. I've created the following XAML:
<Menu x:Name="menuMain" Height="40" Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Stretch">
<MenuItem x:Name="menuItemPrint" Width="40" Height="40">
<MenuItem.Icon>
<Image Source="Resources/Images/Yes.png" Width="40" Height="40"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem x:Name="menuItemClear" Width="40" Height="40">
<MenuItem.Icon>
<Image Source="Resources/Images/Yes.png" Width="40" Height="40"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem x:Name="menuItemSettings" Width="40" Height="40">
<MenuItem.Icon>
<Image Source="Resources/Images/Yes.png" Width="40" Height="40"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem x:Name="menuItemScanner" Width="40" Height="40">
<MenuItem.Icon>
<Image Source="Resources/Images/Yes.png" Width="40" Height="40"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem x:Name="menuItemMode" Width="40" Height="40" Click="menuItemMode_Click">
<MenuItem.Icon>
<Image Source="Resources/Images/Yes.png" Width="40" Height="40"/>
</MenuItem.Icon>
</MenuItem>
</Menu>
But the exact result of that is shown below:
It's showing only the top left quarter of the image, and it seems to be offsetting it for some bizarre reason as well? Almost all answers on the internet involve setting the size of the picture, which I did (the .PNG size is exactly 40x40, and so are the MenuItems and Images.
I've tried changing the alignment, setting Fill to 'Stretch' and adjusting the margin, but nothing seems to help.
For the record, what I'm trying the achieve is shown below (Though preferably with a less grotesquely ugly green checkmark. You'll have to excuse my editing skills).

Instead of using the Icon attribute, use the Header and just set a margin offset.
<MenuItem x:Name="menuItemPrint" Width="40" Height="40">
<MenuItem.Header>
<Image Source="Resources/Images/Yes.png" Width="40" Height="40" Margin="-7"/>
</MenuItem.Header>
</MenuItem>

Try overriding the menuitem template. This seems to work for me.
<Menu Height="40">
<MenuItem Height="40" Width="40">
<MenuItem.Template>
<ControlTemplate>
<Image Source="source path here" />
</ControlTempalte>
</MenuItem.Template>
</MenuItem>
</Menu>

Replace Window title with Menu for MahApps.Metro borderless Window

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>

You can do something like this
Remove the title from the title bar
Add a MetroWindow.LeftWindowCommands tag
Add windows command tag inside LeftWindowCommands
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>

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();
}
}
}

Create StackPanel, put your menu into StackPanel and set the property HorizontalAlignment=Left or try to use Margin property again

You have to restyle the MetroWindow for your own. The easiest way for your needs would be to create a custom resource dictionary and copy the MetroWindow.xaml into it and change following line to Grid.Column="0":
MetroWindow.xaml
But do not forget to load that modified resource in App.xaml.

Create a menu Bar in WPF?

I want to create a menu bar identical to the one in windows forms in my WPF application.
How would I do this?
The menu option in the WPF controls toolbox only gives a blank bar.

<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="_File">
<MenuItem Header="_Open"/>
<MenuItem Header="_Close"/>
<MenuItem Header="_Save"/>
</MenuItem>
</Menu>
<StackPanel></StackPanel>
</DockPanel>

Yes, a menu gives you the bar but it doesn't give you any items to put in the bar. You need something like (from one of my own projects):
<!-- Menu. -->
<Menu Width="Auto" Height="20" Background="#FFA9D1F4" DockPanel.Dock="Top">
<MenuItem Header="_Emulator">
<MenuItem Header="Load..." Click="MenuItem_Click" />
<MenuItem Header="Load again" Click="menuEmulLoadLast" />
<Separator />
<MenuItem Click="MenuItem_Click">
<MenuItem.Header>
<DockPanel>
<TextBlock>Step</TextBlock>
<TextBlock Width="10"></TextBlock>
<TextBlock HorizontalAlignment="Right">F2</TextBlock>
</DockPanel>
</MenuItem.Header>
</MenuItem>
:

<StackPanel VerticalAlignment="Top">
<Menu Width="Auto" Height="20">
<MenuItem Header="_File">
<MenuItem x:Name="AppExit" Header="E_xit" HorizontalAlignment="Left" Width="140" Click="AppExit_Click"/>
</MenuItem>
<MenuItem Header="_Tools">
<MenuItem x:Name="Options" Header="_Options" HorizontalAlignment="Left" Width="140"/>
</MenuItem>
<MenuItem Header="_Help">
<MenuItem x:Name="About" Header="&About" HorizontalAlignment="Left" Width="140"/>
</MenuItem>
</Menu>
<Label Content="Label"/>
</StackPanel>

<Container>
<Menu>
<MenuItem Header="File">
<MenuItem Header="New">
<MenuItem Header="File1"/>
<MenuItem Header="File2"/>
<MenuItem Header="File3"/>
</MenuItem>
<MenuItem Header="Open"/>
<MenuItem Header="Save"/>
</MenuItem>
</Menu>
</Container>