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>

Answer 1

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.

Answer 2

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>

Answer 3

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