WPF trigger does not work as intended

Question

I want the red button to turn black when the mouse hangs over it.

<Button Content="Hover me" Grid.Column="3" Grid.Row="3"> <Button.Style> <Style TargetType="{x:Type Button}"> <Setter Property="Background" Value="Red"/> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="Black"/> </Trigger> </Style.Triggers> </Style> </Button.Style> </Button> 

However, my problem is that when I hover over the button, it turns into the default Windows style with a gradient gray appearance.

Answer 1

Try

 <Window.Resources> <Style x:Key="MyButtonStyle" TargetType="{x:Type Button}"> <Setter Property="Background" Value="Red"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <ContentPresenter x:Name="PART_Content" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" TextElement.Foreground="{TemplateBinding Foreground}"></ContentPresenter> </Border> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="Black"/> <Setter Property="Foreground" Value="White"/> </Trigger> </Style.Triggers> </Style> </Window.Resources> 

and apply custom style as follows

 <Button Content="Hover me" Style="{StaticResource MyButtonStyle}" Height="30" Width="100"/> 

The reason is the default Aero style for the button. It has chrome defined in the ControlTemplate, which has its own behavior in various mouse events. So, to write your trigger call.

Therefore, you must redefine the standard ControlTemplate of the button to achieve the desired result.