Windows 8 Using XAML: Using the PointAnimation Class

By Ken Getz


Much like the animation class we discussed in a previous article, the PointAnimation class allows you to animate a property that represents a point. For this example, AnimatePoint.xaml, uses a Path element whose Path.Data element contains an EllipseGeometry element. But using this technique, ratherthan using an Ellipse object, the markup can specify a Center property for the path which is a point:

<Path Fill="Green" Stroke="Black" StrokeThickness="2"
 <EllipseGeometry x:Name="circle"
RadiusY="50" />

The parent Canvas.Resources element contains the following markup:

<Storyboard x:Name="demoStoryboard">
<PointAnimation EnableDependentAnimation="True"
RepeatBehavior="Forever" />

This animation moves the shape from its start location (100, 100) to its endinglocation (300, 300) over the course of three seconds. The Figure below shows the moving ball, diagonally bouncing back and forth across the application's window. Note that the animation goes back and forth, and repeats forever-those are artifacts of the AutoReverse and RepeatBehavior properties of the animation, which you'll learn about soon.

Figure 1. It's hard to tell, but the circle is moving!

learnnowonline expert Ken GetzThis 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 15, 2013 by Ken Getz

XAMLWindows 8