wpf 在鼠标悬停时更改 MenuItem 的背景颜色

Change Background color of MenuItem on MouseOver

提问by pk_code

I want to change the default background color of a MenuItem at mouseOver. Here is my xaml code:

我想在鼠标悬停时更改 MenuItem 的默认背景颜色。这是我的 xaml 代码：

Style :

风格 ：

<Style TargetType="{x:Type MenuItem}" x:Key="MenuItemStyle" >
        <Setter Property="BorderBrush" Value="White"></Setter>
        <Setter Property="BorderThickness" Value="0,0,0,5"></Setter>
        <Setter Property="Background" Value="#0264AD"></Setter>
        <Setter Property="Foreground" Value="White"></Setter>
        <Setter Property="FontSize" Value="12"></Setter>
        <Setter Property="FontFamily" Value="Arial"></Setter>
        <Setter Property="FontWeight" Value="Bold"></Setter>
        <Setter Property="Margin" Value="-5,0,0,0"></Setter>
        <Setter Property="Padding" Value="0,12,0,12"></Setter>

        <Style.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Foreground" Value="LightGray"></Setter>
                <Setter Property="Background" Value="#0264AD"></Setter>
            </Trigger>
            <Trigger Property="IsMouseOver"  Value="True">
                <Setter Property="Foreground" Value="#0264AD"></Setter>
                <Setter Property="Background" Value="Yellow"></Setter>
            </Trigger>
        </Style.Triggers>

    </Style>

Control :

控制 ：

<ContextMenu x:Name="settingContextMenu"  Width="220" >

<MenuItem Style="{StaticResource MenuItemStyle}"        Name="CustomizeLocationNames" Click="CustomizeLocationNames_Click" >

      <MenuItem.Header>
           <TextBlock Text="Customize Location Names"                                      VerticalAlignment="Center"></TextBlock>
       </MenuItem.Header>
</MenuItem>


<MenuItem Style="{StaticResource MenuItemStyle}"  Name="ZoomRoute" Click="ZoomRoute_Click">
   <MenuItem.Header>
       <TextBlock Text="Zoom Route" VerticalAlignment="Center"></TextBlock>
   </MenuItem.Header>  
</MenuItem>


<MenuItem Style="{StaticResource MenuItemStyle}" Name="PrintRoute" Click="PrintRoute_Click">
    <MenuItem.Header>
         <TextBlock Text="Print Route" VerticalAlignment="Center" >/TextBlock>
    </MenuItem.Header>
</MenuItem>


</ContextMenu>

So I have mouse over trigger which should turn background color to yellow if mouse is over, but it is showing default light grey color as shown in snap,

所以我有鼠标悬停触发器，如果​​鼠标悬停，它应该将背景颜色变为黄色，但它显示默认的浅灰色，如 snap 所示，

Can anyone tell me how to get background color YELLOW on mouse over?

谁能告诉我如何在鼠标悬停时获得背景颜色黄色？

回答by Rowbear

Your style is not applying because the default control template of a MenuItem has a trigger that applies a color when "IsHighlighted" is true. A ControlTemplate's triggers always takes priority over a style's triggers.

您的样式未应用，因为 MenuItem 的默认控件模板具有在“IsHighlighted”为真时应用颜色的触发器。ControlTemplate 的触发器始终优先于样式的触发器。

Add this to your style setters:

将此添加到您的样式设置器中：

<Setter Property="Template">
<Setter.Value>
    <ControlTemplate TargetType="{x:Type MenuItem}">
        <Border x:Name="Bd" Padding="17,0,17,0" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" Uid="Border_38">
            <ContentPresenter x:Name="ContentPresenter"  Content="{TemplateBinding Header}" Grid.Column="1" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Uid="ContentPresenter_33"/>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsHighlighted" Value="True">
                <Setter Property="Background" TargetName="Bd" Value="Yellow"/>
                <Setter Property="BorderBrush" TargetName="Bd" Value="#FF26A0DA"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Setter.Value>
</Setter>

回答by Suplanus

I simplified the example.

我简化了这个例子。

Define this in the Resources:

在资源中定义：

<Style
    x:Key="MenuItemStyle"
    TargetType="{x:Type MenuItem}">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Foreground" Value="WhiteSmoke" />
    <Style.Triggers>
        <Trigger Property="IsHighlighted" Value="True">
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="Background" Value="WhiteSmoke" />
        </Trigger>
    </Style.Triggers>
</Style>

Then use this in the MenuItem:

然后在 MenuItem 中使用它：

<MenuItem
    Header="_File"
    Style="{StaticResource MenuItemStyle}">