Creating an Animation in Silverlight - Page 3
       by kirupa  |  2 November 2008

In the previous page, you created the animation and everything seems to work well...inside Blend. In this page, I'll show you how to actually get your animation to play inside your browser.

Playing the Animation
Currently, if you happen to press F5 to preview your application, the browser will load as expected. Your Silverlight application will display with your blue circle appearing also. The only problem is that your animation won't be playing.

In Silverlight, there are two things you need to do to have a working animation. The first step is to actually create the animation - which you have already done in the previous page. The second step is to actually have your animation play, and that will require you writing a line of code, and this page will show you how.

In Blend, click on the Project tab to see the Files panel that displays all of the files that make up your project:

[ the Project tab gives you an overview of the files that make up your project ]

Right-click on the Solution node and select Edit in Visual Studio. A few seconds later, you will see Visual Studio launch and display these exact files in its version of the Files panel you see in Blend, the Solution Explorer:

[ the Solution Explorer's contents should look familiar to you! ]

Expand Page.xaml if it hasn't already been expanded, and double click on Page.xaml.cs to edit it. This is the code-behind file for the UI (Page.xaml) that you have been editing in Expression Blend, and it contains the following code:

namespace SimpleAnimation

{

public partial class Page : UserControl

{

public Page()

{

// Required to initialize variables

InitializeComponent();

}

}

}

You will see this mysterious line containing the function InitializeComponent(). Directly after that line, add the following line of code:

MyAnimation.Begin();

Your entire segment of code should now look like the following:

namespace SimpleAnimation

{

public partial class Page : UserControl

{

public Page()

{

// Required to initialize variables

InitializeComponent();

 

MyAnimation.Begin();

}

}

}

Save this file and hit F5 in Visual Studio or Expression Blend to run your application. Notice that your little animation will play immediately once the page has loaded. The reason is that when your application loads, your MyAnimation.Begin() code gets called.

If you remember, MyAnimation was the name I gave to the animation I created in Blend. In code, I am just referencing it again and calling the Begin method on it. That is all there is to it.

Conclusion
As you can see, creating animations in Silverlight is pretty straightforward, but it does have its quirks such as having to write code to play your animation! This was a very basic, introductory tutorial. In subsequent tutorials on the Silverlight tutorials page, I will delve a little bit deeper into other animation tips and tricks that you should learn.

1 | 2 | 3