在鼠标悬停时更改 MenuItem 的背景颜色 [英] Change Background color of MenuItem on MouseOver

问题描述

我想在 mouseOver 处更改 MenuItem 的默认背景颜色.这是我的 xaml 代码:

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

风格:

<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>

控制:

<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>

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

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?

推荐答案

您的样式未应用，因为 MenuItem 的默认控件模板有一个触发器，该触发器在IsHighlighted"为 true 时应用颜色.ControlTemplate 的触发器始终优先于样式的触发器.

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.

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

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>

这篇关于在鼠标悬停时更改 MenuItem 的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！