WPF Menu Item with Button

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>

Start by actually using multiple MenuItems, instead of one big item with a list in it. — nvoigt, Aug 09 '18 at 14:15
That is partly why i posted this question, I'm not sure how to change my binding to do that and still maintain a button. — JokerMartini, Aug 09 '18 at 14:57
Possible duplicate of [How can I bind an ObservableCollection of ViewModels to a MenuItem?](https://stackoverflow.com/questions/1067903/how-can-i-bind-an-observablecollection-of-viewmodels-to-a-menuitem) — nvoigt, Aug 09 '18 at 15:03
What's the purpose of the line in the style for MenuItem.Header? If I remove that line, your control works like you want. — user2619824, Aug 09 '18 at 22:21

score 2 · Accepted Answer · answered Aug 10 '18 at 09:33

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>

this works great. how did you know what was needed to construct the template? Is there a process you typically follow in order to do this? Thank you — JokerMartini, Aug 10 '18 at 14:50
Yes, you could right-click in a ListViewItem in design mode in Visual Studio or in Blend and choose Edit Template->Edit a Copy to copy the default template into your project. You can then edit it as per your requirements. — mm8, Aug 10 '18 at 14:54

WPF Menu Item with Button

1 Answers1