Button color not changing when mouse is hovered over the button

Question

I've written the below XAML code. I have added the style code to change the color of the button when the mouse is hovered over the button. But though the border effect is there when hovered over the button, background is not changing to red. Please advice.

<Window.Resources>
                <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
                <Style x:Key="MyButtonStyle" TargetType="Button">
                    <Setter Property="OverridesDefaultStyle" Value="True"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                                <Border Name="border" 
                                    BorderThickness="1"
                                    BorderBrush="DarkGray" 
                                    Background="{TemplateBinding Background}">
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                                        <Setter Property="Foreground" Value="Red"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
    </Window.Resources>

<Button Style="{StaticResource MyButtonStyle}" Content="Install" Command="{Binding InstallCommand}" Visibility="{Binding InstallEnabled, Converter={StaticResource BooleanToVisibilityConverter}}" Margin="150,30,30,22" Width="118" BorderBrush="#FF252424" FontSize="18" FontWeight="Bold" Foreground="White" FontFamily="Segoe UI Light" FontStretch="ExtraExpanded" Background="#FF4F4F4F"/>

sujith karivelil sujith karivelil · Accepted Answer · 2016-06-28T00:57:26

Your code is almost working, Do the following to make it complete:

You are binding the Style, So no need to specify any additional styles along with button, If it needed the add in Styles.
Remove BorderBrush,Foreground and Background From the button tag
Add "Background" Property in setter, Then run the application and see the changes

The Changes looks like this:

<Style x:Key="MyButtonStyle" TargetType="Button">
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <!--Sets the initial Foreground color--> 
    <Setter Property="Foreground" Value="White"/>
    <!--Sets the initial Background color-->
    <Setter Property="Background" Value="Gray"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="border" 
                        BorderThickness="1"                                  
                        Background="{TemplateBinding Background}">
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
            <ControlTemplate.Triggers>
                   <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                        <Setter Property="Foreground" Value="Red"/>
                        <Setter Property="Background" Value="Green"/>
                   </Trigger>
            </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And Button control like this:

 <Button Style="{StaticResource MyButtonStyle}" Content="Install"  
    Margin="150,30,30,22" Width="118"  FontSize="18" 
    FontWeight="Bold"  FontFamily="Segoe UI Light" FontStretch="ExtraExpanded"  />

Button color not changing when mouse is hovered over the button

1 Answers