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

Posted 2023-02-22

【中文标题】从同一个点击事件中调用两个不同的动画

【英文标题】：Calling two different animations from the same click event

【发布时间】：2010-03-16 10:57:03

【问题描述】：

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

我应该怎么做呢？如果可能的话，我想以声明方式进行。我应该为此使用 MultiTriggers，还是？

提前致谢！

【参考方案1】：

您可以使用 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"。

编辑：（见 cmets）

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

示例 - 为 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>

【讨论】：

嘿 omsdsmr，感谢您的回答 :) 非常感谢！我明白你的意思，但在这种情况下，需要动画的是按钮本身。即：当你点击它时，它会变大，当你再次点击它时，它会恢复到正常大小..

啊...你很幸运，你想要的实际上比我想象的要容易。我用另一个例子更新了我的答案。祝你好运。

omdsmr：我想这可能就是我要找的东西 :) 我明天去办公室时会尝试一下，我会告诉你效果如何。非常感谢您的帮助！

嘿 omdsmr，我现在玩弄了切换按钮控件，它工作得非常好！正是我想要的 :) 感谢您的意见！