Change background color on mouseover

Question

I've managed to make a rounded border button, but I cannot seem to change its background color when the mouse is over. The opacity changes, but not the background color.

<Style TargetType="Button" x:Key="FlatButtonStyle">
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="Cursor" Value="Hand" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Name="border" BorderThickness="0" BorderBrush="Black" Background="{TemplateBinding Background}" CornerRadius="4">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Orange"/>
            <Setter Property="Opacity" Value="0.91" />

        </Trigger>
    </Style.Triggers>
</Style>

As you can see, I'm not sure why opacity works but not the other. However, I think it's a conflict with the actual button itself:

<Button Style="{StaticResource FlatButtonStyle}" Content="Sign In" VerticalAlignment="Top" Margin="10,267,10,0" Background="#FF3650F3" Foreground="White" Height="29" Command="{Binding SignIn}">

Is there a way to override this? What I'm looking to do is create a generic, rounded button template that changes the background to orange. But I want the ability to set a default background, like I have shown in my button.

Instead of using the Orange colour name, have you tried using the Hex value? Something like #FFFFA500? — Geoff James
Have you had a look at this answer here?: stackoverflow.com/a/17259993/6240567 - I think the key part might be <Setter Property="OverridesDefaultStyle" Value="True" /> to go in your Style declaration — Geoff James

adminSoftDK adminSoftDK · Accepted Answer · 2016-08-19T15:46:19

try this

<Style TargetType="Button" x:Key="FlatButtonStyle">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border Name="border" BorderThickness="0" BorderBrush="Black" Background="{TemplateBinding Background}" CornerRadius="4">
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Border>
<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter TargetName="border" Property="Background" Value="Orange"/>
        <Setter Property="Opacity" Value="0.91" />
    </Trigger>
</ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

To target the border directly via its name, but because it was inside of the ControlTemplate it was better to move the triggers there. If you leave the name out like for opacity setter its cleaver enough to know that you are targeting the button itself, because its control template of that button. So you can target individual components as well as the button.

Change background color on mouseover

1 Answers