Silverlight Tutorial - Color Animations

March 2008 - Important Note

This tutorial is no longer valid. It was written for Microsoft Silverlight 1.1 Alpha Refresh, which no longer exists - it has been replaced by Silverlight 2. We have left the page up for historical purposes (and because there are incoming links). Once again, the information below is invalid and in some cases misleading for Silverlight 2.

In this tutorial, I'm going to show you how to use Silverlight's Storyboard and ColorAnimation XAML tags to create custom color animations. Color animations are commonly used on input controls like buttons to give visual feedback that the cursor is over the control or when the button has been pressed. This tutorial will show a couple of simple examples that can easily be extended to complex controls and animations.

The examples in this post were built using Visual Studio 2008 beta 2, Silverlight 1.1 Alpha Refresh, and C#. For information on where to download these, please visit our previous tutorial Getting Started With Silverlight.

Let's start with a very simple example. Here, we're going to change the color of a rectangle when the mouse enters and leaves it.

Edit: Example Obsoleted And Removed

We'll start by defining the XAML for the rectangle.

Here we've defined a very simple red rectangle. Since we want the color to change when the user enters or leaves the control with the cursor, we've defined event handlers for each of these. The code inside these event handlers is located in the C# code behind and will be explained a little later.

Now that we have the rectangle defined, let's create an animation to change the color of the rectangle when the user enters it with the mouse cursor.

The first thing you might notice here is the <Canvas.Resources> tag. This tag holds a collection of Storyboards and is located directly after the opening Canvas tag. Inside this tag is where we'll be placing the Storyboards that will control our color animations.

The first Storyboard we're going to make will change the color of the rectangle when the user enters the control with the mouse. In order to control the Storyboard from the C# code-behind, you'll have to first give it a name. I named mine "mouseEnter". Next we add a ColorAnimation inside the Storyboard. The first attribute we set is Duration, which is how long the animation will run - in this case, 1 second. Next, we set the end result of the animation. I want my rectangle to fade from red to black, so I set To to "#000000". The next thing we set is the Storyboard.TargetName, which is the name of the object we want to modify. This has to be set to the same thing that we named the rectangle, in this case "myRectangle". Storyboard.TargetProperty is the property the animation will be changing, which in this case is the fill color. It might seem like a complicated way to address the rectangle's fill color, but it's necessary. If we expanded out the rectangle to use a SolidColorBrush it might make a little more sense:

So in the attribute <Storyboard.TargetProperty>, "(Shape.Fill)" refers to <Rentagle.Fill> and "(SolidColorBrush.Color)" is the Color attribute of <SolidColorBrush>.

All right, the storyboard and animation are done and ready to be run. Let's create some C# code that will handle the events.

If you remember, we added a MouseEnter event to our XAML code and told it to execute the method MyRectangleMouseEnter. All this function does is to start the Storyboard we named "mouseEnter". If you build and preview your project, you should get something that looks like the following:

Edit: Example Obsoleted And Removed

If you ask me, that's not very interesting. Let's add in the XAML code to make the rectangle fade back to red when the mouse leaves the control.

To make the rectangle fade back to red, I simply added another Storyboard to the canvas resources. The only thing different from the previous ColorAnimation is that To is now set to red (#FF0000), instead of black (#000000).

Just like with the previous storyboard, we'll going to need some C# code to run the animation. This time, the function is hooked up to the rectangle's MouseLeave event.

That's it. Now we have a rectangle that fades to black when the mouse enters it and fades back to red when the mouse leaves.

Edit: Example Obsoleted And Removed

We've only barely touched the surface for the possibilities of what a color animation is capable of - but hopefully this tutorial will provide you with a launching point for your own complex (and much more interesting) animations.