XAML中MenuItem背景设置不生效如何解决？

根本原因 #

WPF内置的MenuItem控件模板包含默认的状态触发器（如鼠标悬浮、选中、子菜单展开状态），同时子菜单的弹出容器（Popup）内部的面板自带独立背景，不会直接继承你定义的Background属性，因此仅设置基础属性无法生效。

修改后的完整资源代码 #

替换你原有Application.Resources节点下的内容即可：

<Application.Resources>
    <SolidColorBrush x:Key="appBackgroundColour" Color="#FFD0E281"/>
    <!-- 菜单主样式 -->
    <Style TargetType="Menu" x:Key="menuStyle">
        <Setter Property="Background" Value="Aqua"/>
    </Style>
    <!-- 菜单项样式 -->
    <Style TargetType="MenuItem" x:Key="menuItemStyle">
        <Setter Property="Background" Value="Aqua"/>
        <Setter Property="BorderThickness" Value="0"/>
        <!-- 覆盖子菜单的面板背景 -->
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel Background="Aqua"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <!-- 重写控件模板覆盖默认状态样式 -->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type MenuItem}">
                    <Border x:Name="Border" Background="{TemplateBinding Background}" BorderThickness="1">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIconColumnGroup"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup"/>
                            </Grid.ColumnDefinitions>
                            <ContentPresenter x:Name="Icon" ContentSource="Icon" Margin="4,0,6,0" VerticalAlignment="Center"/>
                            <ContentPresenter Grid.Column="1" ContentSource="Header" Margin="6,0,6,0" VerticalAlignment="Center"/>
                            <Popup x:Name="PART_Popup" AllowsTransparency="True" Placement="Bottom" IsOpen="{TemplateBinding IsSubmenuOpen}" PopupAnimation="Fade">
                                <Border x:Name="SubmenuBorder" Background="Aqua" BorderThickness="1">
                                    <ScrollViewer>
                                        <ItemsPresenter/>
                                    </ScrollViewer>
                                </Border>
                            </Popup>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <!-- 鼠标悬浮状态背景 -->
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="Aqua"/>
                            <!-- 如果需要悬浮有区分可以换更深的蓝色，比如#FF00CCCC -->
                        </Trigger>
                        <!-- 选中状态背景 -->
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="Aqua"/>
                        </Trigger>
                        <!-- 子菜单展开状态背景 -->
                        <Trigger Property="IsSubmenuOpen" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="Aqua"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!-- 分割线样式，适配背景色 -->
    <Style TargetType="Separator">
        <Setter Property="Background" Value="#FF00AAAA"/>
        <Setter Property="Height" Value="1"/>
        <Setter Property="Margin" Value="2,0,2,0"/>
    </Style>
</Application.Resources>

补充说明 #

• 若需要鼠标悬浮时和普通状态有视觉区分，可将触发器中的Background值替换为更深的同色系蓝色即可。
• 上述代码已经覆盖了顶级菜单项、多层级子菜单项、子菜单弹出容器的所有背景设置，无需修改界面布局代码。

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