Blog

Windows 8 using XAML: Animation Class and Enabling Animation

By Ken Getz

url2

In Windows 8, animations are an integral part of the user experience. As you work with various Windows Store applications (or the built in user interface), you'll find animations at every turn: From the log-in screen, to the Start menu, to any application, animated transitions are everywhere.

Although you're better off using the built-in theme transitions, there are many reasons why you might want to create your own custom animations. If at all possible, you'll want to avoid using any more dependent animations than you must (that is, animations that run on the UI thread), but in some cases, that's the only way to create the necessary

XAML animation revolves around changing the value of a single dependency property over time. You might change the width of a button from 30 to 100 pixels over a period of 10 seconds. Perhaps you might change the position of a gradient stop from 0 to 1 over 5 seconds. It's all about finding the right property to change, and the correct length of time over which to

The Animation Class

Within the following markup, locate the DoubleAnimation element:

<DoubleAnimation From="100"
EnableDependentAnimation="True"
To="200"
Duration="0:0:5" />

As you might infer from the attributes, this animation element indicates that the animation should take some property from a value of 100 to 200, over a duration of 5 seconds.

This element creates an instance of the DoubleAnimation class, one of theseveral different classes that animate different types of properties. You can choose from multiple types of animation classes:

  • Linear interpolation: The changing property value varies smoothlyand continuously for the duration of the animation. Silverlight includes three such classes, while WPF includes the following commonly usedclasses, plus several others: DoubleAnimation, PointAnimation, andColorAnimation.
  • Key-frame animation: Values can change abruptly and/or they can change using linear interpolation. Silverlight includes four such classes, while WPF includes the following commonly used classes,plus several others: DoubleAnimationUsingKeyFrames, PointAnimationUsingKeyFrames, ColorAnimationUsingKeyFrames,and ObjectAnimationUsingKeyFrames.

The DoubleAnimation instance you've seen smoothly and continuously varies the value of a property from 100 to 200 over the course of five seconds. But the markup doesn't indicate what property to change! That requires another >element-the Storyboard element.

Enabling the Animation

In Windows Store applications, not all animations are allowed to run, by default. If your animation might have an impact on your application (specifically, animations that affect the layout), you must specifically enable the animations-they won't run, otherwise. To enable the animation, set the Animation.EnableDependentAnimation property to True. Animating some properties, such as Opacity, don't require setting this property to True, as this animation wouldn't affect the layout of the application-in general, animating any property that causes an element to move or adjust the layout of the page requires this property to be set to True.

ldn-expertkgetzThis post is an excerpt from the online courseware for our Windows 8 Using XAML: Bindings, Shapes, and Animation course written by expert Ken Getz.



Ken Getz
Ken Getz is a featured instructor for several of our Visual Studio courses. He is a Visual Basic and Visual C# expert and has been recognized multiple times as a Microsoft MVP. Ken is a seasoned instructor, successful consultant, and the author or co-author of several best-selling books. He is a frequent speaker at technical conferences like Tech-Ed, VSLive, and DevConnections and he has written for several of the industry's most-respected publications including Visual Studio Magazine, CoDe Magazine, and MSDN Magazine.


This blog entry was originally posted February 13, 2013 by Ken Getz

Windows 8 XAML