Custom Style Button With Modified Background

Question

I have a Button that I want to have an Orange Background with a White Foreground. When I mouse over the Button I would like it to display in DarkOrange. This is the Style I am using at the moment.

<Style TargetType="{x:Type Button}">
    <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="Foreground" Value="White"/>
            <Setter Property="Background" Value="DarkOrange"/>
        </Trigger>
    </Style.Triggers>
</Style>

If I don't modify the original Background color of the my Button this style works fine. For example;

<Button Grid.Row="2" Content="SIGN IN" />

has no issues. However, when I want to change the default Background of the Button, i.e

<Button Grid.Row="2" Content="SIGN IN" Background="Orange"/>

the style does not work. I assume this is because I am now overriding the Background property that the IsMouseOver is attempting to change.

Is there a way I can achieve both a modified default Background and a IsMouseOver effect? I have also tried setting <Border Background="Orange"> but to no effect still.

score 1 · Accepted Answer · edited May 23 '17 at 11:50

1

You could just add a setter to your Style instead of adding a Background property to your Button. Like this:

<Style TargetType="{x:Type Button}">
   <Setter Property="Background" Value="Orange"/>
   <Setter Property="Template">
       ...
   </Setter>
   <Style.Triggers>
       ... 
  </Style.Triggers>
</Style>

Here is an another example of how to use it.

edited May 23 '17 at 11:50

Community

1
1

answered Feb 23 '16 at 10:01

Salah Akbari

39,330
10
79
109

Artyom Shmarlovsky · Answer 2 · 2016-02-23T10:11:23.137

  <Style TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate x:Name="Border" TargetType="{x:Type Button}">
                    <Border x:Name="Border" Background="{TemplateBinding Background}">
                        <ContentPresenter x:Name="CP" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="CP" Property="TextBlock.Foreground" Value="White"/>
                            <Setter TargetName="Border" Property="Background" Value="DarkOrange"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

This working fine with

<Button Grid.Row="2" Content="SIGN IN" Background="Orange"/>

Custom Style Button With Modified Background

2 Answers2