WPF changing Button background temporarily on Click

Question

I have a white XAML button in my program, that when I click it should change it's background color to green and then back to white (as a confirmation of it being clicked). I already tried this and this but could not get it to work either way. The problem with the second link being me not understanding the answers. The solution of the first link just does not change the color of the button. The following is my XAML style for the button.

<Style x:Key="ButtonStyleGeneral" TargetType="{x:Type Button}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
    <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
    <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true">
                    <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsDefaulted" Value="true">
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter Property="Button.Background" Value="Green" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

So how can i achieve this short color change to confirm to the user that the button has been pressed?

UPDATE: The code below works like a charm for new buttons but stops working as soon as i change the background color of the button in the designer!

Answer 1

You should set the Background property of the Border element in your trigger:

<Trigger Property="IsPressed" Value="true">
    <Setter TargetName="border" Property="Background" Value="Green" />
</Trigger>

A local value takes precedence over the value set by a Style. Setting the Background of the Border´ element in the template instead of the Buttonitself fixes the issue. Then your template should work with aButton` element like this:

<Button Background="Yellow" Style="{StaticResource ButtonStyleGeneral}" Content="Button" />