如何使用相同的动画，WPF一个一个地为不同的按钮设置动画

Question

我是 WPF 新手，有一个可能很愚蠢的问题。

我试图用相同的动画（旋转 360 度）为 4 个按钮设置动画，当其中一个被点击时，只有这个被动画化。

这是我目前所拥有的：

    <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>

这里第一个按钮中定义了rotButton：

<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>

如何将此代码用于所有其他按钮并为每个按钮使用“通用”Button.RenderTransform？应该有更智能的方法来创建 3 个以上的故事板并为每个按钮使用 rotButton1、rotButton2 等。

我希望这是有道理的，并指出我正确的方向:)

谢谢

Answer 1

如果为按钮创建样式，则可以使用 setter 为使用该样式的每个按钮实例设置 RenderTransform。此外，样式可以有触发器。

诀窍是正确的路径语法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>