Set Mouse hover color for button in WPF

Question

I'm using following style for buttons in my WPF application. In here how can I set the mouse hover color for a button?

 <Style TargetType="{x:Type Button}" x:Key="ButtonStyle2">
    <Setter Property="FontSize" Value="16" />
    <Setter Property="Background" Value="#FF45414D" />
    <Setter Property="Height" Value="35" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="6,6,6,6" Background="#FF45414D" >
                    <ContentPresenter x:Name="contentPresenter" 
                                      ContentTemplate="{TemplateBinding ContentTemplate}" 
                                      Content="{TemplateBinding Content}" 
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                      Margin="{TemplateBinding Padding}" 
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Then I changed my code as following to add mouse over property. Click here But still it's not working.

<Style TargetType="{x:Type Button}" x:Key="ButtonStyle2">
    <Setter Property="FontSize" Value="16" />
    <Setter Property="Background" Value="#FF45414D" />
    <Setter Property="Height" Value="35" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="6,6,6,6" Background="#FF45414D" >
                    <ContentPresenter x:Name="contentPresenter" 
                                      ContentTemplate="{TemplateBinding ContentTemplate}" 
                                      Content="{TemplateBinding Content}" 
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                      Margin="{TemplateBinding Padding}" 
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      />

                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Red"/>
        </Trigger>
    </Style.Triggers>
</Style>

Possible duplicate of [Change color of Button when Mouse is over](https://stackoverflow.com/questions/20073294/change-color-of-button-when-mouse-is-over) — Freggar, Jun 11 '18 at 09:00
I changed the properties according to that link. I added But its not working. — Tom, Jun 11 '18 at 09:07
The Border needs to bind to the Button's Background. Like `` — Freggar, Jun 11 '18 at 09:28

score 0 · Accepted Answer · answered Jun 11 '18 at 09:27

How about writing a trigger for the border?

<Style TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="16" />
<Setter Property="Background" Value="Red" />
<Setter Property="Height" Value="35" />
<Setter Property="Foreground" Value="White" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border >
                    <ContentPresenter x:Name="contentPresenter" 
                      ContentTemplate="{TemplateBinding ContentTemplate}" 
                      Content="{TemplateBinding Content}" 
                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                      Margin="{TemplateBinding Padding}" 
                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                      />
                    <Border.Style>
                        <Style TargetType="Border">
                            <Setter Property="Background" Value="#FF45414D"/>
                            <Setter Property="CornerRadius" Value="6,6,6,6"/>
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" Value="Red"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

You can write the trigger for the background change in the border tag.

Set Mouse hover color for button in WPF

1 Answers1