O'Reilly logo

XAML Unleashed by Adam Nathan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Linear Keyframes

Listing 19.1 uses DoubleAnimationUsingKeyFrames to help move a circle (Ellipse) in a zigzag pattern, as illustrated in Figure 19.9. The blue lines are there to show the path that the circle traveled to get to its final spot. Because the Image is inside a Canvas, the motion is accomplished by animating the Canvas.Left and Canvas.Top attached properties rather than using the more versatile TranslateTransform. These are still independent animations, however!

LISTING 19.1 The Zigzag Animation for Figure 19.9

<Page ...>  <Page.Resources>    <Storyboard x:Name="storyboard" TargetName="circle" >      <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)"          From="0" To="500" Duration="0:0:3"/> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required