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, Aug 19 '16 at 15:45
Have you had a look at this answer here?: http://stackoverflow.com/a/17259993/6240567 - I think the key part might be `` to go in your `Style` declaration — Geoff James, Aug 19 '16 at 15:50

adminSoftDK · Accepted Answer · 2016-08-19T15:51:25.983

5

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.

edited Aug 19 '16 at 15:51

answered Aug 19 '16 at 15:46

adminSoftDK

2,012
1
21
41

I've just commented pretty much the same thing - I think the key part is the ``? – Geoff James Aug 19 '16 at 15:50
@Dimitri I added some explanation, we always use the controltemplate triggers are this is the simplest way and always works. – adminSoftDK Aug 19 '16 at 15:52
@Dimitri - All ControlTemplates have a trigger collection just like Styles, if you want to make a custom template for something, it's often a good idea to put basic functionality triggers (such as MouseOver/IsPressed and such) in the template itself. This is above the style as it's the raw control template deciding what's what and cannot be disturbed by anything the style does (like setting OverridesDefaultStyle to true) unless you tell the style to use a different (or no) template. – Logan Aug 19 '16 at 15:57
@Logan gotcha. Thanks for the input guys! – Dimitri Aug 19 '16 at 15:58

Change background color on mouseover

1 Answers1