WPF Menu Item with Button - wpf

Question

How can I add a Button to the menu items shown in the image below? I've tried creating a MenuItem template but when i use that the Header text of the menu item no longer displays what Binding am I doing wrong here?
Not using menuitem template
Using Menu Item Template which is currently commented out in the code:
I would prefer it looks like this using a label as the text and a Button.
<Window.Resources>
<XmlDataProvider x:Key="MockList" XPath="/MockObjects/*" >
<x:XData >
<MockObjects xmlns="">
<MockObject Name="Louis" Type="A" Number="1" />
<MockObject Name="Joseph Angelo" Type="A" Number="2" />
<MockObject Name="Papineau Philadelphia" Type="B" Number="301" />
<MockObject Name="Mary" Type="B" Number="4" />
<MockObject Name="Kevin" Type="C" Number="5" />
<MockObject Name="Sarah" Type="D" Number="6" />
<MockObject Name="Doug" Type="E" Number="7" />
<MockObject Name="Leslie" Type="F" Number="8" />
<MockObject Name="Mike" Type="G" Number="9" />
<MockObject Name="Sue" Type="H" Number="10" />
<MockObject Name="Michelle" Type="I" Number="11" />
<MockObject Name="Ron" Type="J" Number="12" />
<MockObject Name="Amy" Type="K" Number="13" />
</MockObjects>
</x:XData>
</XmlDataProvider>
</Window.Resources>
<DockPanel>
<Menu Grid.Row="0" BorderThickness="0,0,0,1">
<MenuItem Header="_File">
<MenuItem Header="Custom Presets" DataContext="{Binding Source={StaticResource MockList}}" ItemsSource="{Binding Mode=Default, XPath=/MockObjects/MockObject}">
<MenuItem.ItemContainerStyle>
<Style>
<Setter Property="MenuItem.Header" Value="{Binding XPath=#Name}"/>
<Setter Property="MenuItem.Command" Value="{Binding Open}"/>
</Style>
</MenuItem.ItemContainerStyle>
<!--<MenuItem.ItemTemplate>
<HierarchicalDataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Header}"/>
<TextBlock Text="{Binding XPath=#Name}" Width="150" Foreground="Red"/>
<Button Content="X" Background="Firebrick" Cursor="Hand"/>
</StackPanel>
</HierarchicalDataTemplate>
</MenuItem.ItemTemplate>-->
</MenuItem>
</MenuItem>
</Menu>
</DockPanel>

Answer 1

The following ControlTemplate should work:
<Menu Grid.Row="0" BorderThickness="0,0,0,1">
<MenuItem Header="_File">
<MenuItem Header="Custom Presets" DataContext="{Binding Source={StaticResource MockList}}"
ItemsSource="{Binding Mode=Default, XPath=/MockObjects/MockObject}">
<MenuItem.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="MenuItem.Header" Value="{Binding XPath=#Name}"/>
<Setter Property="MenuItem.Command" Value="{Binding Open}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid Margin="-1">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="22" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
<ColumnDefinition Width="13"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
<Border x:Name="GlyphPanel" BorderBrush="#FF26A0DA" BorderThickness="1" Background="#3D26A0DA" ClipToBounds="False" HorizontalAlignment="Center" Height="22" Margin="-1,0,0,0" Visibility="Hidden" VerticalAlignment="Center" Width="22">
<Path x:Name="Glyph" Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z" Fill="#FF212121" FlowDirection="LeftToRight" Height="11" Width="10"/>
</Border>
<ContentPresenter x:Name="menuHeaderContainer" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="2" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
<TextBlock x:Name="menuGestureText" Grid.Column="4" Margin="{TemplateBinding Padding}" Opacity="0.7" Text="{TemplateBinding InputGestureText}" VerticalAlignment="Center"/>
<Button Content="X" Grid.Column="6" Margin="2" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Icon" Value="{x:Null}">
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Background" TargetName="templateRoot" Value="#3D26A0DA"/>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF26A0DA"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
<Setter Property="Fill" TargetName="Glyph" Value="#FF707070"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsHighlighted" Value="True"/>
<Condition Property="IsEnabled" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="templateRoot" Value="#0A000000"/>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="#21000000"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</MenuItem.ItemContainerStyle>
</MenuItem
</MenuItem>
</Menu>