How to create a dynamic storyboard in silverlight

Introduction

This is a small article which describes how to create animation at runtime in silverlight.

Background

I have started learning silverlight and find its very easy to do animation using blend (The IDE). Being a developer I always like to do the things in my code as it gives you more flexibility and control. Here my problem begins. So I have decided to share my sample application with everyone.

Using the code

I have created a simple animation in the sample app. In my main canvas I have an Ellipse. On mouse click on the canvas there is a small animation.

Here is the code for creating an Ellipse. You can create it at design time and use it in your animation.

//Code to create an Ellipse and adding it to the main canvas.
Ellipse objEllipse = new Ellipse();
objEllipse.Width = 30;
objEllipse.Height = 30;
objEllipse.SetValue(Canvas.TopProperty, 300.0);
objEllipse.SetValue(Canvas.LeftProperty, 50.0);
objEllipse.Fill = new SolidColorBrush(Colors.Blue);
objEllipse.Name = "ellipse";
this.LayoutRoot.Children.Add(objEllipse);

The pattern for creating an animation is very simple.
1. Create a storyboard
2. Create an Animation
3. Create some Key frames
4. Add key frames to the animation, animation to the storyboard and storyboard to resources.

Here is the method that you can use for creating an animation.
void StartAnim(double top, double left)

{

try

{

//Remove the storyboard object if it already added to the resources.

if (this.Resources.Contains("Story"))

this.Resources.Remove("Story");



//Create a storyboard object

Storyboard sb = new Storyboard();



sb.Duration = new Duration(TimeSpan.FromSeconds(1));

//If you want to repeat your animation than use the repeat behaviou

//sb.RepeatBehavior = RepeatBehavior.Forever;



///animation for top properety

///Create an animation object

DoubleAnimationUsingKeyFrames anim = new DoubleAnimationUsingKeyFrames();

//set the animation and the control to animate

Storyboard.SetTargetName(anim, "ellipse");

//set the animation and the property to animate

Storyboard.SetTargetProperty(anim, new PropertyPath("(Canvas.Top)"));

anim.BeginTime = new TimeSpan(0, 0, 0);



//creat and add keyframe to the animation

EasingDoubleKeyFrame keyframe = new EasingDoubleKeyFrame();

keyframe.Value = top;

keyframe.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0));

anim.KeyFrames.Add(keyframe);



EasingDoubleKeyFrame keyframe1 = new EasingDoubleKeyFrame();

keyframe1.Value = top + 150;

keyframe1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(500));

anim.KeyFrames.Add(keyframe1);



EasingDoubleKeyFrame keyframe2 = new EasingDoubleKeyFrame();

keyframe2.Value = top;

keyframe2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(1000));

anim.KeyFrames.Add(keyframe2);



//animation for left property

DoubleAnimationUsingKeyFrames anim_left =

new DoubleAnimationUsingKeyFrames();

Storyboard.SetTargetName(anim_left, "ellipse");

Storyboard.SetTargetProperty(anim_left, new PropertyPath("(Canvas.Left)"));

anim_left.BeginTime = new TimeSpan(0, 0, 0);



EasingDoubleKeyFrame keyframe_l = new EasingDoubleKeyFrame();

keyframe_l.Value = left;

keyframe_l.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0));

anim_left.KeyFrames.Add(keyframe_l);



EasingDoubleKeyFrame keyframe_l1 = new EasingDoubleKeyFrame();

keyframe_l1.Value = left + 100;

keyframe_l1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(800));

anim_left.KeyFrames.Add(keyframe_l1);



EasingDoubleKeyFrame keyframe_l2 = new EasingDoubleKeyFrame();

keyframe_l2.Value = left + 250;

keyframe_l2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(1000));

anim_left.KeyFrames.Add(keyframe_l2);



//adding animation to the storyboard

sb.Children.Add(anim);

sb.Children.Add(anim_left);



//adding storyboard to the resorces

this.Resources.Add("Story", sb);

//Start the animation

sb.Begin();

}

catch (Exception ex)

{

}

}


Points of Interest

I am learning and at the same time enjoying my coding. Most of the time you will have a requirement for dynamic animation. Because we want to do something based on some logic. By time I learn something new I will share it here. Please pardon me if you find it difficult to understand due to my poor English. This is my first article in silverlight and hope it will help someone.