WPF MenuItem MouseOver不改变背景色

Question

如下图所示，我在下面的XAML中使用的style成功地将菜单项的默认背景和前景色分别更改为蓝色和白色。但是在鼠标悬停时，它不会将 MenuItem 的 background color 更改为浅蓝色（相反，它保持鼠标悬停的默认颜色）。我可能在这里遗漏了什么，我们如何解决这个问题？我尝试了 this and this post 的解决方案，但仍然没有成功。

菜单快照

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

更新

我已经上传了这个非常基本的 WPF 示例项目 here - 以防有人想测试 his/her 建议。此文件上传 link 将在 30 天后过期。

Answer 1

你有两种方法：

不在模板中使用 <MenuItem Header="{TemplateBinding Header}" />，而是使用自定义模板。
如果您像这样更改 ControlTemplate：

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

您将在鼠标悬停时看到背景变化

使用默认模板，但自定义鼠标悬停颜色。定义SelectionFill 刷入资源。如果您需要为应用程序设置颜色，请使用 Application ResourceDictionary
将 MenuStyle 应用于子项目 _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>

您可以检查 MenuItem 样式 here
触发器 IsHighlighted 更改选择样式。

<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不改变背景色

WPF MenuItem MouseOver does not change the background color

wpf

menuitem

mahapps.metro