Partially shaded circle timer in WPF

Where can I get started drawing animated geometry in C#? I would like to开发者_如何转开发 draw a sort of countdown timer by drawing a partially shaded circle. At start the circle would be fully shaded, at 75% 3/4 of the circle would be shaded and at 0 completely unshaded. I really don't know where to begin with something like this.

If you still don't understand what I need, a lot of games use this sort of animation to represent a "cooldown" on an item or skill. Like a second hand going around a clock, revealing what is beneath it.

WPF is my target application but I imagine I will need to use some sort of GDI api.

You could start out with the drawing examples here, for how to make your pie-like graphic:

http://www.codeproject.com/KB/WPF/PieChartDataBinding.aspx

It looks like they use StreamGeometryContext, along with LineTo and ArcTo.

You could then work on applying an animation to the properties on that graphic, so the "slice" gets bigger over time, by changing the arc length:

http://msdn.microsoft.com/en-us/library/ms752312.aspx#applyanimationstoproperty

You could then wrap this all up nicely in a UserControl, with custom dependency properties, so you can reuse this throughout your app.

Edit: I was thinking you meant the shaded pie like in World of Warcraft. What you want is actually simpler. See can poyrazoğlu's answer for the graphical approach to take (although you really only need the top black circle, if you're going with an opacity approach).

Yes, it's really easy with WPF. Just create another circle on top of the circle, make that one black, and let a timer update the opacity of the top circle from 1 to 0 by time (or whatever you want).

This is the "easy" way. A more "convenient", or "WPF-style" approach would include Bindings and possibly value conversions, you'll be binding the opacity of the circle to a custom value with a value converter (or decrementing that value, anyway there are lots of ways).

Choose whatever you want. They'll both work.