Animating WPF buttons from inside a style

Question

Hello.

I'm currently trying to make buttons on my forms animate using WPF - this is part of a University course, so it's all about demonstrating knowledge rather than looking good.

We've been shown how to animate per-button, but since I want the animation to be the same on every button I'm using a style - something we've not been taught and which finding documentation for is like finding evidence of Big Foot, IMO.

My code so far is this:

 <Style TargetType="{x:Type Button}" x:Key="ButtonAnimation">
            <Style.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Angle"
                                                 To="360" Duration="0:0:1"
                                                 FillBehavior="Stop" />
                        </Storyboard>
                    </BeginStoryboard>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="ScaleY"
                                                 To="0.1" Duration="0:0:0.5"
                                                 FillBehavior="Stop" AutoReverse="True" />
                        </Storyboard>
                    </BeginStoryboard>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="ScaleX"
                                                 To="0.1" Duration="0:0:0.5"
                                                 FillBehavior="Stop" AutoReverse="True" />
                        </Storyboard>
                    </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>    

The TargetProperty="" values are incorrect, and for the life of me I cannot find anywhere online that demonstrates what should be there. The values currently there are what you would have if the animation was applied to each button rather than in a style.

How do I get this to work? What is the correct TargetProperty?

Answer 1

I think this...

Storyboard.TargetProperty="Angle"

...should be...

Storyboard.TargetProperty="(Button.RenderTransform).(RotateTransform.Angle)"

And the other ones:

Storyboard.TargetProperty="(Button.RenderTransform).(ScaleTransform.ScaleY)"
Storyboard.TargetProperty="(Button.RenderTransform).(ScaleTransform.ScaleX)"

You might have to replace RenderTransform with LayoutTransform, depending on what you are using in your markup.

However, this will only work if you only have one of the two Transforms, i.e. RotateTransform or ScaleTransform. If you have them in a TransformGroup, things get even more complicated. If you have defined the RotateTransform as the first child and the ScaleTransform as the second child of the TransformGroup, then this should work (not tested):

(Button.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)
(Button.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.X)
(Button.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.Y)

However, you have to be careful when changing the order of the Transforms or remove one of them because this will break your animations...

Good luck!