WPF自定义Context Menu模板后MenuItem图标消失问题求助

为ContextMenu和MenuItem创建了自定义模板以修改背景、文本及高亮颜色，通过BasedOn引用主题资源字典中的模板后，图标消失。图标需在main.xaml中添加（该文件引用了存储图标和主题的资源字典）。应用主题后颜色显示正常，但图标缺失；移除BasedOn和主题后图标显示正常，但颜色不符合需求。

现有代码 #

main.xaml（ContextMenu标签内） #

<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（资源字典） #

<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>

解决方案 #

问题出在自定义的ControlTemplate中没有包含用于呈现Icon的元素，WPF不会自动渲染未在模板中定义的属性内容。只需修改theme.xaml中的模板，添加Icon的呈现容器即可：

修改后的theme.xaml代码 #

<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="4,0,17,0"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}" 
                        Background="{TemplateBinding Background}" 
                        SnapsToDevicePixels="True">
                    <!-- 使用Grid布局同时容纳Icon和Header -->
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <!-- 新增：Icon的ContentPresenter -->
                        <ContentPresenter x:Name="IconPresenter" 
                                          Content="{TemplateBinding Icon}"
                                          ContentSource="Icon"
                                          Margin="0,0,8,0"
                                          VerticalAlignment="Center"/>
                        <!-- 原有的Header ContentPresenter -->
                        <ContentPresenter x:Name="ContentPresenter" 
                                          Grid.Column="1"
                                          Content="{TemplateBinding Header}" 
                                          ContentSource="Header" 
                                          Margin="{TemplateBinding Padding}" 
                                          VerticalAlignment="Center"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Grid>
                </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>
                    <!-- 可选：无Icon时隐藏占位区域 -->
                    <Trigger Property="Icon" Value="{x:Null}">
                        <Setter TargetName="IconPresenter" Property="Visibility" Value="Collapsed"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

关键修改说明 #

1. 布局容器调整：将Border内的单一ContentPresenter替换为Grid，分为两列分别承载Icon和Header内容。
2. 添加Icon呈现元素：新增IconPresenter，通过TemplateBinding绑定MenuItem的Icon属性，确保设置的图标能被渲染。
3. 布局优化：调整Border的Padding和IconPresenter的Margin，让图标与文本间距合理；添加触发器，无Icon时隐藏占位区域。
4. 保留原有样式逻辑：原有的背景、前景及高亮触发器完全保留，确保自定义颜色效果正常。

修改后，main.xaml的代码无需改动，即可同时实现自定义颜色样式和图标显示。

内容的提问来源于stack exchange，提问作者kdglad