Stop animation outside of scope

Question

I have a complicated animation, which does some heavy changes to a view (changes visibility, opacity, background brushes, etc. of some controls) and I'd like to revert what this animation did. Stop/Remove storyboard "should" do that.

However, there is a problem:

The animation runs when one button is clicked, but stopped when another is clicked. And with this approach I am getting the following error.

System.Windows.Media.Animation Warning: 6 : Unable to perform action because the specified Storyboard was never applied to this object for interactive control.; Action='Remove' ......

Here is how I am doing it:

<!-- button which start animation -->
<Button ...>
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <EventTrigger.Actions>
                <BeginStoryboard x:Name="storyboardUserClick">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames ...

<!-- button which should revert what animation did  --->
<Button ...>
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <EventTrigger.Actions>
                <RemoveStoryboard BeginStoryboardName="storyboardUserClick" ...

Is there a simple way, preferably without code behind (well, attached property may be an option in worst case) to achieve that? I have feeling it is something very simple...

score 0 · Answer 1 · answered Aug 05 '15 at 08:34

I found the answer here.

The idea is to move animation (I say animation, but I mean Storyboard and even more specifically BeginStoryboard) into a scope accessible by RemoveStoryboard. Something like

<Grid>
    <Button x:Name="buttonStart" ...>
    <Button x:Name="buttonStop" ...>

    <Grid.Triggers>
        <EventTrigger SourceName="buttonStart" RoutedEvent="Button.Click">
            <BeginStoryboard x:Name="storyboardUserClick">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames ...
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger SourceName="buttonStop" RoutedEvent="Button.Click">
            <RemoveStoryboard BeginStoryboardName="storyboardUserClick" />
        </EventTrigger>
    </Grid.Triggers>
</Grid>

Stop animation outside of scope

1 Answers1

Linked