Change a button's background on mouseover

Question

I must just change the color of two button when the mouse is hovering over them, I've searched and followed many tutorials but can't make it work.

This is the style that is applied:

<Window.Resources>
    <Style x:Key="btnStyleBase" TargetType="Button">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="FontFamily" Value="{StaticResource FontAwesome}"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Width" Value="42"/>
        <Setter Property="Height" Value="40"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="FontSize" Value="24"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Button.Background" Value="Transparent"/>
            </Trigger>
        </Style.Triggers>
    </Style>

    <Style x:Key="btnStyleClose" TargetType="{x:Type Button}" BasedOn="{StaticResource btnStyleBase}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Button.Background" Value="Red"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

And this are the buttons that implement the styles:

<Button Name="btn1" Style="{StaticResource btnStyleBase}" Click="..." />
<Button Name="btn2" Style="{StaticResource btnStyleClose}" Click="..." />

The "IsMouseOver" property is triggered, but even if it can apply any other setter, the button's background stays as default light blue

score 1 · Accepted Answer · answered Aug 30 '18 at 20:20

WPF Controls by default have a ControlTemplate which is defined in Operating Systems behinds.

Like Web Developments you will see different display for each Control whenever you run your application on different version of Microsoft windows (Win7, Win8, Win10, ...)

if you want to get rid of this changes, you must rewrite ControlTemplate for each Control.

for Button you can Use this (and change it as you wanted): [this template also has animation on color changes and you can customize it]

 <Style TargetType="Button" x:Key="ButtonBaseStyle">
     <Setter Property="Padding" Value="12,6"/>
     <Setter Property="BorderThickness" Value="1"/>
 </Style>

 <Style TargetType="Button" x:Key="PrimaryButton" BasedOn="{StaticResource ButtonBaseStyle}">
     <Setter Property="BorderBrush" Value="#2e6da4"/>
     <Setter Property="Background" Value="#337ab7"/>
     <Setter Property="Foreground" Value="#fff"/>
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="Button">
                 <Border CornerRadius="4" Name="container" Cursor="Hand" Padding="{TemplateBinding Padding}" 
                         BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"
                         Background="{TemplateBinding Background}">
                     <ContentPresenter ContentSource="{TemplateBinding Content}" 
                         ContentTemplate="{TemplateBinding ContentTemplate}"
                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                     <VisualStateManager.VisualStateGroups>
                         <VisualStateGroup>
                             <VisualState Name="Normal">

                             </VisualState>
                             <VisualState Name="MouseOver">
                                 <Storyboard>
                                     <ColorAnimation Storyboard.TargetName="container" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
                                                     Duration="0:0:0.02" To="#286090"></ColorAnimation>
                                     <ColorAnimation Storyboard.TargetName="container" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" 
                                                     Duration="0:0:0.02" To="#204d74"></ColorAnimation>
                                 </Storyboard>
                             </VisualState>
                             <VisualState Name="Pressed">
                                 <Storyboard>
                                     <ColorAnimation Storyboard.TargetName="container" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
                                                     Duration="0:0:0.02" To="#204d74"></ColorAnimation>
                                     <ColorAnimation Storyboard.TargetName="container" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" 
                                                     Duration="0:0:0.02" To="#122b40"></ColorAnimation>
                                 </Storyboard>
                             </VisualState>
                             <VisualState Name="Disabled">
                                 <Storyboard>
                                     <ColorAnimation Storyboard.TargetName="container" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 
                                                     Duration="0:0:0.02" To="#337ab7"></ColorAnimation>
                                     <ColorAnimation Storyboard.TargetName="container" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" 
                                                     Duration="0:0:0.02" To="#2e6da4"></ColorAnimation>
                                     <DoubleAnimation Storyboard.TargetName="container" Storyboard.TargetProperty="Opacity"
                                                      Duration="0:0:0.02" To="0.8"></DoubleAnimation>
                                 </Storyboard>
                             </VisualState>
                         </VisualStateGroup>
                     </VisualStateManager.VisualStateGroups>
                 </Border>
             </ControlTemplate>
         </Setter.Value>
     </Setter>
 </Style>

there are open-source solutions like Bootstrap WPF and Material Design WPF and you can read and change them.

Got it! I'll search for bootstrap wpf too – Fehu Aug 31 '18 at 09:25 — Fehu, Aug 31 '18 at 09:25

score 0 · Answer 2 · answered Aug 30 '18 at 20:18

0

I think that it is looking for a property called Button with a child property called Background. Change Button.Background to Background, and you should be in good shape:

<Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background" Value="Transparent"/>
    </Trigger>
</Style.Triggers>

answered Aug 30 '18 at 20:18

Dave Smash

2,941
1
18
38

1

Even by changing it, you will see `light blue` on MouseOver in Win7. – RezaNoei Aug 30 '18 at 20:22
I am on Windows 10 and don't have a quick way of testing on Win7, but I don't remember running into OS-specific problems with this approach... Since it's a 10-second fix, you may want to at least test this approach before resorting to rewriting the whole template. – Dave Smash Aug 30 '18 at 20:28
Dear @Elemental_Pete I had tested this for my project so many times. there are even change in Control's margin and padding in other Controls while changing the OS version. Microsoft dosn't spent more time to create Themes for WPF. – RezaNoei Aug 30 '18 at 20:33
I'm not questioning that a default XP button will look different than a Windows 7 button, I'm just questioning that the premise that you are unable to customize properties of a control in Windows 7. You should be able to change the color of either, even if the other properties look a bit different by default. Those differences give a "native" look and feel, which conforms to the OS, while a custom button template is better if you need your buttons to look identical on all platforms (even though they will then look different than all of the other buttons in your OS) – Dave Smash Aug 30 '18 at 20:40
Actually the main problem of @Fehu is to recognize all conditions in `Style.Triggers`. if you know all triggers in the Button's Default you are able to customize it. you are right, but i will prefer to prevent future bugs (its better to say : `Chages`). So in these cases I'm searching for a ControlTemplate. – RezaNoei Aug 31 '18 at 06:26

Change a button's background on mouseover

2 Answers2