How to create a Circular Style ProgressBar

Question

I need help on implementing a circular progress bar like this:

How should I implement the Circle to fill by increasing Value property?

Answer 1

You have a couple of options - the first is to template the ProgressBar control. This turns out to be a little tricky. I wrote a blog post which describes how to use an attached ViewModel to achieve the required effect.

The other alternative is to create your own control from scratch. You could do the following:

1. Create a new user control
2. Add new Value, Maximum and Minimum dependency properties to it.
3. Handle the Value, Maximum and Minimum property change events in your user control to compute an Angle property.
4. Construct two 'pie pieces' in code behind (see this post) and add them to the UI.