How do you change Background for a Button MouseOver in WPF

Question

I have a button on my page with this XAML    lt Button Content  Button  HorizontalAlignment  Left  VerticalAlignment  Bottom       Width  50  Height  50  HorizontalContentAlignment  Left       BorderBrush   x Null   Foreground   x Null   Margin  50 0 0 0  gt       lt Button Style gt           lt Style TargetType  Button  gt               lt Setter Property  Background  Value  Green   gt               lt Style Triggers gt                   lt Trigger Property  IsMouseOver  Value  True  gt                       lt Setter Property  Background  Value  Red   gt                   lt  Trigger gt               lt  Style Triggers gt           lt  Style gt       lt  Button Style gt   lt  Button gt    But when I put mouse over my button  button s background changes to default windows gray background What s The Problem   This is the button picture before and after mouseover  Before  After

User · Answer

A slight more difficult answer that uses ControlTemplate and has an animation effect (adapted from https://docs.microsoft.com/en-us/dotnet/framework/wpf/controls/customizing-the-appearance-of-an-existing-control)

In your resource dictionary define a control template for your button like this one:

<ControlTemplate TargetType="Button" x:Key="testButtonTemplate2">
    <Border Name="RootElement">
        <Border.Background>
            <SolidColorBrush x:Name="BorderBrush" Color="Black"/>
        </Border.Background>

        <Grid Margin="4" >
            <Grid.Background>
                <SolidColorBrush x:Name="ButtonBackground" Color="Aquamarine"/>
            </Grid.Background>
            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="4,5,4,4"/>
        </Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Color" To="Red"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Color" To="Red"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Border>
</ControlTemplate>

in your XAML you can use the template above for your button as below:

Define your button

<Button Template="{StaticResource testButtonTemplate2}" 
HorizontalAlignment="Center" VerticalAlignment="Center" 
Foreground="White">My button</Button>

Hope it helps

User · Answer

For change button style  1st  define resource styles   lt Window Resources gt        lt Style x Key  OvergroundIn  TargetType  Button  gt            lt Setter Property  Template  gt               lt Setter Value gt                   lt ControlTemplate TargetType  Button  gt                       lt Grid Background   FF16832F  gt                           lt ContentPresenter TextBlock Foreground  White  TextBlock TextAlignment  Center  Margin  0 8 0 0   gt  lt  ContentPresenter gt                       lt  Grid gt                   lt  ControlTemplate gt               lt  Setter Value gt           lt  Setter gt            lt Style Triggers gt               lt Trigger Property  IsMouseOver  Value  True  gt                    lt Setter Property  Template  gt                       lt Setter Value gt                           lt ControlTemplate TargetType  Button  gt                               lt Grid Background   FF06731F  gt                                   lt ContentPresenter TextBlock Foreground  White  TextBlock TextAlignment  Center  Margin  0 8 0 0   gt  lt  ContentPresenter gt                               lt  Grid gt                           lt  ControlTemplate gt                       lt  Setter Value gt                   lt  Setter gt                lt  Trigger gt           lt  Style Triggers gt        lt  Style gt        lt Style x Key  OvergroundOut  TargetType  Button  gt            lt Setter Property  Template  gt               lt Setter Value gt                   lt ControlTemplate TargetType  Button  gt                       lt Grid Background   FFF35E5E  gt                           lt ContentPresenter TextBlock Foreground  White  TextBlock TextAlignment  Center  Margin  0 8 0 0   gt  lt  ContentPresenter gt                       lt  Grid gt                   lt  ControlTemplate gt               lt  Setter Value gt           lt  Setter gt            lt Style Triggers gt               lt Trigger Property  IsMouseOver  Value  True  gt                    lt Setter Property  Template  gt                       lt Setter Value gt                           lt ControlTemplate TargetType  Button  gt                               lt Grid Background   FFE34E4E  gt                                   lt ContentPresenter TextBlock Foreground  White  TextBlock TextAlignment  Center  Margin  0 8 0 0   gt  lt  ContentPresenter gt                               lt  Grid gt                           lt  ControlTemplate gt                       lt  Setter Value gt                   lt  Setter gt                lt  Trigger gt           lt  Style Triggers gt        lt  Style gt     lt  Window Resources gt    2nd define button code                              lt Border Grid Column  2  BorderBrush  LightGray  BorderThickness  2  CornerRadius  3  Margin  2 2 2 2    gt                                   lt Button Name  btnFichar  BorderThickness  0  Click  BtnFichar Click  gt                                       lt Button Content gt                                           lt Grid gt                                               lt TextBlock Margin  0 7 0 7  TextAlignment  Center  gt Fichar lt  TextBlock gt                                            lt  Grid gt                                       lt  Button Content gt                                   lt  Button gt                               lt  Border gt    3th code behind      public void ShowStatus                 switch    MainDto this DataContext  State                        case State IN                  this btnFichar BorderBrush   new SolidColorBrush Color FromRgb 243  94  94                    this btnFichar Style   Resources  OvergroundIn   as Style                  this btnFichar Content    Fichar Salida                   break               case State OUT                  this btnFichar BorderBrush   new SolidColorBrush Color FromRgb 76  106  83                    this btnFichar Style   Resources  OvergroundOut   as Style                  this btnFichar Content    Fichar Entrada                   break

User · Answer

To remove the default MouseOver behaviour on the Button you will need to modify the ControlTemplate  Changing your Style definition to the following should do the trick    lt Style TargetType   x Type Button   gt       lt Setter Property  Background  Value  Green   gt       lt Setter Property  Template  gt           lt Setter Value gt               lt ControlTemplate TargetType   x Type Button   gt                   lt Border Background   TemplateBinding Background   BorderBrush  Black  BorderThickness  1  gt                       lt ContentPresenter HorizontalAlignment  Center  VerticalAlignment  Center   gt                   lt  Border gt               lt  ControlTemplate gt           lt  Setter Value gt       lt  Setter gt       lt Style Triggers gt           lt Trigger Property  IsMouseOver  Value  True  gt               lt Setter Property  Background  Value  Red   gt           lt  Trigger gt       lt  Style Triggers gt   lt  Style gt    EDIT  It s a few years late  but you are actually able to set the border brush inside of the border that is in there  Idk if that was pointed out but it doesn t seem like it was

User · Answer

All of the answers so far involve completely replacing the default button behavior with something else  However  IMHO it is useful and important to understand that it s possible to change just the part you care about  by editing the existing  default template for a XAML element   In the case of dealing with the hover effect on a WPF button  the change in appearance in a WPF Button element is caused by a Trigger in the default style for the Button  which is based on the IsMouseOver property and sets the Background and BorderBrush properties of the top-level Border element in the control template  The Button element s background is underneath the Border element s background  so changing the Button Background property doesn t prevent the hover effect from being seen   With some effort  you could override this behavior with your own setter  but because the element you need to affect is in the template and not directly accessible in your own XAML  that approach would be difficult and IMHO overly complex   Another option would be to make use the graphic as the Content for the Button rather than the Background  If you need additional content over the graphic  you can combine them with a Grid as the top-level object in the content   However  if you literally just want to disable the hover effect entirely  rather than just hiding it   you can use the Visual Studio XAML Designer    While editing your XAML  select the  Design  tab  In the  Design  tab  find the button for which you want to disable the effect  Right-click that button  and choose  Edit Template Edit a Copy      Select in the prompt you get where you want the new template resource to be placed  This will appear to do nothing  but in fact the Designer will have added new resources where you told it  and changed your button element to reference the style that uses those resources as the button template  Now  you can go edit that style  The easiest thing is to delete or comment-out  e g  Ctrl E  C  the  lt Trigger Property  IsMouseOver  Value  true  gt     lt  Trigger gt  element  Of course  you can make any change to the template you want at that point    When you re done  the button style will look something like this    lt p Style x Key  FocusVisual  gt     lt Setter Property  Control Template  gt       lt Setter Value gt         lt ControlTemplate gt           lt Rectangle Margin  2  SnapsToDevicePixels  true  Stroke   DynamicResource  x Static SystemColors ControlTextBrushKey    StrokeThickness  1  StrokeDashArray  1 2   gt         lt  ControlTemplate gt       lt  Setter Value gt     lt  Setter gt   lt  p Style gt   lt SolidColorBrush x Key  Button Static Background  Color   FFDDDDDD   gt   lt SolidColorBrush x Key  Button Static Border  Color   FF707070   gt   lt SolidColorBrush x Key  Button MouseOver Background  Color   FFBEE6FD   gt   lt SolidColorBrush x Key  Button MouseOver Border  Color   FF3C7FB1   gt   lt SolidColorBrush x Key  Button Pressed Background  Color   FFC4E5F6   gt   lt SolidColorBrush x Key  Button Pressed Border  Color   FF2C628B   gt   lt SolidColorBrush x Key  Button Disabled Background  Color   FFF4F4F4   gt   lt SolidColorBrush x Key  Button Disabled Border  Color   FFADB2B5   gt   lt SolidColorBrush x Key  Button Disabled Foreground  Color   FF838383   gt   lt p Style x Key  ButtonStyle1  TargetType   x Type Button   gt     lt Setter Property  FocusVisualStyle  Value   StaticResource FocusVisual    gt     lt Setter Property  Background  Value   StaticResource Button Static Background    gt     lt Setter Property  BorderBrush  Value   StaticResource Button Static Border    gt     lt Setter Property  Foreground  Value   DynamicResource  x Static SystemColors ControlTextBrushKey     gt     lt Setter Property  BorderThickness  Value  1   gt     lt Setter Property  HorizontalContentAlignment  Value  Center   gt     lt Setter Property  VerticalContentAlignment  Value  Center   gt     lt Setter Property  Padding  Value  1   gt     lt Setter Property  Template  gt       lt Setter Value gt         lt ControlTemplate TargetType   x Type Button   gt           lt Border x Name  border  BorderBrush   TemplateBinding BorderBrush   BorderThickness   TemplateBinding BorderThickness   Background   TemplateBinding Background   SnapsToDevicePixels  true  gt             lt ContentPresenter x Name  contentPresenter  Focusable  False  HorizontalAlignment   TemplateBinding HorizontalContentAlignment   Margin   TemplateBinding Padding   RecognizesAccessKey  True  SnapsToDevicePixels   TemplateBinding SnapsToDevicePixels   VerticalAlignment   TemplateBinding VerticalContentAlignment    gt           lt  Border gt           lt ControlTemplate Triggers gt             lt Trigger Property  IsDefaulted  Value  true  gt               lt Setter Property  BorderBrush  TargetName  border  Value   DynamicResource  x Static SystemColors HighlightBrushKey     gt             lt  Trigger gt             lt  -- lt Trigger Property  IsMouseOver  Value  true  gt               lt Setter Property  Background  TargetName  border  Value   StaticResource Button MouseOver Background    gt               lt Setter Property  BorderBrush  TargetName  border  Value   StaticResource Button MouseOver Border    gt             lt  Trigger gt -- gt             lt Trigger Property  IsPressed  Value  true  gt               lt Setter Property  Background  TargetName  border  Value   StaticResource Button Pressed Background    gt               lt Setter Property  BorderBrush  TargetName  border  Value   StaticResource Button Pressed Border    gt             lt  Trigger gt             lt Trigger Property  IsEnabled  Value  false  gt               lt Setter Property  Background  TargetName  border  Value   StaticResource Button Disabled Background    gt               lt Setter Property  BorderBrush  TargetName  border  Value   StaticResource Button Disabled Border    gt               lt Setter Property  TextElement Foreground  TargetName  contentPresenter  Value   StaticResource Button Disabled Foreground    gt             lt  Trigger gt           lt  ControlTemplate Triggers gt         lt  ControlTemplate gt       lt  Setter Value gt     lt  Setter gt   lt  p Style gt     Note  you can omit the p  XML namespace qualifications in the actual code hellip I provide them here only because the Stack Overflow XML code formatter gets confused by  lt Style  gt  elements that don t have a fully-qualified name with XML namespace    If you want to apply the same style to other buttons  you can just right-click them and choose  Edit Template Apply Resource  and select the style you just added for the first button  You can even make that style the default style for all buttons  using the normal techniques for applying a default style to elements in XAML

User · Answer

Just want to share my button style from my ResourceDictionary that i ve been using  You can freely change the onHover background at the style triggers   ColorAnimation To    your desired BG i e  FFCEF7A0    The button BG will also automatically revert to its original BG after the mouseOver state You can even set how fast the transition   Resource Dictionary    lt Style x Key  Flat Button  TargetType   x Type Button   gt       lt Setter Property  Width  Value  100   gt       lt Setter Property  Height  Value  50   gt       lt Setter Property  Margin  Value  2   gt       lt Setter Property  FontFamily  Value  Arial Narrow   gt       lt Setter Property  FontSize  Value  12px   gt       lt Setter Property  FontWeight  Value  Bold   gt       lt Setter Property  Cursor  Value  Hand   gt       lt Setter Property  Foreground  gt           lt Setter Value gt               lt SolidColorBrush Opacity  1  Color  White   gt           lt  Setter Value gt       lt  Setter gt       lt Setter Property  Background   gt           lt Setter Value gt               lt SolidColorBrush Opacity  1  Color   28C2FF    gt           lt  Setter Value gt       lt  Setter gt       lt Setter Property  Template  gt           lt Setter Value gt               lt ControlTemplate TargetType   x Type Button   gt                    lt Border x Name  border                           SnapsToDevicePixels  True                           BorderThickness  1                           Padding  4 2                           BorderBrush  Gray                           CornerRadius  3                           Background   TemplateBinding Background   gt                       lt Grid gt                           lt ContentPresenter                          Margin  2                          HorizontalAlignment  Center                          VerticalAlignment  Center                          RecognizesAccessKey  True    gt                        lt  Grid gt                   lt  Border gt                lt  ControlTemplate gt           lt  Setter Value gt       lt  Setter gt        lt Style Triggers gt           lt Trigger Property  IsMouseOver  Value  true  gt               lt Trigger EnterActions gt                   lt BeginStoryboard gt                       lt Storyboard gt                           lt ColorAnimation To   D2F898                                          Storyboard TargetProperty   Control Background   SolidColorBrush Color                                            FillBehavior  HoldEnd  Duration  0 0 0 25  AutoReverse  False  RepeatBehavior  1x   gt                       lt  Storyboard gt                   lt  BeginStoryboard gt               lt  Trigger EnterActions gt                lt Trigger ExitActions gt                   lt BeginStoryboard gt                       lt Storyboard gt                           lt ColorAnimation                                             Storyboard TargetProperty   Control Background   SolidColorBrush Color                                                FillBehavior  HoldEnd  Duration  0 0 0 25  AutoReverse  False  RepeatBehavior  1x   gt                       lt  Storyboard gt                   lt  BeginStoryboard gt               lt  Trigger ExitActions gt            lt  Trigger gt         lt  Style Triggers gt   lt  Style gt    all you have to do is call the style   Example Implementation   lt Button Style   StaticResource Flat Button   Height  Auto Width  Auto  gt          lt StackPanel gt        lt TextBlock Text  SAVE  FontFamily  Arial  FontSize  10 667   gt        lt  StackPanel gt   lt  Button gt

User · Answer

This worked well for me   Button Style   lt Style x Key  TransparentStyle  TargetType   x Type Button   gt       lt Setter Property  Template  gt           lt Setter Value gt               lt ControlTemplate TargetType  Button  gt                   lt Border gt                       lt Border Style gt                           lt Style TargetType   x Type Border   gt                               lt Style Triggers gt                                   lt Trigger Property  IsMouseOver  Value  True  gt                                       lt Setter Property  Background  Value  DarkGoldenrod   gt                                   lt  Trigger gt                               lt  Style Triggers gt                           lt  Style gt                       lt  Border Style gt                       lt Grid Background  Transparent  gt                           lt ContentPresenter gt  lt  ContentPresenter gt                       lt  Grid gt                   lt  Border gt               lt  ControlTemplate gt           lt  Setter Value gt       lt  Setter gt   lt  Style gt    Button   lt Button Style   StaticResource TransparentStyle   VerticalAlignment  Top  HorizontalAlignment  Right  Width  25  Height  25          Command   Binding CloseWindow   gt       lt Button Content  gt           lt Grid Margin  0 0 0 0  gt               lt Path Data  M0 7 L10 17 M0 17 L10 7  Stroke  Blue  StrokeThickness  2  HorizontalAlignment  Center  Stretch  None    gt           lt  Grid gt       lt  Button Content gt   lt  Button gt    Notes   The button displays a little blue cross  much like the one used to close a window  By setting the background of the grid to  Transparent   it adds a hittest  which means that if the mouse is anywhere over the button  then it will work  Omit this  tag  and the button will only light up if the mouse is over one of the vector lines in the icon  this is not very usable

[wpf] How do you change Background for a Button MouseOver in WPF?

Examples related to wpf

Examples related to button

Examples related to background

Examples related to triggers

Examples related to mouseover