从同一个点击事件中调用两个不同的动画

时间:2010-03-16 10:57:03

标签: wpf xaml animation blend pixelsense

我目前正在使用Surface应用程序,我需要在点击按钮时调用两个不同的动画。

我该怎么做?如果有可能,我想以声明的方式做。我应该使用MultiTriggers,还是?

提前致谢!

1 个答案:

答案 0 :(得分:2)

您可以使用EventTrigger执行此操作。

您可以在按钮和动画目标的任何容器的FrameworkElement.Triggers属性中定义触发器。

    <StackPanel
        Orientation="Horizontal">

        <StackPanel.Triggers>

            <EventTrigger
                SourceName="TheButton"
                RoutedEvent="Button.Click">

                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation
                            Storyboard.TargetName="LimeRect"
                            Storyboard.TargetProperty="Fill.Color"
                            To="Red" />
                        <ColorAnimation
                            Storyboard.TargetName="RedRect"
                            Storyboard.TargetProperty="Fill.Color"
                            To="Lime" />
                    </Storyboard>
                </BeginStoryboard>

            </EventTrigger>

        </StackPanel.Triggers>


        <Button
            x:Name="TheButton"
            Content="Play" />

        <Rectangle
            x:Name="LimeRect"
            Fill="Lime"
            Width="50"
            Height="50" />

        <Rectangle
            x:Name="RedRect"
            Fill="Red"
            Width="50"
            Height="50" />

    </StackPanel>

如果您的目标有相对路径,则可以使用Storyboard.Target="{Binding PathToTarget}"代替Storyboard.TargetName="TargetName"

编辑:(见评论)

如果您要为按钮本身设置动画,则可以将触发器放在按钮中,而不需要任何目标名称。

示例 - 动画ToggleButton的大小:

    <ToggleButton
        Content="Toggle"
        Width="50"
        Height="50">

        <ToggleButton.Triggers>

            <EventTrigger
                RoutedEvent="ToggleButton.Checked">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Duration="00:00:00.2"
                            Storyboard.TargetProperty="Width"
                            To="100" />
                        <DoubleAnimation
                            Duration="00:00:00.2"
                            Storyboard.TargetProperty="Height"
                            To="100" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>

            <EventTrigger
                RoutedEvent="ToggleButton.Unchecked">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Duration="00:00:00.2"
                            Storyboard.TargetProperty="Width"
                            To="50" />
                        <DoubleAnimation
                            Duration="00:00:00.2"
                            Storyboard.TargetProperty="Height"
                            To="50" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>

        </ToggleButton.Triggers>

    </ToggleButton>