Wahlin on .NET
Silverlight XAML Primer 14: Using Color Animations
Dan shows you how to use Silverlight's color animation features and how you can stop and start them programmatically.
Silverlight provides several different ways to animate objects in a canvas to perform interesting effects.
Previous articles in this series have discussed the fundamentals of animations and animation storyboards and shown how different types of animations -- like Keyframe animations -- can be used to gain precise control over an animation.
If you haven't had a chance to read the previous articles, this table gives a quick overview of the main animation objects available in Silverlight:
| Animation Object |
Description |
| ColorAnimation |
Animates a property that can hold a Color value. |
| ColorAnimationUsingKeyFrames |
Animates a property that can hold a Color value along a set of key frames. |
| DoubleAnimation |
Animates a property that can hold a Double value. Useful for animating the height or width of an object or any other property that has a Double data type. |
| DoubleAnimationUsingKeyFrames |
Animates a property that can hold a Double value along a set of key frames. Key frames allow for more precise control over animations. |
| PointAnimation |
Animates a property that can hold a Point value between two target values over a specified duration. Useful for moving objects such as ellipses that have center points that may need to be animated. |
| PointAnimationUsingKeyFrames |
Animates a property that can hold a Point value along a set of key frames. |
|
In this article, I'll discuss color animations and show how you can programmatically start and stop them as a user enters and leaves a TextBlock element.
Using the ColorAnimation Element
Color animations can be performed on XAML objects by adding one or more ColorAnimation elements into a Storyboard. ColorAnimation can be used much like other animation elements including DoubleAnimation and PointAnimation. To use it, define the target element, the target property as well as other animation properties such as To, From and Duration.
When targeting color properties, it's important to realize that you're targeting a brush object such as SolidColorBrush rather than the color property itself. Properties such as Stroke, Background or Foreground defined in XAML convert strings such as "Red" or "Brown" into SolidColorBrush objects behind the scenes using built-in converters. This means that if you have a TextBlock element and want to animate its Foreground color using a ColorAnimation element, you can't set the Storyboard.TargetProperty property to a value of Foreground. Instead, you'll need to target the Foreground property's color brush as shown below:
<ColorAnimation Storyboard.TargetName="tbCanvas"
Storyboard.TargetProperty="(Foreground).(Color)"
From="Maroon" To="Green" Duration="0:0:0.75" />
This example defines a color animation that targets a TextBlock named tbCanvas. It targets the Foreground property's SolidColor Brush and animates the color from Maroon to Green over three-fourths of a second. In Silverlight 1, you can hook the animation to the TextBlock using triggers. However, triggers aren't the preferred way to hook animations to events in Silverlight 2. Animations are instead defined within resource sections and played programmatically.
Listing 1 shows two ColorAnimation elements that are used to change colors as a user enters and leaves a TextBlock object. The storyboards are defined in the Canvas's Resources section.
Listing 2 shows the code (using JavaScript for Silverlight 1) to handle the MouseEnter and MouseLeave events which locate the appropriate animation storyboard to play. With Silverlight 2 you can access animation objects directly by name in the code file as opposed to using the FindName() method.
About the Author
Dan Wahlin (Microsoft MVP for ASP.NET and XML Web Services) is the founder of The Wahlin Group which specializes in .NET and SharePoint onsite, online and video training and consulting solutions. Dan also founded the XML for ASP.NET Developers Web site, which focuses on using ASP.NET, XML, AJAX, Silverlight and Web Services in Microsoft's .NET platform. He's also on the INETA Speaker's Bureau and speaks at conferences and user groups around the world. Dan has written several books on .NET including "Professional Silverlight 2 for ASP.NET Developers," "Professional ASP.NET 3.5 AJAX, ASP.NET 2.0 MVP Hacks and Tips," and "XML for ASP.NET Developers." Read Dan's blog here.