在 MouseOver 上更改 MenuItem 的背景颜色答案

【问题标题】：Change Background color of MenuItem on MouseOver在 MouseOver 上更改 MenuItem 的背景颜色
【发布时间】：2016-04-25 15:00:51
【问题描述】：

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

风格：

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

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

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

【问题讨论】：

这有帮助吗？ stackoverflow.com/questions/13783705/…

标签： wpf xaml wpf-controls

【解决方案1】：

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

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

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

【讨论】：

这帮助我解决了我的上下文菜单样式问题：stackoverflow.com/questions/51855318/… 并让我更好地理解为什么这不起作用 - 感谢您的解释。
此代码同时删除图标和输入手势。
@Mike 我猜 WPF 中 MenuItem 的默认 ControlTemplate 多年来已经改变:)。您可以随时获取当前的默认 ControlTemplate 并以类似方式覆盖它

【解决方案2】：

我简化了这个例子。

在资源中定义：

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

然后在 MenuItem 中使用它：

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

【讨论】：