【问题标题】:wpf button background hover colorwpf按钮背景悬停颜色
【发布时间】:2013-06-26 22:04:48
【问题描述】:

我正在尝试在悬停时更改 xaml 中按钮样式的背景颜色 这是我目前的方法,但它不起作用。正在使用默认的悬停颜色

<Style x:Key="AtStyle" TargetType="Button">
        <Setter Property="Background">
            <Setter.Value>
                <SolidColorBrush Color="{StaticResource AtBlue}" />
            </Setter.Value>
        </Setter>
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Padding" Value="12,6" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="FontSize" Value="18.667" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background">
                    <Setter.Value>
                        <SolidColorBrush Color="Red" />
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

我看到其他解决方案说您需要覆盖 Control 模板来实现这一点,但这些解决方案还需要您定义边框和内容,这似乎没有必要。在 Xaml 中定义悬停状态的最小方法是什么?

【问题讨论】:

    标签: wpf xaml button styles hover


    【解决方案1】:

    我根据您的要求创建了基于简单样式的按钮,

    XAML

    <Style  TargetType="Button">
      <Setter Property="Background"
              Value="Blue" />
      <Setter Property="HorizontalAlignment"
              Value="Center" />
      <Setter Property="VerticalAlignment"
              Value="Center" />
      <Setter Property="Foreground"
              Value="White" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type Button}">
            <Border x:Name="bg"
                    Background="{TemplateBinding Background}"
                    BorderThickness="2"
                    BorderBrush="White">
              <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalAlignment}" />
            </Border>
            <ControlTemplate.Triggers>
              <Trigger Property="IsMouseOver"
                       Value="True">
                <Setter Property="Background"
                        Value="Red"
                        TargetName="bg" />
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
    

    【讨论】:

    • 这种风格太简单了。它破坏了访问密钥,甚至不支持禁用状态。这也是错误的,因为ContentPresenter 上的对齐属性应该使用内容对齐属性。
    • @Athari:感谢您的建议,是的,这很简单。他们需要包括禁用和键盘焦点状态的触发器。
    【解决方案2】:

    我们来看一下 Aero 主题默认按钮样式的模板:

    <ControlTemplate TargetType="{x:Type ButtonBase}">
        <theme:ButtonChrome Name="Chrome"
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                RenderDefaulted="{TemplateBinding Button.IsDefaulted}"
                RenderMouseOver="{TemplateBinding IsMouseOver}"
                RenderPressed="{TemplateBinding IsPressed}"
                SnapsToDevicePixels="True">
            <ContentPresenter
                    Margin="{TemplateBinding Padding}"
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                    RecognizesAccessKey="True"/>
        </theme:ButtonChrome>
        <ControlTemplate.Triggers>
            <Trigger Property="IsKeyboardFocused" Value="True">
                <Setter TargetName="Chrome" Property="RenderDefaulted" Value="True"/>
            </Trigger>
            <Trigger Property="ToggleButton.IsChecked" Value="True">
                <Setter TargetName="Chrome" Property="RenderPressed" Value="True"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Foreground" Value="#ADADAD"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    

    如您所见,鼠标悬停和按下的颜色被定义为ButtonChrome 的属性RenderMouseOverRenderPressed 上的绑定。 ButtonChrome 的设计方式,它们优先于 Background 属性中的任何值。因此,不幸的是,覆盖单击或突出显示按钮的背景颜色的唯一方法是覆盖其模板。

    【讨论】:

    • 这个例子不起作用......为什么你认为这是一个比另一个更好的答案?那个正在工作......
    • @Bondye 这个答案不应该“起作用”,它应该回答“为什么”这个问题并给出如何完全解决问题的指导。接受的答案“有效”,但在数量非常有限的情况下,如果需要更复杂的东西,则无济于事。更详细的分析在我对另一个问题的评论中。 TL;DR:不要只是复制粘贴;试着去理解并自己去做。
    猜你喜欢
    • 1970-01-01
    • 2013-11-21
    • 1970-01-01
    • 1970-01-01
    • 2017-04-12
    • 2014-09-09
    • 2014-07-14
    • 2015-03-29
    • 1970-01-01
    相关资源
    最近更新 更多