How to remove default mouse-over effect on WPF buttons

Question

My problem is that in WPF  whenever I try and change the colour of a button s background using triggers or animations  the default mouseover effect  of being grey with that orange glow  seems to take priority   After extensive searches I m clueless as to how to remove this effect

User · Answer

If someone doesn t want to override default Control Template then here is the solution  You can create DataTemplate for button which can have TextBlock and then you can write Property trigger on IsMouseOver property to disable mouse over effect  Height of TextBlock and Button should be same   lt Button Background  quot Black quot  Margin  quot 0 quot  Padding  quot 0 quot  BorderThickness  quot 0 quot  Cursor  quot Hand quot  Height  quot 20 quot  gt       lt Button ContentTemplate gt           lt DataTemplate gt               lt TextBlock Text  quot GO quot  Foreground  quot White quot  HorizontalAlignment  quot Center quot  VerticalAlignment  quot Center quot  TextDecorations  quot Underline quot  Margin  quot 0 quot  Padding  quot 0 quot  Height  quot 20 quot  gt                   lt TextBlock Style gt                       lt Style TargetType  quot TextBlock quot  gt                           lt Style Triggers gt                               lt Trigger Property   quot IsMouseOver quot  Value  quot True quot  gt                                   lt Setter Property   quot Background quot  Value  quot Black quot   gt                               lt  Trigger gt                           lt  Style Triggers gt                       lt  Style gt                   lt  TextBlock Style gt               lt  TextBlock gt           lt  DataTemplate gt       lt  Button ContentTemplate gt   lt  Button gt

User · Answer

Using a template trigger    lt Style x Key  ButtonStyle  TargetType   x Type Button   gt       lt Setter Property  Background  Value  White  gt  lt  Setter gt               lt Setter Property  Template  gt           lt Setter Value gt               lt ControlTemplate TargetType   x Type Button   gt                   lt Border Background   TemplateBinding Background   gt                       lt ContentPresenter HorizontalAlignment  Center  VerticalAlignment  Center   gt                   lt  Border gt                   lt ControlTemplate Triggers gt                       lt Trigger Property  IsMouseOver  Value  True  gt                           lt Setter Property  Background  Value  White   gt                       lt  Trigger gt                   lt  ControlTemplate Triggers gt               lt  ControlTemplate gt           lt  Setter Value gt       lt  Setter gt   lt  Style gt

User · Answer

This Link helped me alot http   www codescratcher com wpf remove-default-mouse-over-effect-on-wpf-buttons   Define a style in UserControl Resources or Window Resources    lt Window Resources gt           lt Style x Key  MyButton  TargetType  Button  gt               lt Setter Property  OverridesDefaultStyle  Value  True    gt               lt Setter Property  Cursor  Value  Hand    gt               lt Setter Property  Template  gt                   lt Setter Value gt                       lt ControlTemplate TargetType  Button  gt                           lt Border Name  border  BorderThickness  0  BorderBrush  Black  Background   TemplateBinding Background   gt                               lt ContentPresenter HorizontalAlignment  Center  VerticalAlignment  Center    gt                           lt  Border gt                           lt ControlTemplate Triggers gt                               lt Trigger Property  IsMouseOver  Value  True  gt                                   lt Setter Property  Opacity  Value  0 8    gt                               lt  Trigger gt                           lt  ControlTemplate Triggers gt                       lt  ControlTemplate gt                   lt  Setter Value gt               lt  Setter gt           lt  Style gt       lt  Window Resources gt    Then add the style to your button this way Style   StaticResource MyButton     lt Button Name  btnSecond  Width  350  Height  120  Margin  15  Style   StaticResource MyButton   gt       lt Button Background gt           lt ImageBrush ImageSource   Remove Default Button Effect component Images WithStyle jpg  gt  lt  ImageBrush gt       lt  Button Background gt   lt  Button gt

User · Answer

This is similar to the solution referred by Mark Heath but with not as much code to just create a very basic button  without the built-in mouse over animation effect  It preserves a simple mouse over effect of showing the button border in black  The style can be inserted into the Window Resources or UserControl Resources section for example  as shown    lt UserControl Resources gt       lt  -- This style is used for buttons  to remove the WPF default  animated  mouse over effect -- gt       lt Style x Key  quot MyButtonStyle quot  TargetType  quot Button quot  gt           lt Setter Property  quot OverridesDefaultStyle quot  Value  quot True quot   gt           lt Setter Property  quot Margin quot  Value  quot 5 quot   gt           lt Setter Property  quot Template quot  gt               lt Setter Value gt                   lt ControlTemplate TargetType  quot Button quot  gt                       lt Border Name  quot border quot                           BorderThickness  quot 1 quot                          Padding  quot 4 2 quot                           BorderBrush  quot DarkGray quot                           CornerRadius  quot 3 quot                           Background  quot  TemplateBinding Background  quot  gt                           lt ContentPresenter HorizontalAlignment  quot Center quot  VerticalAlignment  quot Center quot    gt                       lt  Border gt                       lt ControlTemplate Triggers gt                           lt Trigger Property  quot IsMouseOver quot  Value  quot True quot  gt                               lt Setter TargetName  quot border quot  Property  quot BorderBrush quot  Value  quot Black quot    gt                           lt  Trigger gt                       lt  ControlTemplate Triggers gt                   lt  ControlTemplate gt               lt  Setter Value gt           lt  Setter gt       lt  Style gt   lt  UserControl Resources gt    lt  -- usage in xaml -- gt   lt Button Style  quot  StaticResource MyButtonStyle  quot  gt Hello  lt  Button gt

User · Answer

You need to create your own custom button template to have full control over the appearance in all states  Here s a tutorial

User · Answer

An extension on dodgy coder s answer which adds support for     Maintaining WPF button style Adds support for IsSelected and hover  i e  a toggled button       lt Style x Key  Button Hoverless  TargetType   x Type ButtonBase   gt           lt Setter Property  Template  gt               lt Setter Value gt                   lt ControlTemplate TargetType   x Type ButtonBase   gt                       lt Border Name  border                              BorderThickness   TemplateBinding BorderThickness                               Padding   TemplateBinding Padding                               BorderBrush   TemplateBinding BorderBrush                               Background   TemplateBinding Background   gt                           lt ContentPresenter HorizontalAlignment  Center  VerticalAlignment  Center    gt                       lt  Border gt                       lt ControlTemplate Triggers gt                           lt MultiTrigger gt                               lt MultiTrigger Conditions gt                                   lt Condition Property  IsMouseOver  Value  True    gt                                   lt Condition Property  Selector IsSelected  Value  False    gt                               lt  MultiTrigger Conditions gt                               lt Setter Property  Background  Value   FFBEE6FD    gt                           lt  MultiTrigger gt                            lt MultiTrigger gt                               lt MultiTrigger Conditions gt                                   lt Condition Property  IsMouseOver  Value  True    gt                                   lt Condition Property  Selector IsSelected  Value  True    gt                               lt  MultiTrigger Conditions gt                               lt Setter Property  Background  Value   BB90EE90    gt                           lt  MultiTrigger gt                            lt MultiTrigger gt                               lt MultiTrigger Conditions gt                                   lt Condition Property  IsMouseOver  Value  False    gt                                   lt Condition Property  Selector IsSelected  Value  True    gt                               lt  MultiTrigger Conditions gt                               lt Setter Property  Background  Value  LightGreen    gt                           lt  MultiTrigger gt                            lt Trigger Property  IsPressed  Value  True  gt                               lt Setter TargetName  border  Property  Opacity  Value  0 95    gt                           lt  Trigger gt                       lt  ControlTemplate Triggers gt                   lt  ControlTemplate gt               lt  Setter Value gt           lt  Setter gt       lt  Style gt     examples     lt Button Content  Wipe On  Selector IsSelected  True    gt   lt Button Content  Wipe Off  Selector IsSelected  False    gt

User · Answer

The Muffin Man had a very simple answer which worked for me   To add a little more specific direction  at least for VS 2013    Right-click the control Select Edit Template    Edit a copy    I selected  Application  for where to save the style   From here you can directly edit App xaml and see the intuitively named properties  For my purposes  I just set RenderMouseOver  False   Then  in the MainWindow xaml or wherever your GUI is  you can paste the new style at the end of the Button tag  e g      Style   DynamicResource MouseOverNonDefault

User · Answer

Just to add a very simple solution  that was good enough for me  and I think addresses the OP s issue  I used the solution in this answer except with a regular Background value instead of an image    lt Style x Key  SomeButtonStyle  TargetType  Button  gt       lt Setter Property  Background  Value  Transparent    gt       lt Setter Property  Template  gt           lt Setter Value gt               lt ControlTemplate TargetType  Button  gt                   lt Grid Background   TemplateBinding Background   gt                       lt ContentPresenter   gt                   lt  Grid gt               lt  ControlTemplate gt           lt  Setter Value gt       lt  Setter gt   lt  Style gt    No re-templating beyond forcing the Background to always be the Transparent background from the templated button - mouseover no longer affects the background once this is done  Obviously replace Transparent with any preferred value

[wpf] How to remove default mouse-over effect on WPF buttons?

Examples related to wpf

Examples related to button

Examples related to mouseover