Silverlight Tutorial - Animating Elements using Render Transforms

What started out as a tutorial about Silverlight 3's new BitmapCache feature has turned into something a little simpler. The documentation clearly states that render transforms will be hardware accelerated when bitmap caching is enabled, but I couldn't get it to work. It wasn't a total waste, however, as I did create an application that illustrates how to animate an object using render transforms, which is probably one of the fastest ways to animate an element's visual state.

The application we'll be building today is something we here at Switch On The Code refer to as 'Ball World'. Whenever we get our hands on a new technology or framework, one of the first things we do is figure out how to bounce a bunch of balls around on the screen.



The first thing we need is something to animate. For this I created a simple UserControl and put a red Ellipse inside it. Here's the XAML for this object.

Pretty simple right? Now we need to be able to keep track of the ball's current position and velocity. I simply added some properties to the code-behind for these.

That's actually it for the ball. All the rest of the work is done in the app's MainPage control. As you can see from the example, we need a black border to hold the balls and a button to add more. Here's the XAML for the MainPage UserControl.

First I have a Grid with two rows - one for the ball container and one for the button. I use a border and a grid for the container and apply a little bit of margin to make things look a little better. The button is simply a regular old button with a handler for the click event.

Let's take a look at what happens when the user clicks the button.

When the button is clicked, AddBall is called. This function creates a new Ball object and initializes it's properties. We set the velocity's X and Y values to random numbers between 1 and 10. _random is a .NET Random object that I create in the constructor of this class. There are several available transforms that can be applied to a render transform, however since we just want to move our object, a TranslateTransform will work great. Before we can add our ball to the container, we need to lock it's Children collection. This is because, as you'll see next, the balls are updated using a timer, and we don't want to add balls to the collection while we're iterating it and updating other balls.

Next let's take a look at the function that iterates through the collection of balls and updates their positions. This function is called periodically using a DispatcherTimer.

This is the meat of the application. The first thing we do is lock the collection of balls so new ones can't be added while we're iterating it. We then update the ball's position by adding it's velocity. Next we need to check that the ball's new position isn't outside of the container. If the position will be outside of the bounds, we simply set it equal to the bounds and reverse it's velocity. This will make the ball bounce around the screen. All that's left to do is modify the ball's render transform to the new position.

I mentioned the DispatcherTimer a little earlier. Here's the constructor of my class where the timer, among other things, is initialized.

I first create the Random object that is used to set the ball's velocity. Next I create the timer. I used a DispatcherTimer because it will raise the Tick event on the same thread that was used to create the timer. That way I don't have to call Invoke when I want to update the user interface. The last thing I do is create a few balls so there's something to look at when the app is loaded.

And that's it! We've created an app that animates user controls by periodically updating their RenderTransform properties. If I ever figure it out, I'll create another tutorial explaining how to hardware accelerate the animation. If you've got any questions or comments, please leave them below.