在MouseOver上更改MenuItem的背景颜色

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

我想在mouseOver上更改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,

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

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

任何人都可以告诉我如何在鼠标上获得背景颜色黄色？

1 个解决方案

#1

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”为true时应用颜色的触发器。 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>