19

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

enter image description here

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?

pk_code
  • 2,608
  • 1
  • 29
  • 33
  • Does this help? http://stackoverflow.com/questions/13783705/how-to-set-foreground-and-background-colors-on-a-wpf-menu-control – dytori Jan 20 '16 at 01:00

2 Answers2

30

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>
Rowbear
  • 1,619
  • 12
  • 15
  • 1
    This helped me resolving my issue with a contextmenu styling here: https://stackoverflow.com/questions/51855318/avalondock-document-menu-dropdown-theming-colors and give me a lot better understanding as to why this does not work - thanks for the explaination. – user8276908 Nov 04 '18 at 01:42
  • 1
    This code drops both the icon and input gesture. – Mike Sep 21 '21 at 19:35
  • @Mike 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 – Rowbear Sep 23 '21 at 04:24
1

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}">
Suplanus
  • 1,523
  • 16
  • 30