wpf 按钮背景悬停颜色

wpf button background hover color

提问by bio595

I'm trying to change the background colour of a button's style in xaml on hover This is my current approach, but it doesn't work. The default hover colour is being used

我正在尝试在悬停时更改 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>

I've seen other solutions that say that you need to override the Control template to achieve this, but those solutions also require you define the border and the content as well which seems unnecessary. What is the minimal approach to defining a hover state in Xaml?

我已经看到其他解决方案说您需要覆盖 Control 模板才能实现这一点，但这些解决方案还要求您定义边框和内容，这似乎是不必要的。在 Xaml 中定义悬停状态的最小方法是什么？

回答by Ravuthasamy

I have created simple style based button based on your requirement,

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

XAML

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>

回答by Athari

Let's look at the template of the default button style for Aero theme:

我们来看看 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>

As you can see, the mouse-over and pressed colors are defined as bindings on the ButtonChrome's properties RenderMouseOverand RenderPressed. The way ButtonChromeis designed, they take priority over any values from the Backgroundproperty. Therefore, unfortunately, the only way to override background color of a clicked or highlighted button is to override its template.

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