Published: 14 Jul 2010
By: Anjaiah Keesari

In this article you will be learning the basic concepts of Animations in Silverlight Application, which includes Animation Types, namespace details, classes, objects used, implementation of different types of animations with XAML and with C# code and some more interesting samples for each animation.

Contents [hide]

What are the important properties/methods used in animations?

All animation classes are inherited from the Timline base class which contains some properties and methods available to all animation classes. Let's talk about the properties of the animation controls before proceeding with examples. I have highlighted some of the most important properties of the Timeline class below.

Figure 1: Animation or Timeline class properties

Animation or Timeline class properties

Duration: The Duration property allows you to specify the amount of time the Storyboard will take to play back. The value of Duration is based on the hours:minutes:seconds syntax. The Duration can also be specified on each animation control in the Storyboard instead of the Storyboard control.

BeginTime: The BeginTime property specifies the time, in hours:minutes:seconds format, in the Storyboard timeline to begin playback of the animation.

As the name suggests, the BeginTime property allows you to specify a time at which point the animation object begins activity. For example, you could specify a time of ten seconds on the BeginTime of a Storyboard. When you begin the Storyboard using the Begin method, the Storyboard will wait ten seconds and then begin.

Let's take an example to understand the BeginTime property. In this example the duration is 20 seconds but BeginTime time is 10 seconds. However, Duration is 20 seconds so it does not animate for 20 seconds. Instead it animates only for 10 seconds because of late BeginTime.

Figure 2: Understanding the BegineTime property

Understanding the BegineTime property

Figure 3: Example of BeginTime properties

Example of BeginTime properties

AutoReverse: If the AutoReverse property is set to True, the animation first plays forward and then immediately plays backward. This allows you to return the Silverlight controls to their original status. This is extremely useful when implementing animations that animate controls only when the mouse is over them.

Figure 4: AutoReverse Property example output

AutoReverse Property example output

RepeatBehavior: the RepeatBehavior property allows you to specify the number of times to repeat the animation. If you want the animation to run indefinitely, you can set the RepeatBehavior property to Forever. If AutoReverse is set to True, then playing forward and backward only counts as a single iteration. For example, the following Storyboard code repeats the animation three times:

Basically, a RepeatBehavior can be defined as:

  • Timespan string RepeatBehavior="0:0:4"
  • #x string RepeatBehavior="2x"
  • special value Forever RepeatBehavior="Forever"

Here is the example of how RepeatBehavior property is used.

Figure 5: RepeatBehavior Property example output

RepeatBehavior Property example output

FillBehavior: The FillBehavior property specifies how a timeline behaves when it ends. The default value for this property is HoldEnd, which means that after an animation ends, the object that was animated holds its final value. For example, if you animate the Opacity property of a Rectangle from 1 to 0 over 2 seconds, the default behavior is for the rectangle to remain at 0 opacity after the 2 seconds elapses. If you set FillBehavior to Stop, the opacity of the rectangle reverts to its original value of 1 after the animation ends.

Look at the IntelliSense in Visual Studio 2008.

SpeedRatio: This specifies the rate of time at which the current timeline elapses relative to its parent. The default value is 1.

Let us understand the SpeedRatio property in detail. If the SpeedRatio is set to 3, then the animation completes three times faster. If you decrease it, the animation is slowed down (for example, if SpeedRatio is set to 0.5 then the animation takes twice as long). Although the overall effect is the same as changing the Duration property of your animation, setting SpeedRatio makes it easier to control how simultaneous animations overlap.

The following snapshot describes the DoubleAnimation of the from/to type with the SpeedRatio property set to 2. This will cause the fade-in effect on the Image1 Image control to be completed in 0.5 seconds.

If you don't use any properties in the animation or the storyboard, it will use the default value of the properties and it animates just once.

Output of all of the above properties in action:

Figure 7: Properties of animation in action

Properties of animation in action

How to trigger the Storyboard Begin event with XAML?

As you begin to implement animations in your Silverlight applications, you will find that some of them should be started by the managed code. However, some animations should be started as soon as the application is loaded.

Starting the animation when the page is loaded is possible by nesting the Storyboard control in an EventTrigger element for the root layout control. The following code shows an example of nesting a Storyboard control in an EventTrigger element of a Grid control:

The EventTrigger attaches to the Loaded event of the Grid element and then defines the BeginStoryboard element as part of the TriggerActionCollection.

Example of ColorAnimation

Example of DoubleAnimation

Example of PointAnimation

Example of Animation with Code behind

Animation in XAML versus Animation in Code:

It is very important to understand when to use XAML and when to use code behind to implement animation in Silverlight.

Defining storyboard and Timeline in XAML is generally easier to implement and this is the preferred method in most of cases but sometimes it is time consuming and requires more work; in that case we may need to implement storyboard and timelines in backend C#/VB.NET code.

In the following example we have to change the opacity of the color of the grid cell when the mouse hovers the cell. To achieve this we can use XAML, but we would need to write many lines of code to define storyboards and timelines. With code it is just less than 50 lines.

Start, Stop, Pause, and Resume an animation

Animation must be started with Storyboard's begin() method, once animation started you can stop or pause and then a paused animation can be resumed.


I hope you enjoyed this article; please do not forget to leave your comments, since it's very important for me.

<<  Previous Article Continue reading and see our next or previous articles Next Article >>

About Anjaiah Keesari

Anjaiah Keesari is working as a Senior Software Engineer has more than 6 years experience working on ASP.NET, C#,VB.NET,AJAX, Silverlight, XAML, MVC and SQL Server. I hold Master's degree in Computer Science. I will be reachable at I like coding…

This author has published 2 articles on DotNetSlackers. View other articles or the complete profile here.

Other articles in this category

Displaying Notification Messages in a Silverlight Dashboard Application
In this article we will see how we could display a notification message and further a list of notifi...
Air Space Issue in Web Browser Control in Silverlight
Air Space issue is a common issue in Web Browser control in Silverlight and WPF. To explain the issu...
TextBox Row Filter in Telerik's RadGridView in Silverlight
If you have come across the JQGrid features, you might have seen the filter row available as the fir...
Widget Refresh Timer in MVVM in Silverlight
In this article we'll see how to refresh and disable widgets using the Model View View-Model pattern...
Develop a Flexible 2.5D Scene Editor Targeting Silverlight RPG Games - Part 2
In this article, I'm going to introduce to you how to construct such a 2.5D RPG game scene editor th...

You might also be interested in the following related blog posts

HTML5, JavaScript, Knockout, JQuery, Guide for Recovering Silverlight/WPF/C# Addicts. Part 2 - Solar System Animation built with SVG, Knockout and MVVM Pattern. read more
Introducing SharePoint 2010 Training at U2U read more
Using WCF with SQL Azure and Telerik OpenAccess read more
The Underground at PDC read more
Silverlight Synchronicity read more
Visual Studio 2010 Extension Manager read more
Silverlight Live Streaming service update read more
Building A Product For Real read more
A plea to my developer brethren about designer/designers read more
Silverlight MVP read more

Please login to rate or to leave a comment.