How can I remove hover effect on a Button in WPF

Question

I have a button in Visual Studio WPF and when I hover over it, you can see it gets lighter.

https://i.stack.imgur.com/l9kJh.png

How can I remove this? I tried looking up the solution but I'm a beginner so I don't understand how to implement given solutions.

score 2 · Answer 1 · answered Jan 18 '20 at 00:29

Need to set it up so the Background color would be the same color for "IsMouseOver" Trigger as is for default.

Same as this solution just keeping the colors the same Change color of Button when Mouse is over

    <Button Width="50" Height="50" Content="Hi" Click="ButtonBase_OnClick" >
        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="Background" Value="LightGray"/>
                <Setter Property="Template">

                    <Setter.Value>

                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border Background="{TemplateBinding Background}">
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="LightGray"></Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>

The point is only to implement required triggers and to leave the ones that are not. Also use `TemplateBinding` when possible to maintain functionality like styling. E.g., the content alignment attributes should reflect the templated parent's settings. `ContentPresenter.HorizontalAlignment` should bind to the templated parent's `Button.HorizontalContentAlignment` property. Check my answer. — BionicCode, Jan 18 '20 at 08:29

BionicCode · Accepted Answer · 2020-01-18T11:31:40.543

You have to override the ControlTemplate. When you override it you have to re-implement the behavior (visual states) that is triggered by user interactions e.g., pressed, mouse over, disabled.

Only implement the triggers you need and leave the ones you want to avoid. In your case simply don't implement the mouse over visual state trigger:

App.xaml

<ControlTemplate x:Key="NoMouseOverButtonTemplate" 
                 TargetType="Button">
  <Border Background="{TemplateBinding Background}"
          BorderBrush="{TemplateBinding BorderBrush}"
          BorderThickness="{TemplateBinding BorderThickness}">
    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
  </Border>

  <!-- Add only required visual state triggers -->
  <ControlTemplate.Triggers>
    <Trigger Property="IsEnabled"
             Value="False">
      <Setter Property="Background"
              Value="{x:Static SystemColors.ControlLightBrush}" />
      <Setter Property="Foreground"
              Value="{x:Static SystemColors.GrayTextBrush}" />
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

Usage

<Button Template="{StaticResource NoMouseOverButtonTemplate}" />

To know the required elements contained in the ControlTemplate that are mandatory for the templated control to perform as expected check the Microsoft Docs: Control Styles and Templates page (in your case the Button Styles and Templates page) and check for named parts as some controls require certain elements to carry a certain name in order to be identified.
You can also use the default template provided there as a starting point to design or customize controls.

And does this code go into the XAML under Grid or in App.xaml? — NegeroKiddero, Jan 18 '20 at 10:50
For some reason, it's saying "Error XDG0012 The member "isEnabled" is not recognized or is not accessible. Sapphire MainWindow.xaml 22 " — NegeroKiddero, Jan 18 '20 at 11:07
The property names are case sensitive. They follow the common C# convention and therefore properties (public members in general) start with a capital letter. Its **I**sEnabled. — BionicCode, Jan 18 '20 at 11:27
If you want to make it reusable or global extract the `ControlTemplate` and move it e.g., into App.xaml. I will update the example to show it. — BionicCode, Jan 18 '20 at 11:28
Maybe I am doing something wrong, but this method seems to interfere with not-enabled buttons; the grayed-out effect seems to be missing. — antipattern, Oct 07 '21 at 13:02
What do you mean? When you override the Controltemplate you would have to provide your own disabled effect (like in the example). — BionicCode, Oct 07 '21 at 21:14

How can I remove hover effect on a Button in WPF

2 Answers2