WPF自定义MenuItem模板：图标显示与子菜单不显示问题排查

核心原因 #

你遇到的子菜单不显示问题，基本是因为合并样式时删掉了MenuItem默认模板里负责子菜单弹出的关键元素——比如没保留Popup容器、子项的ItemsPresenter，或者移除了触发子菜单展开的IsSubmenuOpen相关触发器。

具体排查与修复步骤 #

1. 检查自定义模板里的子菜单元素 #

默认的MenuItem模板自带Popup用于承载子菜单，还有ItemsPresenter显示子项。如果你的自定义模板里没加这俩，子菜单肯定出不来。

必须保留的关键结构大概是这样：

<ControlTemplate TargetType="{x:Type MenuItem}">
    <Border x:Name="Border" Background="{TemplateBinding Background}">
        <!-- 这里放你的图标显示区域 -->
        <Image Source="{TemplateBinding Icon}" Width="16" Height="16"/>
        
        <!-- 子菜单容器：不能删 -->
        <Popup x:Name="PART_Popup" Placement="Bottom" IsOpen="{TemplateBinding IsSubmenuOpen}">
            <Border x:Name="SubmenuBorder">
                <ItemsPresenter x:Name="ItemsPresenter" />
            </Border>
        </Popup>
    </Border>

    <!-- 必须保留IsSubmenuOpen的触发器，控制Popup显示 -->
    <ControlTemplate.Triggers>
        <Trigger Property="IsSubmenuOpen" Value="True">
            <Setter TargetName="PART_Popup" Property="IsOpen" Value="True"/>
        </Trigger>
        <!-- 你的背景、鼠标悬停等触发器 -->
    </ControlTemplate.Triggers>
</ControlTemplate>

2. 用BasedOn继承默认样式，别完全重写 #

如果是自定义样式，尽量基于默认MenuItem样式扩展，而不是直接写全新模板：

<Style TargetType="{x:Type MenuItem}" BasedOn="{StaticResource {x:Type MenuItem}}">
    <Setter Property="Background" Value="#你的自定义颜色"/>
    <!-- 只修改需要的部分，比如图标显示、背景，保留默认的子菜单逻辑 -->
</Style>

要是必须完全自定义模板，就得把默认模板里的子菜单相关元素全抄过来，再改背景和图标部分。

3. 别丢了子菜单的交互触发器 #

默认情况下，鼠标悬停或点击根菜单项会触发IsSubmenuOpen设为True，如果你的自定义模板里删掉了这些交互逻辑（比如MouseEnter事件绑定、IsMouseOver触发器），子菜单就不会展开。

4. 图标和背景样式的正确合并方式 #

不要直接替换整个Template，而是在默认模板基础上改：

• 找到默认模板里的背景Border，修改它的Background绑定
• 调整图标显示的Image控件，确保Source绑定到Icon属性
• 原封不动保留子菜单的Popup、ItemsPresenter和相关触发器

可直接用的修复示例（WPF） #

<Window.Resources>
    <Style x:Key="IconMenuStyle" TargetType="{x:Type MenuItem}" BasedOn="{StaticResource {x:Type MenuItem}}">
        <!-- 隐藏根菜单的Header -->
        <Setter Property="Header" Value=""/>
        <Setter Property="Background" Value="#F5F5F5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type MenuItem}">
                    <Border x:Name="MainBorder" 
                            Background="{TemplateBinding Background}"
                            Padding="4"
                            SnapsToDevicePixels="True">
                        <!-- 图标显示 -->
                        <Image Source="{TemplateBinding Icon}" Width="16" Height="16"/>
                        
                        <!-- 子菜单容器 -->
                        <Popup x:Name="PART_Popup" 
                               Placement="Bottom"
                               AllowsTransparency="True"
                               IsOpen="{TemplateBinding IsSubmenuOpen}"
                               Focusable="False">
                            <Border x:Name="SubmenuBorder" 
                                    Background="#FFFFFF" 
                                    BorderBrush="#E0E0E0" 
                                    BorderThickness="1">
                                <ScrollViewer CanContentScroll="True">
                                    <ItemsPresenter/>
                                </ScrollViewer>
                            </Border>
                        </Popup>
                    </Border>

                    <ControlTemplate.Triggers>
                        <!-- 鼠标悬停时的背景变化 -->
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="MainBorder" Property="Background" Value="#E8F4FF"/>
                        </Trigger>
                        <!-- 子菜单展开触发器 -->
                        <Trigger Property="IsSubmenuOpen" Value="True">
                            <Setter TargetName="PART_Popup" Property="IsOpen" Value="True"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<!-- 使用示例 -->
<Menu>
    <MenuItem Style="{StaticResource IconMenuStyle}" Icon="/Assets/menu_icon.png">
        <MenuItem Header="New1"/>
        <MenuItem Header="Open1"/>
        <MenuItem Header="Close1"/>
    </MenuItem>
</Menu>

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