Lesson 3 : Animation in Silverlight

Wouldn't you agree that  it would be cool to use animations in our application  ? 

They could be used in many ways, such as a form moving  to a side as it is completed,  or a slideshow ,  or even a page flip animation when you want to continue to the next page.

The applications are limitless, and creating animations is even easier that you might imagine :)  So lets dive in,  and create our first animation , { for this you will need Microsoft Expression Blend }.

We will go through the following concepts in the course of this Lesson

1. Creating the elements to be animated.
2. Creating a Storyboard.
3. Animating elements .
4. Controlling Animation through code.

Step 1 :   Creating the elements to be animated.

1. Open Microsoft Expression Blend and create a new Silverlight Project.

2.  Click on the rectangle control  on the left side of the screen and drag it onto the grid to create a Rectangle.  The properties editor for that rectangle will also pop up to the right side.

3.  You can click on the Colors in the Properties pane to change the colors of the rectangle. In fact, we will  animate this rectangle with different colors as out first task.


Step 2:  Creating a Storyboard.

1. Click on "Objects and TimeLine" at the bottom left corner of Blend , to start creating a Storyboard.
   

2. Click on the  + button at the Top right side of this "Objects and TimeLine" pane. -> It will open the StoryBoard  creation Dialog.  -> Press OK , to create a StoryBoard with name StoryBoard1

Step 3 : Animating Elements. 

1.  A Time Line appears at the bottom of Blend, showing the time in seconds . We need to create key frames along this timeline.  This has an oval button which creates a new frame.

4. Drag the Yellow Line forward, and change the color of the rectangle.   A new keyframe gets automatically inserted at that point.

5.  There is a small play button above the timeline. Click it to see the preview of the animation

6. You can drag the yellow line forward, and move the rectangle to a new position. Another key frame gets inserted . Now close the storyboard by clicking the X  symbol beside the  +  symbol.

7. If you Press F5  to Run the application , you will see that animation has not started. We need to start it through code.

Step 4:  Animating through Code
  
1. In the Projects Pane present beside the Properties pane,  expand the MainPage.xaml  to show MainPage.xaml.cs

2. Double click on the MainPage.xaml.cs and go to the  Constructor

   Below the InitializeComponent() method, add    Storyboard1.Begin();

3.  Now press  F5  to  Run  the  project.  The animation plays properly, but it plays only once.

4. To play multiple times, you an do it in a number of ways.  The simplest way is to play the animation whenever the completed event is raised.  To do this, add the following code to the constructor

            Storyboard1.Begin();
            Storyboard1.Completed+=new System.EventHandler(Storyboard1_Completed); 

 and add a new event handler ,
        private void Storyboard1_Completed(object sender, System.EventArgs e)
        {
                Storyboard1.Begin();
        }

5.  Now press F5  and Run the application.  You can notice that it will run infinitely.

6.  If you want the animation to run only for a certain number of times or a certain period of time,
you can use the RepeatBehaviour  property of the StoryBoard.  For example, to repeat the animation 20 times,  use the following code  before the StoryBoard1.Begin().

Storyboard1.RepeatBehavior = new RepeatBehavior(3);

This way, you can control your animation using code. Hope you can explore the other options .  For more detailed examples and animation properties, watch this video .