0

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

enter image description here

button_default:hover

enter image description here

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" />

1 Answer 1

2

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>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.