Change Background color of MenuItem on MouseOver

Question

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

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?

Fletcherfletcherism

Does this help? #13784205 – Bonanza

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

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>

Ainsworth

This helped me resolving my issue with a contextmenu styling here: #51855818 and give me a lot better understanding as to why this does not work - thanks for the explaination. – Portulaca

This code drops both the icon and input gesture. – Renn

@Renn I'm guessing the default ControlTemplate for a MenuItem in WPF has changed over the years :). You can always grab the default ControlTemplate as it stands today and override it similarly – Ainsworth

ALL...AFTER...NOON I've been messing with IsMouseOver and IsFocused and pulling chunks of my hair out. Thank you SOOOOO much!!! – Jevons

Answer 2

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
    Header="_File"
    Style="{StaticResource MenuItemStyle}">

Tiddly

Doesn't work.... – Coriss