WPF, how to make button background blink upon click, using xaml

Question

I want all buttons to blink for 5 seconds when they are clicked.

I try to do it via a style that applies to all buttons (do I need to refer to the style when I declare buttons in xaml or does the style automatically apply to all buttons?)
I can make the Foreground change color but what I want is that the background behind the Text of the button changes color not the text itself.
I currently have a ColorAnimation but I want the button background to blink by alternating between two colors, I do not want the whole color spectrum to be displayed.

I have the following code so far. Can someone please help me in the right direction?

Edit

If animating the button background is tougher to animate then I can easily settle with the foreground animation.

<Style TargetType="{x:Type Button}">
        <Style.Triggers>
            <EventTrigger RoutedEvent="Click">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard BeginTime="00:00:00" 
                                RepeatBehavior="Forever" 
                                Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)">
                            <ColorAnimation From="Black" To="Red" Duration="0:0:5"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Style.Triggers>
    </Style>

score 4 · Accepted Answer · edited May 23 '17 at 11:46

1.Yes the style is applied to all buttons

2.Animate backgrouund Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)". Make sure your animation style is not overwritten by the default styles. ref stackoverflow

3.Maybe run 2 opacity animations at the same time. One going from transparant to black and the other from red to transparant at the same time.This is just an idea, didn't try it... 1. List item

EDIT

I tried this code and it worked. The key is to disable the default style width OverridesDefaultStyle="False"

<Window.Resources>
<Style TargetType="{x:Type Button}">
      <Setter Property="Background" Value="Blue"></Setter>
    <Style.Triggers>
        <EventTrigger RoutedEvent="Click">
            <EventTrigger.Actions>
                <BeginStoryboard>
                        <Storyboard BeginTime="00:00:00" 
                        RepeatBehavior="Forever" 
                                    AutoReverse="True"
                        Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)">
                            <ColorAnimation From="Black" To="Red" Duration="0:0:1"/>
                        </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Style.Triggers>
</Style>

</Window.Resources>
<Button Width="100" Height="35" OverridesDefaultStyle="False"  Focusable="False">dfdfdf</Button>

EDIT

Also add Focusable="False" to show the black to red color. Change the timings the way you like.

Nothing happens. This is my coloranimation: ``. But it does not have any effect. — Matt, Aug 01 '16 at 07:34

score 2 · Answer 2 · answered Aug 01 '16 at 09:42

You could try the following. I dont think this is very pretty, but matches your requirement without fading the colors:

 <Style TargetType="{x:Type Button}">
            <Style.Resources>
                <Storyboard x:Key="Storyboard" Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)">
                    <ColorAnimationUsingKeyFrames  Duration="0:0:5" >
                        <DiscreteColorKeyFrame KeyTime="0:0:1" Value="Black"></DiscreteColorKeyFrame>
                        <DiscreteColorKeyFrame KeyTime="0:0:2" Value="Red"></DiscreteColorKeyFrame>
                        <DiscreteColorKeyFrame KeyTime="0:0:3" Value="Black"></DiscreteColorKeyFrame>
                        <DiscreteColorKeyFrame KeyTime="0:0:4" Value="Red"></DiscreteColorKeyFrame>
                        <DiscreteColorKeyFrame KeyTime="0:0:5" Value="Black"></DiscreteColorKeyFrame>
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </Style.Resources>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Click">
                    <EventTrigger.Actions>
                        <BeginStoryboard Name="flash" Storyboard="{StaticResource Storyboard}"/>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>

Just change the colors in DiscreteColorKeyFrame as your need them

As indicated in a comment to another answer, somehow `Background` does not change the color of my button background, even when I explicitly specify the background color of a button. This seems to be an issue many are experiencing. The idea you had, though, regarding the animation works (with `Foreground`), though it is a crude solution. In the end I decided to use a `DoubleAninmation` targeting `Opacity`. — Matt, Aug 02 '16 at 05:28
Do you set the initial Background of the button somewhere? You behavior sounds exactly like this. — lokusking, Aug 02 '16 at 05:40
I do not but it may be that a control that contains the button higher up the tree may set it. It is hard to tell as I use a third party library (DevExpress) where I host the button in a DevExpress control. — Matt, Aug 02 '16 at 10:04

score -1 · Answer 3 · answered Aug 02 '16 at 05:30

I seem to have problems in general to change the background color of a button, and this seems to be a widely shared issue. I instead came up with the following solution which works as well. It targets Opacity via DoubleAnimation and is pretty flexible.

<Style TargetType="{x:Type Button}">
        <Style.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                       <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.4" RepeatBehavior="30x"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Style.Triggers>
    </Style>

WPF, how to make button background blink upon click, using xaml

3 Answers3