Published: 13 Jun 2008
By: Faisal Khan

In-Depth analysis of animation with Silverlight 2.0 Beta.

Contents [hide]

Transitional animation with Silverlight

In the last part I’ve shown how the VideoBrush can be used and videos can be animated by dividing MediaElement into two parts. In this demonstration of Silverlight animation I’ll focus on transitional animation. We’ve seen this type of animation many times in movies, television commercials, music videos, in sting which we see at the beginning of any news. The wipe effect and dissolves are mostly used in film and television. There are other effects which fall into the category of wipe and dissolves. It means those effects are subsets of Wipe and Dissolve. Let’s delve into our first example.

Simple Transitional animation

This example shows a simple transitional animation, something a sliding effect, which is called wipe effect.

Open Visual Studio and select the Silverlight application template. Name the application whatever you like. I named this application SilverlightTransitionalAnimation. The idea behind this application is just to show you how a transitional Wipe effect can be done in Silverlight. This example is not the best by any means and this could be done in far better ways, but I’ve just given here an idea of how this effect can be achievable in Silverlight. If anyone has a better idea or has some innovative thinking or suggestion, it will be highly appreciated.

Before starting this demonstration let’s clarify what “Wipe effect” really means. In film editing a wipe is a gradual spatial transition from one image to another. One image is replaced by another with a distinct edge that forms a shape. In the field of Digital Post Production this is type of transition uses a moving edge to replace the current clip to reveal the next clip. A simple edge, an expanding circle, or the turning of a page, are all example of Wipe effect. So from this point of view a wipe is a transition from one shot to another, where a moving line or pattern reveals the new shot. This type of effect is mostly seen in the News headlines of television channels, especially in my country, Bangladesh. So I thought why not give it a try using Silverlight?

So, I’ve tried here to get the animated Wipe effect by overlapping two Images and by placing them in a Grid and setting LinearGradientBrush as OpacityMask on the topmost Image. Then I’ve tried to animate the Offset property of the GradientStops of the Brush.

To start my effort I’ve first opened Visual Studio 2008 and from the project template I’ve selected the Silverlight project.

Figure 1: Creating Silverlight application using Visual Studio

Creating Silverlight application using Visual Studio

Add a Canvas as the root element of your layout. Add two images inside the Canvas. Name those Image elements whatever your like and set the source property. Set the Opacity mask of the second Image to LinearGradientBrush. Set the StartPoint to 0,0 and EndPoint to 1,0. Name the first GradientStop whatever you like. In this case it’s BlackStop. As its name suggests, the Color for this is Black and Offset is 0. The second GradientStop is named TransparentStop and its Color has been set to Transparent; and Offset is set to 0. After setting the opacity mask of your second Image according to my instructions, your XAML for both the images should look like this :

Now go to the <UserControl.Resources> section and add a Storyboard. Name the Storyboard as you prefer. I’ve named the Storyboard TransTimeline. Set the AutoReverse property of the Storyboard to True. Now here comes the most important part of this story: the animated effect which we want to give to application will be fixed here. I’ve used the DoubleAnimation here to get the job done. If you’re not sure what DoubleAnimation does, check Part three of this series. I’m going to show you the animated wipe effect using one Image over another, so my ultimate goal is to animate the value of a double property between two target values; and that's exactly what DoubleAnimation does. My Storyboard targets here are the GradientStops of my LinearGradientBrush, which I used for OpacityMask of my second Image, named img2.

For your clarification here’s the <UserControl.Resources> section :

You can see in the above XAML that the first DoubleAnimation has been used in the Storyboard section to target a GradientStop, which in this case is TransparentStop. The Offset property of the GradientStop has been targeted. The By property of the DoubleAnimation has been used to set the total amount by which the animation changes its starting value. In this case its 1. At last, Duration has been set to 2 seconds. In the subsequent DoubleAnimation section, the GradientStop named BlackStop has been targeted again, and the Offset property has been targeted too. The By property again is set to 1 and Duration has been set to 2 seconds. This time the BeginTime property has been specified to set the total amount by which the animation will change its starting value. In this case it has been set to 5 seconds. Now open Page.xaml.cs to add some procedural code to handle the animation. Add a MouseLeftButtonDown event for img2 because this is the Image we want to animate over img1. Call the Storyboard’s Begin method in your Img2_MouseLeftButtionDown event handler, like so:

TransTimeline is our Storyboard, because I named it TransTimeline. Now wire the event to img2. Your XAML should look the one shown below :

At this point we’ve completed the code for our application. Build and Debug the application to see the transitional effect implemented with a Silverlight animation. If everything is in full shape, your application will look just like the screenshot shown below:

Figure 2: Wipe transition in action

Wipe transition in action

Done: We’ve created a transitional Wipe effect with Silverlight! The complete XAML for this example should now look like this:

Listing 1: Page.xaml

Listing 2: Page.xaml.cs

If you want to modify the width of the in-between area, you have to modify the start time of the second DoubleAnimation.


In this article, we have seen how to create a transitional Wipe effect with the Silverlight’s animation framework. I hope this part of the series has given you some helpful ideas on creating transitional animations.

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

About Faisal Khan

Currently working as a freelance Silverlight/WPF UX Integrator. His passions revolve around creating the next generation desktop application and Rich Internet applications. His goals are to create applications which will serve the user in a friendly and traditional way, but will keep pace with nex...

This author has published 11 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

Silverlight MVP read more
API changes introduced by the new CoverFlow control read more
Why Embedded Silverlight Makes Sense read more
Win a Govie Award Submit an Innovative Gov 2.0 Application read more
Moonlight 1.0 Released, Silverlight script updated – and a Chrome hack read more
Silverlight Controls read more
Some Silverlight ecosystem updates read more
What I'm Thinking About April read more
Popfly beta read more
Local Animations in Windows Presentation Foundation read more


Subject Author Date
placeholder needs a live version j Collum 4/18/2009 1:28 PM

Please login to rate or to leave a comment.