MSDN Magazine - August 2008 - (Page 71)

Width="96" Height="88" Canvas.Left="80" Canvas.Top="80"> The XAML snippet to run this animation looks like this: This example combines a ScaleTransform that increases the size of the shape on both axes by 20 percent, with a 30-degree skew on the x-axis and a rotation of 45 degrees. The next step is to define the animation that you want to use. Animations are contained within Storyboards. Using BeginStoryboard and Storyboard Animation The word animation literally means “imparting life onto something.” Hence, with animation you can bring your creations to life by changing the attributes of your objects, such as their color, size, opacity, and other properties, over a period of time or in response to user actions. In XAML, you animate an item by changing one or more of its properties over time. This time is defined using a timeline. For example, to move an item across the screen in five seconds, you’d specify a five-second timeline that animates the Canvas.Left property from 0 to the width of the screen. In the next sections, I’ll discuss each type of animation available, as well as the difference in animating these properties using key frames. Before you look into the different animation types, you should know that there is a framework around animations that involves Triggers, EventTriggers, and Storyboards. First, however, I’ll take a look at these basic concepts and then examine the different animation types in more detail. BeginStoryboard is a trigger action that contains a Storyboard object. Storyboard objects contain the animation definitions. When you define an animation, you simply embed these objects within the EventTrigger definition. The following code shows how this would be accomplished using my rectangle example: Defining the Animation Parameters Using Triggers and Event Triggers Now that the framework for the animation is set up, you can specify the animation that you want to perform. At its most basic level, animation defines changing a property over time. You can animate three different property types. Each of these property types is animated from a value specified in the From attribute (or Animations in Silverlight take place in response to an event, which is defined using a trigger. At present, there is only one trigger type supported in Silverlight XAML, the EventTrigger. Each UI property has a Triggers collection that is used to define one or more triggers (meaning one or more EventTriggers). So, the first step in adding an animation to an element is to define its Triggers collection; then you’ll need to add at least one EventTrigger to the collection you’ve created. For example, if you are animating a rectangle, the first step—specifying the Triggers collection—will look like this: The first step in adding an animation to an element is to define its Triggers collection and add at least one EventTrigger. its current value if this is not set) either to a value specified in the To attribute or by a value specified in the By attribute. Double types These are animated using the DoubleAnimation or DoubleAnimationUsingKeyFrames. This method is used to animate properties that contain a double value—for example, dimensions such as Canvas.Left or visual attributes such as Opacity. Point types These are animated using a PointAnimiation or PointAnimationUsingKeyFrames type. This particular method is used to animate properties that contain a Point value, such as line segments or curves that are defined using points. Color types These are animated using a ColorAnimation or August 2008 71 Next, you will need to define an EventTrigger to add to this collection. On this EventTrigger, you will use the RoutedEvent property to specify which event the animation runs in response to. Note that RoutedEvent only supports the Loaded event. To implement an animation that will begin when the rectangle is loaded, you would specify the EventTrigger as follows: msdnmagazine.com http://msdnmagazine.com

Table of Contents Feed for the Digital Edition of MSDN Magazine - August 2008

MSDN Magazine - August 2008 Toolbox CLR Inside Out Basic Instincts Cutting Edge Patterns in Practice Data 2.0 - Expose And Consume Data In A Web Services World Biztalk EDI - Build A Robust EDI Solution With BizTalk Server Silverlight - Create Animations With XAML And Expression Blend Write On! - Create Web Apps You Can Draw On With Silverlight 2 Wicked Code - Craft Custom Controls For Silverlight 2 Team System Foundations Windows With C++ Concurrent Affairs Going Places { End Bracket }

MSDN Magazine - August 2008

For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.