WPF MenuItem MouseOver does not change the background color

Question

As shown in the snapshot below, the style I used in my following XAML successfully changed the default background and foreground color of menu items to blue and white respectively. But on mouse over, it does not change the background color of the MenuItem to light blue (instead, it keeps the default color of mouse over). What I may be missing here, and how can we fix the issue? I tried solutions to this and this post but still no luck.

Snapshot of the menu

<Menu>
    <MenuItem Header="_File" Background="{DynamicResource MahApps.Brushes.Accent}" Width="32" Height="30">
        <MenuItem.Resources>
        <Style BasedOn="{StaticResource MahApps.Styles.MenuItem}" TargetType="MenuItem">
            <Setter Property="Background" Value="{StaticResource MahApps.Brushes.Accent}"/>
            <Setter Property="Foreground" Value="{StaticResource MahApps.Brushes.IdealForeground}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type MenuItem}">
                        <Grid Background="{TemplateBinding Background}">
                            <MenuItem Header="{TemplateBinding Header}" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="{StaticResource MahApps.Brushes.Badged.Background}"/>
                            </Trigger>
                            </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
                </Setter>
            </Style>
        </MenuItem.Resources>
        <MenuItem Header="_New" />
        <MenuItem Header="_Open" />
        <MenuItem Header="_Save" />
        <Separator />
        <MenuItem Header="_Exit" />
    </MenuItem>
</Menu>

UPDATE

I have uploaded this very basic WPF sample project here - in case someone wants to test his/her suggestion. This file upload link will expire in 30 days.

Genusatplay Genusatplay · Accepted Answer · 2021-05-31T06:08:19

You have two ways:

Not use <MenuItem Header="{TemplateBinding Header}" /> in template and use custom template.
If you change ControlTemplate like this:

<mah:MetroWindow.Resources>
    <ControlTemplate x:Key="MenuItemTemplate"
                     TargetType="{x:Type MenuItem}">
        <Grid Background="{TemplateBinding Background}">
            <TextBlock Text="{TemplateBinding Header}"/>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="{StaticResource MahApps.Brushes.Badged.Background}"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    
    <Style BasedOn="{StaticResource MahApps.Styles.MenuItem}" 
           TargetType="MenuItem"
           x:Key="MenuStyle">
        <Setter Property="Background" Value="{StaticResource MahApps.Brushes.Accent}"/>
        <Setter Property="Foreground" Value="{StaticResource MahApps.Brushes.IdealForeground}"/>        
    </Style>    
    
</mah:MetroWindow.Resources>

<Grid>
    <Menu>
        <MenuItem Header="_File"
                  Background="{DynamicResource MahApps.Brushes.Accent4}"
                  Width="60"
                  Height="30">
            <MenuItem.Resources>
                <Style TargetType="{x:Type MenuItem}" BasedOn="{StaticResource MenuStyle}"/>
            </MenuItem.Resources>
            <MenuItem Header="_New" Template="{StaticResource MenuItemTemplate}"/>
            <MenuItem Header="_Open" Template="{StaticResource MenuItemTemplate}"/>
            <MenuItem Header="_Save" Template="{StaticResource MenuItemTemplate}"/>
            <Separator />
            <MenuItem Header="_Exit" Template="{StaticResource MenuItemTemplate}" />
        </MenuItem>
    </Menu>
</Grid>

You will see the background change on Mouse over

Use default template, but customize mouse over color. Define SelectionFill brush in resources. If you need setup color for application use Application ResourceDictionary
Apply MenuStyle to subitems _File

<mah:MetroWindow.Resources>
    <SolidColorBrush x:Key="MahApps.Brushes.MenuItem.SelectionFill" Color="White" />
    
    <Style BasedOn="{StaticResource MahApps.Styles.MenuItem}" 
           TargetType="MenuItem"
           x:Key="MenuStyle">
        <Setter Property="Background" Value="{StaticResource MahApps.Brushes.Accent}"/>
        <Setter Property="Foreground" Value="{StaticResource MahApps.Brushes.IdealForeground}"/>        
    </Style>
</mah:MetroWindow.Resources>

<Grid>
    <Menu>
        <MenuItem Header="_File"
                  Background="{DynamicResource MahApps.Brushes.Accent2}"
                  Width="60"
                  Height="30">
            <MenuItem.Resources>
                <Style TargetType="{x:Type MenuItem}" BasedOn="{StaticResource MenuStyle}" />
            </MenuItem.Resources>
            <MenuItem Header="_New" />
            <MenuItem Header="_Open"/>
            <MenuItem Header="_Save" />
            <Separator />
            <MenuItem Header="_Exit" />
        </MenuItem>
    </Menu>
</Grid>

You can check MenuItem style here
Trigger IsHighlighted change selection style.

<Trigger Property="IsHighlighted" Value="True">
   <Setter TargetName="Bg" Property="Fill" Value="{DynamicResource MahApps.Brushes.MenuItem.SelectionFill}" />
   <Setter TargetName="Bg" Property="Stroke" Value="{DynamicResource MahApps.Brushes.MenuItem.SelectionStroke}" />
</Trigger>

WPF MenuItem MouseOver does not change the background color

1 Answers