如何修改WPF ContextMenu菜单项的鼠标悬停背景色？

问题描述 #

自定义ContextMenu的ControlTemplate后，发现即使菜单项是TextBlock，鼠标悬停时背景仍会变成默认蓝色，需要修改为自定义颜色。

自定义的ContextMenu样式代码：

<Style TargetType="{x:Type ContextMenu}">
        <Setter Property="SnapsToDevicePixels"
          Value="True" />
        <Setter Property="Grid.IsSharedSizeScope"
          Value="true" />
        <Setter Property="HasDropShadow"
          Value="True" />
        <Setter Property="Background" Value="White"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ContextMenu}">
                    <Border x:Name="Border" Margin="10" Background="{TemplateBinding Background}"
                                BorderThickness="0" BorderBrush="{Binding BorderBrush}" CornerRadius="2">
                        <Border.Effect>
                            <DropShadowEffect Color="Gray" BlurRadius="10" Direction="-90" Opacity="0.3"
                              RenderingBias="Quality" ShadowDepth="2" />
                        </Border.Effect>
                        <StackPanel IsItemsHost="True"
                      KeyboardNavigation.DirectionalNavigation="Cycle" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

菜单项代码示例：

<Grid.ContextMenu>
  <ContextMenu>
      <TextBlock>123</TextBlock>
  </ContextMenu>
</Grid.ContextMenu>

原因分析 #

WPF的ContextMenu本质是ItemsControl，当你添加非MenuItem类型的元素（比如TextBlock）时，它会自动将元素包装成MenuItem容器。你看到的蓝色背景是默认MenuItem的鼠标悬停样式，而非TextBlock本身的样式。

解决方案 #

要修改悬停背景色，需要自定义MenuItem的样式，覆盖其默认的悬停状态设置，以下提供两种方式：

方式1：完全重写MenuItem模板（自定义程度高） #

<Style TargetType="{x:Type MenuItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type MenuItem}">
                <Border x:Name="MenuItemBorder" 
                        Background="{TemplateBinding Background}"
                        Padding="6,2" 
                        SnapsToDevicePixels="True">
                    <ContentPresenter Content="{TemplateBinding Header}"
                                      HorizontalAlignment="Left"
                                      VerticalAlignment="Center" />
                </Border>
                <ControlTemplate.Triggers>
                    <!-- 鼠标悬停时的背景色 -->
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="MenuItemBorder" 
                                Property="Background" 
                                Value="#E5F2FF" /> <!-- 自定义悬停背景色 -->
                    </Trigger>
                    <!-- 可选：选中状态的背景色 -->
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="MenuItemBorder" 
                                Property="Background" 
                                Value="#CCE5FF" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

方式2：仅覆盖悬停触发器（轻量修改） #

如果不需要完全重写模板，仅修改悬停背景色，可以直接添加触发器：

<Style TargetType="{x:Type MenuItem}">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="#E5F2FF" /> <!-- 自定义颜色 -->
            <Setter Property="BorderBrush" Value="Transparent" /> <!-- 移除默认边框 -->
        </Trigger>
    </Style.Triggers>
</Style>

将上述MenuItem样式放在ContextMenu所在的Resources中（比如Window.Resources或UserControl.Resources），即可全局或局部生效。

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