如何使用相同的动画WPF逐个动画不同的按钮

时间:2012-11-17 23:44:39

标签: wpf animation button imagebutton

我是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等。

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

由于

1 个答案:

答案 0 :(得分: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>