WPF中MenuItem设置ItemContainerStyle后自身Style属性不生效问题

在ContextMenu中定义了两个MenuItem：

• "Menu 1"：包含子菜单，应用了MenuItemStyle1，同时设置ItemContainerStyle为MenuItemStyle2
• "Menu 2"：单级菜单，仅应用MenuItemStyle1

两个菜单都使用了包含Background（红色）和Foreground（浅绿）设置的MenuItemStyle1，但运行后只有"Menu 2"样式符合预期，"Menu 1"的Foreground未生效，其子菜单的Foreground（蓝色）正常显示。尝试给样式添加x:Shared=False无效，需要解决父菜单自身样式的设置问题。

View.xaml #

<contextMenuButton:ContextMenuButton Grid.Column="0" 
                                     VerticalAlignment="Top" 
                                     HorizontalAlignment="Right"
                                     Background ="Transparent" 
                                     Margin="0, 0, 150, 0"
                                     BorderThickness="0" 
                                     Foreground ="Chocolate" 
                                     FontSize="13">
    <contextMenuButton:ContextMenuButton.Content>
        <TextBlock Text="Menu Button" />
    </contextMenuButton:ContextMenuButton.Content>
    <contextMenuButton:ContextMenuButton.Menu >
        <ContextMenu Style="{StaticResource ContextMenuStyle1}">
            <MenuItem Header="Menu 1"
                      Style="{StaticResource MenuItemStyle1}"
                      ItemContainerStyle="{StaticResource MenuItemStyle2}"
                      ItemsSource="{StaticResource SubMenuItems1}"/>
            <MenuItem Header="Menu 2"
                      Style="{StaticResource MenuItemStyle1}"/>
        </ContextMenu>
    </contextMenuButton:ContextMenuButton.Menu>
</contextMenuButton:ContextMenuButton>

ResourceDictionary.xaml #

<Style TargetType="ContextMenu"
       x:Key="ContextMenuStyle1">
    <Setter Property="Placement"
            Value="Bottom" />
</Style>
<Style x:Key="MenuItemStyle1" TargetType="MenuItem">
    <Setter Property="Foreground"
            Value="LightGreen"/>
    <Setter Property="Background"
            Value="Red"/>
</Style>
<Style x:Key="MenuItemStyle2" TargetType="MenuItem">
    <Setter Property="Foreground"
            Value="Blue"/>
</Style>
<collections:ArrayList x:Key="SubMenuItems1" >
    <MenuItem Header="First"/>
    <MenuItem Header="Second"/>
    <MenuItem Header="Third"/>
</collections:ArrayList>

问题根源在于：带有子菜单的MenuItem的默认ControlTemplate中，Header文本的Foreground会被模板内的触发器或绑定逻辑覆盖，导致直接设置的Foreground无法生效（单级MenuItem的模板逻辑不同，所以样式正常）。

可以通过以下两种方式解决：

方式1：显式设置HeaderTemplate #

修改MenuItemStyle1，为Header指定自定义模板，直接控制文本的Foreground：

<Style x:Key="MenuItemStyle1" TargetType="MenuItem">
    <Setter Property="Foreground" Value="LightGreen"/>
    <Setter Property="Background" Value="Red"/>
    <!-- 添加HeaderTemplate设置，确保Header文本使用指定的Foreground -->
    <Setter Property="HeaderTemplate">
        <Setter.Value>
            <DataTemplate>
                <TextBlock Text="{Binding}" Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=MenuItem}}"/>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

这种方式通过绑定到MenuItem自身的Foreground属性，既保证样式统一，又避免模板逻辑的覆盖。

方式2：重写MenuItem的ControlTemplate（彻底解决模板冲突） #

如果需要更深度的样式定制，可以重写MenuItem的ControlTemplate，确保Header部分的Foreground直接绑定到MenuItem的Foreground属性，不受默认触发器影响。示例简化模板：

<Style x:Key="MenuItemStyle1" TargetType="MenuItem">
    <Setter Property="Foreground" Value="LightGreen"/>
    <Setter Property="Background" Value="Red"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="MenuItem">
                <Border Background="{TemplateBinding Background}" Padding="5">
                    <StackPanel Orientation="Horizontal">
                        <!-- 绑定Header文本的Foreground到MenuItem的Foreground -->
                        <ContentPresenter Content="{TemplateBinding Header}" Foreground="{TemplateBinding Foreground}"/>
                        <!-- 子菜单展开箭头 -->
                        <Path x:Name="Arrow" Visibility="Collapsed" Margin="5 0 0 0" Data="M0,0L4,4L0,8Z" Fill="{TemplateBinding Foreground}"/>
                    </StackPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <!-- 显示子菜单箭头 -->
                    <Trigger Property="HasItems" Value="True">
                        <Setter TargetName="Arrow" Property="Visibility" Value="Visible"/>
                    </Trigger>
                    <!-- 鼠标悬停样式（按需添加） -->
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#FFE5F1FB"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这种方式完全自定义了MenuItem的外观，彻底摆脱默认模板的限制，适合需要复杂样式的场景。

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