Silverlight: Delay in Storyboard's Completed event handler

Question

The storyBoard_Completed event is invoked in a delay of about half a second after the visual animation had finished.

Would be glad for some more eyes to check out my Storyboard XAML:

    <Storyboard x:Key="blaAnimation" Completed="storyBoard_Completed">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="bla1" Storyboard.TargetProperty="Offset" Completed="bla_Completed">
            <DiscreteDoubleKeyFrame KeyTime="0:0:0" x:Name="bla1StartKeyFrame"/>

            <EasingDoubleKeyFrame Value="-10.2" KeyTime="0:0:1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <PowerEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>

            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-20" x:Name="bla1Animation">
                <EasingDoubleKeyFrame.EasingFunction>
                    <ElasticEase EasingMode="EaseOut" Oscillations="5" Springiness="20"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>

        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="bla2" Storyboard.TargetProperty="Offset" BeginTime="0:0:0.1" Completed="bla2_Completed">
            <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.1" x:Name="bla2StartKeyFrame"/>

            <EasingDoubleKeyFrame Value="-10.2" KeyTime="0:0:1.1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <PowerEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>

            <EasingDoubleKeyFrame KeyTime="0:0:2.1" Value="-20" x:Name="bla2Animation">
                <EasingDoubleKeyFrame.EasingFunction>
                    <ElasticEase EasingMode="EaseOut" Oscillations="5" Springiness="20"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>

        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="bla3" Storyboard.TargetProperty="Offset" BeginTime="0:0:0.18" Completed="bla3_Completed">
            <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.2" x:Name="bla3StartKeyFrame"/>

            <EasingDoubleKeyFrame Value="-10.2" KeyTime="0:0:1.2">
                <EasingDoubleKeyFrame.EasingFunction>
                    <PowerEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>

            <EasingDoubleKeyFrame KeyTime="0:0:2.2" Value="-20" x:Name="bla3Animation">
                <EasingDoubleKeyFrame.EasingFunction>
                    <ElasticEase EasingMode="EaseOut" Oscillations="5" Springiness="20"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>


    </Storyboard>

Thanks in advance, --Ran.

Answer 1

When in doubt - Blend it

Following on from comment trail (above), the end result is "If you have access to it (or can afford it), always use Expression Blend for creating animation storyboards".

Blend is the best way to learn animation which can get very complex quite easily. Blend also optimises certainly animations automatically for you.

As you know there is no support at all in VS 2010 for authoring animation, except with XAML, and that is error prone. It is also very hard to visualise multiple animations in your head with only text to go by :)