Hover rounded corner button change its background color using ResourceDictionary

Question

I have created a ResourceDictionary style sheet that have a style named btn_default. I plan to use it on all the buttons in my program. My problem is that when I hover the button then the background-color doesnt change. The font color changes.

button_default

button_default:hover

I tried in my code to change the "Setter Property="Background" Value="#b5b5b5"", however I guess that doesnt affect the Border-tag, but the Style-tag?

ResourceDictionary

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MSDNSample">

    <!-- Btn default -->
    <Style x:Key="btn_default" TargetType="{x:Type Button}">
        <Setter Property="FontFamily" Value="Calibri"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Foreground" Value="#d9d9d9" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border CornerRadius="5" BorderThickness="1" Padding="6,4,6,4" Background="#6c6c6c" BorderBrush="#393939">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="#b5b5b5"/>
                            <Setter Property="Foreground" Value="#000000" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>

            </Setter.Value>
        </Setter>
    </Style>
    <!-- //Btn default -->
</ResourceDictionary>

Main

<Button x:Name="buttonExplorer" Content="Explorer" Style="{StaticResource btn_default}" Margin="0,0,6,0" />
<Button x:Name="buttonProcess" Content="Process" Style="{StaticResource btn_default}" Margin="0,0,6,0" />

Pavel Anikhouski Pavel Anikhouski · Accepted Answer · 2020-02-02T18:18:04

You should declare Background property of Border using TemplateBinding extension and set Background value in Style setter, otherwise it'll never be updated

<Style x:Key="btn_default" TargetType="{x:Type Button}">
   <Setter Property="FontFamily" Value="Calibri"/>
   <Setter Property="FontSize" Value="14"/>
   <Setter Property="Foreground" Value="#d9d9d9" />
   <Setter Property="Background" Value="#6c6c6c"/>
   <Setter Property="Template">
      <Setter.Value>
           <ControlTemplate TargetType="Button">
               <Border CornerRadius="5" BorderThickness="1" Padding="6,4,6,4" BorderBrush="#393939" Background="{TemplateBinding Background}">
                     <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
               </Border>
               <ControlTemplate.Triggers>
                   <Trigger Property="IsMouseOver" Value="True">
                       <Setter Property="Background" Value="#b5b5b5"/>
                       <Setter Property="Foreground" Value="#000000" />
                   </Trigger>
               </ControlTemplate.Triggers>
           </ControlTemplate>
       </Setter.Value>
   </Setter>
</Style>

Hover rounded corner button change its background color using ResourceDictionary

1 Answers