Learning Silverlight – Advanced Color Animations

26 04 2010

Unfortunately, I won’t be providing the in depth look at my recent Silverlight project that I promised earlier. It still hasn’t been shown to our prospective customer and it wouldn’t be appropriate to show it publically before that.

Instead, I’ll be breaking down some of the lessons I learned from the project into little segments like this. At one point in the project I wanted to do a more advanced color animation than color to color.

Silverlight Color Animation Keyframe

After the jump

Juicy code… and Superman in bondage.

I wanted to do this animation at runtime. I’ve noticed that XAML is great when you know exactly which pre-created object you want to animate in a pre-determined way. If you however haven’t created the object yet or want to use some custom parameters, using C# code can sometimes be a better way to achieve your goals.

Setting up

SolidColorBrush brushDetail = new SolidColorBrush();

Storyboard DetailAni = new Storyboard();
 Storyboard.SetTargetProperty(DetailAni, new  PropertyPath("Color"));
 Storyboard.SetTarget(DetailAni,  brushDetail);

Here we see a few declarations. We create a SolidColorBrush that’ll we’ll use as animation target, the Storyboard (which I choose to name “DetailAni”).

Next, we use the Storyboard class to set Targetproperty and Target. Both these methods take two arguments, first the animation which we assign the property or target to (in this case DetailAni); the second argument is the value we want to assign. The property will require a PropertyPath object. PropertyPath specifies which property we are targeting with our animation. In our case (“Color”) is the Color property of the SolidColorBrush. Another example would be (“UIElement.Opacity”) to affect the opacity of a textblock.


ColorAnimationUsingKeyFrames caukf = new ColorAnimationUsingKeyFrames();

LinearColorKeyFrame lckf0 = new LinearColorKeyFrame();
 lckf0.KeyTime = TimeSpan.FromSeconds(3);
 lckf0.Value =  Colors.Blue;

LinearColorKeyFrame lckf1 = new  LinearColorKeyFrame();
 lckf1.KeyTime =  TimeSpan.FromSeconds(4);
 lckf1.Value = Colors.Black;

LinearColorKeyFrame lckf2 = new  LinearColorKeyFrame();
 lckf2.KeyTime =  TimeSpan.FromSeconds(7);
 lckf2.Value = Colors.Black;

LinearColorKeyFrame lckf3 = new  LinearColorKeyFrame();
 lckf3.KeyTime =  TimeSpan.FromSeconds(customValue);
 lckf3.Value =  Colors.Transparent;


This is where the magic happens. Instead of going from one color to another over a set amount of time, I’ve chosen to let my color animate between different colors over an amount of time determined by me.

What I do now is create a ColorAnimationUsingKeyFrames (caukf) object and start creating LinearColorKeyFrame children for it. Each child has a KeyTime (arrival time) and a value (color). In my example, I fade in color to blue, let it transfer to black quickly, hold the black for several seconds before fading away. Sort of a highlight effect. Since I’m using TimeSpan.FromSeconds as a way to create timespans, I can easily put customvalues in there.

Don’t forget to add each KeyFrame to the caukf and to add the caukf as a child of your storyboard. I always tend to forget this :P


Don’t leave your animations hanging, add children!

Finishing Up

textBlockObject.Foreground =  brushDetail;
rectangleObject.Fill = brushDetail;

To finish this animation up, we start our Storyboard and set our brush as a property on objects we want to animate. We can set as many objects as we want to and this greatly helps us to synchronize animations.




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: