Question

I have 2 custom controls in my silverlight application and each one is having its own animations. I want to play all of the animations in order but when they play at the same time, the animations are not playing properly. How can I put some delay between them?

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            Dispatcher.BeginInvoke(() => { 
myCustomControl1.Play();
Thread.Sleep(200);
            Dispatcher.BeginInvoke(() => { myCustomControl2.Play(); });
        }

Answer 1

I’m assuming your controls are using a StoryBoard to play the animations. StoryBoard has a “Completed” event that fires after it completes running. So, you could do something like:

public class CustomControl:Control
{
public override void ApplyTemplate()
{
   _storyBoard=GetTemplateChild("AnimationStoryBoard") as Storyboard;
   _storyBoard.Completed+=OnCompleted;
}
public event eventhandler AnimationCompleted;

public void Play()
{
   _storyBoard.Begin();
}

private void OnCompleted(object sender, EventArgs args)
{
    if(AnimationCompleted!=null)
        AnimationCompleted(this,EventArg.Empty);
}
}

What you can then do is chain your animations together:

myCustomControl1.AnimationCompleted+=RunSecondAnimation;
myCustomControl1.Play();

private void RunSecondAnimation(object sender, EventArgs args)
{
    myCustomControl2.Play();
}

Now we can guarantee that animation 2 will always happen after animation 1.