1

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

https://i.sstatic.net/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.

Improve this question
0

2 Answers 2

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

And does this code go into the XAML under Grid or in App.xaml?
For some reason, it's saying "Error XDG0012 The member "isEnabled" is not recognized or is not accessible. Sapphire MainWindow.xaml 22 "
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 IsEnabled.
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.
@gl3yn Fine, but be aware that this removes the ability to customize the Button externally, for example by assigning local value or via a Trigger. Hardcoding the value is not advised unless you explicitly want to disable customization. You can simplify your Setter too: <Setter Property="Foreground" Value="Transparent" />.
|
2

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>
Improve this answer

1 Comment

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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.