Wpf button background color

Question

I am trying to change the background color of a button style in xaml to hover. This is my current approach, but it does not work. Default hover color 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 saw other solutions that say you need to override the control pattern for this, but these solutions also require you to define the border and content, which seems unnecessary. What is the minimal approach to determining the state of freezes in Xaml?

Answer 1

I created a 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

Take a look at the default button style template for the 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, mouse colors and pressed colors are defined as bindings in the ButtonChrome RenderMouseOver and RenderPressed . The ButtonChrome method ButtonChrome developed; they take precedence over any values ​​from the Background property. Therefore, unfortunately, the only way to override the background color of a pressed or highlighted button is to override its template.