Wpf – Start Storyboard within another Storyboards Timeline

animationstoryboardwpf

I have a storyboard(1) that does some basic animations in 2 seconds. I want the storyboard(1) to do all the property animations I have set it up to do (this all works fine). But at 3 seconds into the storyboard(1) I want to begin storyboard(2) and exit storyboard(1) without user interaction at all.

Only thing I've seen that allows me to do this is when the user clicks on something. I want this to be automatic based on the position of the current storyboard(1) timeline.

I hope this makes enough sense. Please let me know if you need me to explain something in more detail.

Thanks.

Edit: Please post the answer in XAML or VB.net language. 🙂

Best Answer

Normally in order to control animations during the timeline you would use "keyframes". Keyframe animations allow you to define specific values for the property you are animating at specific times. In WPF every animation has a corresponding keyframe animation, like 'DoubleAnimation' has 'DoubleAnimationUsingKeyFrames'.

I don't think it's possible to start a new storyboard from within an animation. However you could achieve the same result by having both storyboards on the same timeline and starting storyboard(2) with a specific delay based on the duration of storyboard(1). Something like:

<StackPanel>
    <Rectangle Name="recProgressBar"
               Fill="Orange"
               Width="1"
               Height="25"
               Margin="20"
               HorizontalAlignment="Left" />
    <Button Content="Start Animation"
            Width="150"
            Height="25">
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="recProgressBar"
                                         Storyboard.TargetProperty="Width"
                                         From="0"
                                         To="250"
                                         Duration="0:0:2" />
                        <Storyboard BeginTime="0:0:3">
                            <ColorAnimation Storyboard.TargetName="recProgressBar"
                                            Storyboard.TargetProperty="Fill.Color"
                                            To="DarkGreen"
                                            Duration="0:0:1" />
                        </Storyboard>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>
</StackPanel>

Here the color animation will start 1 second after the width animation has finished. It could be worth a try.

Related Topic