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

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 <Trigger Property="IsMouseOver" Value="true">...</Trigger> 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:

<p:Style x:Key="FocusVisual">
  <Setter Property="Control.Template">
    <Setter.Value>
      <ControlTemplate>
        <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</p:Style>
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<p:Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
  <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
  <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
  <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
  <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
  <Setter Property="BorderThickness" Value="1"/>
  <Setter Property="HorizontalContentAlignment" Value="Center"/>
  <Setter Property="VerticalContentAlignment" Value="Center"/>
  <Setter Property="Padding" Value="1"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Button}">
        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
          <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsDefaulted" Value="true">
            <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
          </Trigger>
          <!--<Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
          </Trigger>-->
          <Trigger Property="IsPressed" Value="true">
            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
            <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</p:Style>

(Note: you can omit the p: XML namespace qualifications in the actual code…I provide them here only because the Stack Overflow XML code formatter gets confused by <Style/> 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

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

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

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

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

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    lt ControlTemplate TargetType  Button  x Key  testButtonTemplate2  gt       lt Border Name  RootElement  gt           lt Border Background gt               lt SolidColorBrush x Name  BorderBrush  Color  Black   gt           lt  Border Background gt            lt Grid Margin  4   gt               lt Grid Background gt                   lt SolidColorBrush x Name  ButtonBackground  Color  Aquamarine   gt               lt  Grid Background gt               lt ContentPresenter HorizontalAlignment   TemplateBinding HorizontalContentAlignment   VerticalAlignment   TemplateBinding VerticalContentAlignment   Margin  4 5 4 4   gt           lt  Grid gt           lt VisualStateManager VisualStateGroups gt               lt VisualStateGroup x Name  CommonStates  gt                   lt VisualState x Name  Normal   gt                   lt VisualState x Name  MouseOver  gt                       lt Storyboard gt                           lt ColorAnimation Storyboard TargetName  ButtonBackground  Storyboard TargetProperty  Color  To  Red   gt                       lt  Storyboard gt                   lt  VisualState gt                   lt VisualState x Name  Pressed  gt                       lt Storyboard gt                           lt ColorAnimation Storyboard TargetName  ButtonBackground  Storyboard TargetProperty  Color  To  Red   gt                       lt  Storyboard gt                   lt  VisualState gt               lt  VisualStateGroup gt           lt  VisualStateManager VisualStateGroups gt       lt  Border gt   lt  ControlTemplate gt    in your XAML you can use the template above for your button as below   Define your button   lt Button Template   StaticResource testButtonTemplate2    HorizontalAlignment  Center  VerticalAlignment  Center   Foreground  White  gt My button lt  Button gt    Hope it helps

[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