Silverlight: Delay in Storyboard Completed Event Handler

Question

The storyBoard_Completed event is raised with a delay of about half a second after the completion of the visual animation.

I would be glad to have a few more eyes to check out my folding 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

If in doubt - Mix it

Following the comment (above), the end result is "If you have access to it (or it can allow it), always use Expression Blend to create animated storyboards . "

Blend - , . Blend .

, VS 2010 , XAML, . :)