Wahlin on .NET
Silverlight XAML Primer 13: Starting and Stopping Animations
Controlling Storyboard animations programmatically lets animations play under a variety of circumstances.
In
previous articles I've discussed the concept of animation in Silverlight and explained several different types of animations that can be performed in applications.
Most of the animations I discussed were initiated through event triggers. For example, a Canvas object can raise its Loaded event to automatically play an animation defined within the Canvas' event triggers, as shown in Listing 1.
Animations can also be programmatically started, stopped and paused using JavaScript (or other languages in Silverlight 2). In this article, I'll discuss how Storyboards can be defined outside of event triggers and how animations can be started, paused and stopped programmatically.
Defining and Playing Storyboards
As I mentioned earlier, a Storyboard element can be defined outside event triggers in a XAML file. In many cases, you'll define a Storyboard within an event trigger -- which makes sense if the animation is associated only with a specific object.
However, you can also define Storyboards within a resources section and reference a particular Storyboard by name. Doing this allows a Storyboard to be reused more effectively and allows it to be played as a variety of events occur within a Silverlight application.
Listing 2 shows an example of defining a Storyboard element inside of a Canvas.Resources element so that it can be reused throughout the application. The Storyboard targets a TextBlock named tbCanvas and defines key frames used to move the Canvas.Left property of the TextBlock from 50 to 200 (and back) over a span of 3 seconds. Because the Storyboard is defined in the Canvas.Resources section, it won't automatically play.
To get the Storyboard to play, you'll need to find it within the XAML hierarchy and call its Begin() method. In this example, I allow the end user to click start, stop and pause TextBlocks which then fire the MouseLeftButtonClick events. The XAML for the three TextBlocks is shown in Listing 3.
Inside of the Start event handler, the Storyboard is located using FindName() and its Begin() method is called. Listing 4 shows the tbStart TextBlock's event handler code.
The Storyboard's Pause() and Stop() methods are called as the user clicks the appropriate TextBlocks on the user interface. Listing 5 shows the code to pause and stop the Storyboard animation.
By controlling Storyboard animations programmatically, you can add more flexibility to an application and allow animations to play under a variety of circumstances.
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.