Charles Petzold



Progressive Arcs in XAML

January 16, 2008
Roscoe, N.Y.

No, these are not arcs who participate in anti-war demonstrations (alas). These are arcs that get longer with time, seemingly drawing themselves. It's a technique similar to the one I showed in a blog entry long, long ago:

XAML Puzzle-Solving

but with arcs instead of lines:

ProgressiveArcs.xaml

The figure consists of eight 180° ArcSegment objects, and the animations are eight PointAnimationUsingPath objects, each targetting the Point property of each ArcSegment. Notice that all the targetted points start at the same value, and all the animations start out the same, but one by one they stop based on both the PathGeometry and the Duration, leaving that point fixed.

For a fun variation, add

to the Path element.