WPF MenuItem MouseOver 不会改变背景颜色 [英] WPF MenuItem MouseOver does not change the background color

查看:150
本文介绍了WPF MenuItem MouseOver 不会改变背景颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如下面的快照所示,我在下面的 XAML 中使用的 style 成功地将菜单项的默认背景和前景色分别更改为蓝色和白色.但是在鼠标悬停时,它不会将 MenuItembackground color 更改为浅蓝色(而是保持鼠标悬停的默认颜色).我在这里可能缺少什么,我们如何解决这个问题?我尝试了

<MenuItem Header="_File";背景={DynamicResource MahApps.Brushes.Accent}";宽度=32"高度=30"><MenuItem.Resources><Style BasedOn="{StaticResource MahApps.Styles.MenuItem}";目标类型=菜单项"><Setter 属性 =背景"值={StaticResource MahApps.Brushes.Accent}"/><Setter 属性 =前景"值={StaticResource MahApps.Brushes.IdealForeground}"/><Setter 属性 =模板"><Setter.Value><ControlTemplate TargetType="{x:Type MenuItem}"><网格背景={模板绑定背景}"><MenuItem Header="{TemplateBinding Header}";/></网格><ControlTemplate.Triggers><触发器属性=IsMouseOver"值=真"><Setter 属性 =背景"值={StaticResource MahApps.Brushes.Badged.Background}"/></触发器></ControlTemplate.Triggers></控制模板></Setter.Value></Setter></风格></MenuItem.Resources><MenuItem Header="_New";/><MenuItem Header="_Open";/><MenuItem Header="_Save";/><分隔符/><MenuItem Header="_Exit";/></菜单项></菜单>

更新

我已经在这里上传了这个非常基本的 WPF 示例项目 - 以防有人想测试他/她的建议.此文件上传链接将在 30 天后过期.

解决方案

你有两种方法:

  • 不使用 在模板中并使用自定义模板.
    如果您像这样更改 ControlTemplate:

<ControlTemplate x:Key="MenuItemTemplate";TargetType={x:Type MenuItem}"><网格背景={模板绑定背景}"><TextBlock Text="{TemplateBinding Header}"/></网格><ControlTemplate.Triggers><触发器属性=IsMouseOver"值=真"><Setter 属性 =背景"值={StaticResource MahApps.Brushes.Badged.Background}"/></触发器></ControlTemplate.Triggers></控制模板><Style BasedOn="{StaticResource MahApps.Styles.MenuItem}";目标类型=菜单项"x:Key=MenuStyle"><Setter 属性 =背景"值={StaticResource MahApps.Brushes.Accent}"/><Setter 属性 =前景";值={StaticResource MahApps.Brushes.IdealForeground}"/></风格></mah:MetroWindow.Resources><网格><菜单><MenuItem Header="_File";背景={DynamicResource MahApps.Brushes.Accent4}";宽度=60"高度=30"><MenuItem.Resources><Style TargetType="{x:Type MenuItem}";基于={StaticResource MenuStyle}"/></MenuItem.Resources><MenuItem Header="_New";模板={StaticResource MenuItemTemplate}"/><MenuItem Header="_Open";模板={StaticResource MenuItemTemplate}"/><MenuItem Header="_Save";模板={StaticResource MenuItemTemplate}"/><分隔符/><MenuItem Header="_Exit";模板={StaticResource MenuItemTemplate}";/></菜单项></菜单></网格>

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

  • 使用默认模板,但自定义鼠标悬停颜色.在资源中定义 SelectionFill 画笔.如果您需要为应用程序设置颜色,请使用 应用资源字典
    MenuStyle 应用到子项 _File

<SolidColorBrush x:Key=MahApps.Brushes.MenuItem.SelectionFill"颜色=白色"/><Style BasedOn="{StaticResource MahApps.Styles.MenuItem}";目标类型=菜单项"x:Key=MenuStyle"><Setter 属性 =背景"值={StaticResource MahApps.Brushes.Accent}"/><Setter 属性 =前景";值={StaticResource MahApps.Brushes.IdealForeground}"/></风格></mah:MetroWindow.Resources><网格><菜单><MenuItem Header="_File";背景={DynamicResource MahApps.Brushes.Accent2}";宽度=60"高度=30"><MenuItem.Resources><Style TargetType="{x:Type MenuItem}";基于={StaticResource MenuStyle}";/></MenuItem.Resources><MenuItem Header="_New";/><MenuItem Header="_Open"/><MenuItem Header="_Save";/><分隔符/><MenuItem Header="_Exit";/></菜单项></菜单></网格>

您可以查看 MenuItem 样式 这里
触发 IsHighlighted 更改选择样式.

<Setter TargetName="Bg";属性=填充"值={DynamicResource MahApps.Brushes.MenuItem.SelectionFill}";/><Setter TargetName="Bg";属性=中风"值={DynamicResource MahApps.Brushes.MenuItem.SelectionStroke}";/></触发器>

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.

解决方案

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 不会改变背景颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆