Windows 8: The Animated Pie Slice

I am currently creating a sample application that requires an animated pie slice for its user interface. So, I set out to build an animated pie slice. It turns out this is difficult, then suddenly easy.

Come learn what I learned…

The pie slice

If you were a math major then generating the pie slice is going to be straight forward, but if you were not, then you need some help building the right angles and arcs. Lucky for you there are plenty of resources out there (including this one) to get you going.

For me, I created PieSlice.cs. It inherits Path with three custom properties: (double) Radius, (double) StartAngle, and (double) Angle. Radius determines the size of the piece container. Start angle determines the placement of the left most segment. And, Angle determines the size of the outer arc.

Here’s part of how that control code looks:

In the code above, I show a snippet of the PieSlice. This builds two line segments and an arc creating the pie slice path. Notice the second segment is not really defined; this is because the figure is a closed path, which automatically completes the segment for you – just end your arc. Get all the code here.

Animating the slice

Animating the slice is easy. But it starts hard because of a new animation property in WinRT. That property is EnableDependentAnimation which declares “whether animation properties that are considered dependent animation should be permitted to use this declaration”. In other words (for our scenario), if this animation can animate custom dependency properties.

Here’s how you declare it:

Here’s why I know this is crazy

If you are like me then you have considerable respect for Charles Petzold. He is the author of Programming Windows, published by O’Reilly. His forthcoming 6th edition will be my Bible for Windows 8 Metro development. I have already preordered it.

When I was first wanting to create an animated pie slice, I found his article, aptly named The animated Pie Slice in Windows 8. Because Charles does not use the EnableDependentAnimation property in his animations, he near-rightly concludes that custom dependency properties don’t animate (yet).

As a result, Charles creates his own elaborate solution that accepts an animation value into a custom object and projects that value out to a specified target/property, identical to how an animation uses the Storyboard.SetTarget property. It’s an amazing feat.

Note: to his defense, Charles was creating a scenario where the logic for generating a pie slice was not wrapped in a framework path element as me (in this article). But I bet if he had stumbled on EnableDependentAnimation he would have considered this approach – and not have needed two external classes to update his slice/path.

Conclusion

EnableDependentAnimation is an important property to animations that allows you to animate your custom dependency properties. It’s handy, but not enough people know about it yet. Spread the word to save people from banging their heads against the wall!

That means, with this XAML:

And with this code behind:

You can animate a slice like this:

Sort of looks like Pac Man, huh? When you run the animation it just changes the Angle from 0 to 270 and back. It’s a nice effect. It might be useful in many types of applications, not just charting apps. But it’s certainly useful in charting apps!

Best of luck!

Special thanks to the WinRT XAML Toolkit on CodePlex for turning me onto this pie piece idea in the first place. What great resources for Metro developers they are.