XAML菜单子项丢失：自定义Blend 2017模板后主菜单可见子菜单消失

Hey there! Let's dig into why your submenu headers are disappearing after tweaking the MenuItem template in Blend 2017. From what you described, the root issue almost always boils down to missing essential elements or broken bindings in your custom MenuItemControlTemplate1.

Common Causes & Fixes #

Let's break down the most likely problems and how to fix them:

1. Your Custom Template Doesn't Include a ContentPresenter for the Header

When you build a custom MenuItem template from scratch (instead of modifying the default one), it's easy to forget the element that displays the Header text. The default MenuItem template uses a ContentPresenter bound directly to the Header property—without this, your submenu titles have no way to show up.

Fix: Add this ContentPresenter to your template, making sure the bindings are correct:

<ContentPresenter 
    Content="{TemplateBinding Header}"
    ContentTemplate="{TemplateBinding HeaderTemplate}"
    ContentStringFormat="{TemplateBinding HeaderStringFormat}"
    Margin="10,3,10,3"
    VerticalAlignment="Center"/>

This ensures the Header value from your MenuItem is properly displayed.

2. You Removed or Broke the Submenu Popup/ItemsPresenter

Submenus rely on a Popup and ItemsPresenter in the template to render child MenuItems. If your custom template doesn't include these, or their bindings are incorrect, child items (and their headers) won't appear at all.

Example of a Template That Supports Submenus:
Here's a stripped-down version of a working custom MenuItem template that preserves both header display and submenu functionality:

<ControlTemplate x:Key="MenuItemControlTemplate1" TargetType="{x:Type MenuItem}">
    <Border x:Name="templateRoot" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
        <Grid Margin="-1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <!-- Header Content Presenter -->
            <ContentPresenter 
                x:Name="Icon"
                Content="{TemplateBinding Icon}"
                ContentTemplate="{TemplateBinding IconTemplate}"
                Margin="4,0,6,0"
                VerticalAlignment="Center"
                Width="16" Height="16"/>
            <ContentPresenter 
                Grid.Column="1"
                Content="{TemplateBinding Header}"
                ContentTemplate="{TemplateBinding HeaderTemplate}"
                ContentStringFormat="{TemplateBinding HeaderStringFormat}"
                Margin="10,3,10,3"
                VerticalAlignment="Center"/>
            <!-- Submenu Popup -->
            <Popup 
                x:Name="PART_Popup"
                AllowsTransparency="True"
                Focusable="False"
                IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
                Placement="Bottom"
                PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}">
                <Border x:Name="SubMenuBorder" BorderThickness="1" BorderBrush="#FF999999" Background="#FFF0F0F0">
                    <ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
                        <!-- Container for Child MenuItems -->
                        <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
                    </ScrollViewer>
                </Border>
            </Popup>
        </Grid>
    </Border>
    <!-- Optional: Visual States for Hover/Selected -->
    <ControlTemplate.Triggers>
        <Trigger Property="IsHighlighted" Value="True">
            <Setter Property="Background" TargetName="templateRoot" Value="#FF3D95FF"/>
            <Setter Property="Foreground" Value="White"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

3. You Didn't Base Your Template on the Default One

A quick way to avoid these issues is to modify the default MenuItem template in Blend instead of starting from scratch:

• Right-click your MenuItem in the Design view
• Select Edit Template > Edit a Copy
• Name your template (like MenuItemControlTemplate1) and click OK
• Now you can tweak styles (colors, margins, etc.) without removing critical elements or bindings

Verify Your Usage #

Double-check that your MenuItem hierarchy is correctly referencing the template, just like your original code:

Your original code snippet:

<MenuItem Header="Options" Foreground="White">
  <MenuItem Header="Volume" Template="{DynamicResource MenuItemControlTemplate1}">
    <MenuItem Header="Full" Template="{DynamicResource MenuItemControlTemplate1}"/>
    <!-- ... remaining submenu items -->
</MenuItem>

As long as your template includes the necessary elements above, this should work as expected.

Final Tip #

If you're still stuck, open the default MenuItem template in Blend (via Edit Template > Edit Current if you based yours on the default) and compare it side-by-side with your custom template—you'll likely spot the missing element or broken binding right away.

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