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

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).

<UserControl.Resources>
    <!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
    <Style x:Key="MyButtonStyle" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" 
                        BorderThickness="1"
                        Padding="4,2" 
                        BorderBrush="DarkGray" 
                        CornerRadius="3" 
                        Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<!-- usage in xaml -->
<Button Style="{StaticResource MyButtonStyle}">Hello!</Button>

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

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

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

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

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

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

Examples related to wpf

Examples related to button

Examples related to mouseover