WPF Context Menu Menu Item Icons Disappear with Custom Control Template

85 views Asked by At

I have a custom template for my context menu and menu items to change the color of the background, text, and highlight. The issue is my icons disappear even though I am using BasedOn to reference the template from my theme resource dictionary. I have to add the icons in the main xaml because it has the references to the resource dictionary that the icons are stored in and my theme resource dictionary.

main.xaml (within the ContextMenu tag)

<MenuItem Header="...code...">
    <!-- Add style to MenuItem -->
    <MenuItem.Style>
        <Style TargetType="MenuItem" 
               BasedOn="{StaticResource ContextMenuItemTheme}">
            <!-- Add the Icon -->
            <Setter Property="Icon">
                <Setter.Value>
                    <Image Source="{StaticResource Image}"/>
                </Setter.Value>
            </Setter>
        </Style>
    </MenuItem.Style>                        
</MenuItem>

theme.xaml (resource dictionary)

<Style x:Key="ContextMenuItemTheme" TargetType="{x:Type MenuItem}">
        <Setter Property = "Background" 
                Value="{DynamicResource ContextMenu.Background}"/>
        <Setter Property = "Foreground" 
                Value="{DynamicResource ContextMenu.Foreground}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type MenuItem}">
                    <Border x:Name="Bd" Padding="17,0,17,0"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}" 
                            Background="{TemplateBinding Background}" 
                            SnapsToDevicePixels="True">
                        <ContentPresenter x:Name="ContentPresenter" 
                                          Content="{TemplateBinding Header}" 
                                          Grid.Column="1" ContentSource="Header" 
                                          Margin="{TemplateBinding Padding}" 
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsHighlighted" Value="True">
                        <Setter Property="Background" 
                                Value="{DynamicResource ContextMenu.MenuItemHover.Background}"/>
                        <Setter Property="BorderBrush" TargetName="Bd" 
                                Value="{DynamicResource ContextMenu.MenuItemHover.Border}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Missing icons with the correct theme As seen here, the colors are correct, but the icon is missing.

If I remove the BasedOn and my theme I get the icons, but all the colors are of course wrong. Icons with no theme

How do I make them play nice and have the colors that I want AND the icons?

0

There are 0 answers