How to animate different buttons one by one with same animation, WPF - 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>