wpf button background hover color

Question

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

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

Answer 1

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

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>

Answer 2

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

<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 RenderMouseOver and RenderPressed. The way ButtonChrome is designed, they take priority over any values from the Background property. Therefore, unfortunately, the only way to override background color of a clicked or highlighted button is to override its template.