How to animate different buttons one by one with same animation, WPF

Question

I'm new to WPF and have a probably stupid question.

I'm trying to animate 4 buttons with the same animation (rotate 360 degrees) when one of them is clicked and only this one gets animated.

Here is what I have so far:

    <Window.Resources>
    <Storyboard x:Key="Storyboard" BeginTime="00:00:00" Duration="00:00:10">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rotButton" Storyboard.TargetProperty="(RotateTransform.Angle)">
            <SplineDoubleKeyFrame KeyTime="0:0:00.0" Value="0.0" />
            <SplineDoubleKeyFrame KeyTime="0:0:01.0" Value="360.0" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

</Window.Resources>

And rotButton is defined in the first button here:

<Button Click="Button_Click">
            <StackPanel>
                <Image Source="open.png" Height="46" Width="48" />
            </StackPanel>
            <Button.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="rotButton" Angle="0" CenterX="25" CenterY="25" />
                    <ScaleTransform x:Name="scaButton" ScaleX="1" ScaleY="1" CenterX="50" CenterY="25" />
                </TransformGroup>
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{StaticResource Storyboard}" />
                </EventTrigger>
            </Button.Triggers>
        </Button>

How can I use this code for all other buttons and have "common" Button.RenderTransform for every button? There should be a lot more smarter way of creating 3 more storyboards and using rotButton1, rotButton2, etc for each button.

I hope it makes sense and point me in the right direction :)

Thanks

Answer 1

If you create a style for your button, you can use a setter to set the RenderTransform for each instance of button that uses that Style. Also, styles can have triggers.

The trick is the right path syntax http://blogs.charteris.com/blogs/patl-closed/archive/2007/03/20/Complex-PropertyPath-syntax.aspx

    <Window.Resources>
    <TransformGroup x:Key="transformGroup">
        <RotateTransform Angle="0" CenterX="25" CenterY="25" />
        <ScaleTransform ScaleX="1" ScaleY="1" CenterX="50" CenterY="25" />
    </TransformGroup>
    <Style x:Key="MyButtonStyle"  TargetType="{x:Type Button}">
        <Setter Property="RenderTransform" Value="{StaticResource transformGroup}"/>
        <Style.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard BeginTime="00:00:00" Duration="00:00:10">
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)">
                            <SplineDoubleKeyFrame KeyTime="0:0:00.0" Value="0.0" />
                            <SplineDoubleKeyFrame KeyTime="0:0:01.0" Value="360.0" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <StackPanel>
        <Button Style="{StaticResource MyButtonStyle}"/>
        <Button Style="{StaticResource MyButtonStyle}"/>           
    </StackPanel>
</Grid>