Calling two different animations from the same click event

Question

I'm currently working on a Surface application where I need to call two different animations when a button is tapped.

How exactly should I be doing this? I'd like to do it declaratively if it's possible. Should I be using MultiTriggers for this, or?

Thanks in advance!

Kep Amun · Accepted Answer · 2010-03-16T14:54:09.637

You can do this with an EventTrigger.

You can define the trigger in a FrameworkElement.Triggers property of any container of both the button and the animation targets.

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

If there is a relative path to your targets, you can use Storyboard.Target="{Binding PathToTarget}" in place of Storyboard.TargetName="TargetName".

EDIT: (see comments)

If you are animating the button itself, you can put the triggers right in the button and you don't need any target names.

Example - Animating the size of a 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>

Hey omsdsmr, thanks for your answer :) greatly appreciated! I see what you mean, but in this case, it is the button itself that needs to be animated. I.e.: when you click it, it will be larger, when you click it again, it will go back to it's normal size.. — bomortensen, Mar 16 '10 at 13:15
Ah... You're in luck, what you want is actually easier than I thought. I've updated my answer with another example. Best of luck. — Kep Amun, Mar 16 '10 at 14:56
omdsmr: I think that might be what I am looking for :) going to try it out when I get to the office tomorrow and I'll let you know how it works out. Thanks a lot for your help! — bomortensen, Mar 16 '10 at 20:28
Hey omdsmr, I've toyed around with the togglebutton control now and it works superb! Just how I wanted it to be :) Thanks for the input! — bomortensen, Mar 17 '10 at 11:18

Calling two different animations from the same click event

1 Answers1