【问题标题】:Auto hover color for buttons based on their Background color基于背景颜色的按钮的自动悬停颜色
【发布时间】:2013-11-21 06:24:51
【问题描述】:

我用谷歌搜索了很多,但我没有发现任何关于这种情况的信息。

我有几个平面Buttons 具有不同的Background 颜色,但悬停颜色对于所有这些都是相同的!我希望每个Button 都有基于其背景的自己的悬停颜色,例如变亮一点。

我尝试过制作自定义样式,并减少了IsMouseOver 触发器中的Opacity,但这不是我想要的,因为它还会影响按钮的内容,而不仅仅是背景颜色!

Win32 C# 应用程序有一个 Flat Appearance 属性,可以自动完成这项工作。当您为BackColor 选择颜色并将按钮设置为平面时,它会处理所有状态颜色(悬停颜色、禁用颜色...),但是我不知道如何在 WPF 中执行此操作。

提前谢谢你

【问题讨论】:

    标签: c# wpf button styles


    【解决方案1】:
    the hover color is the same for all of them!
    

    这可能是因为在你Button的风格中,当IsMouseOverTrue时,你有一个Background刷。

    because it also affects the content of the button and not only the background color
    

    这可能是因为当您正在制作动画的面板(可能是Border)也是内容控件的父级时(例如ContentPresenterContentControl),所以此内容控件的Opaciy 也是受影响。

    要解决这些问题,您只需在与内容控件相同的级别创建一些视觉元素(例如RectanglesBorders),并根据激活的触发器对其进行动画处理。

    这是一个简单的例子。

    <Window.Resources>
        <Style x:Key="FocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
        <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
        <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
        <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
        <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FF737B7F"/>
        <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
        <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
        <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
        <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
        <Style x:Key="MyButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
            <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="4"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid SnapsToDevicePixels="true">
                            <Rectangle x:Name="BackgroundVisual" Fill="{TemplateBinding Background}"/>
                            <Rectangle x:Name="PressedVisual" Fill="{DynamicResource Button.Pressed.Background}" Opacity="0"/>
                            <Rectangle x:Name="DisabledVisual" Fill="{DynamicResource Button.Disabled.Background}" Opacity="0"/>
                            <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsDefaulted" Value="true"/>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Opacity" TargetName="BackgroundVisual" Value="0.6"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Opacity" TargetName="PressedVisual" Value="1"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                                <Setter Property="Opacity" TargetName="DisabledVisual" Value="1"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderThickness" Value="0"/>
        </Style>
    </Window.Resources>
    

    这是样式的外观。

    希望这会有所帮助! :)

    【讨论】:

      【解决方案2】:

      看看这个:

      http://learnwpf.com/post/2006/03/06/How-do-I-change-an-items-appearance-on-mouseover-in-WPF.aspx

      对于背景,您可以简单地设置“背景”属性而不是设置“位图效果”属性。

      希望对你有帮助

      问候

      【讨论】:

      • 感谢您的回复,但如上所述,我应该将什么设置为 Background 属性以使其更轻?!玛努恩 :)
      • 使用 如果您想使用相同的浅色,请使用 HexValue:类似于 希望对您有所帮助,
      • 那么,如果我的背景是绿色的,并且我希望鼠标悬停它时它会变亮怎么办?我想要一个一般规则。当您希望所有按钮在悬停事件上具有黄色背景时,您的方法才有效!正如我之前提到的,我希望当前的背景颜色(不管它的颜色)变得更亮一点......如果是绿色,那么得到 LightGreen,如果是蓝色,那么得到 LightBlue......
      • 很久以前我做过这样的事情,但不是为了按钮,也许它对你有帮助,我使用 ResourceDictionary 和不同的 x:Key,我搜索它,只找到这个:stackoverflow.com/questions/16530184/…,请注意,“Sonhja”提交的检查答案希望对您有所帮助,否则我认为我不是回答这个问题的合适人选
      • 非常感谢您的帮助和关注。我刚刚检查了它,不幸的是它不是我正在寻找的。无论如何,我非常感谢您的关心和帮助......
      猜你喜欢
      • 2013-06-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-11-30
      • 2017-04-12
      • 2014-07-14
      • 2015-03-29
      • 1970-01-01
      相关资源
      最近更新 更多