How to create a Circular Style ProgressBar

c# wpf user-controls progress-bar
Jalal picture Jalal · Feb 2, 2011 · Viewed 53.3k times · Source

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

CircularProgressbar

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

Answer

ColinE picture ColinE · Feb 2, 2011

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.

Related questions

Disposing WPF User Controls

I have created a custom WPF user control which is intended to be used by a third party. My control has a private member which is disposable, and I would like to ensure that its dispose method will always get …

Read More
Data Binding in WPF User Controls

I am creating a UserControl for a series of controls shared by several windows. One of the controls is a Label which shows the flow of some other process in terms of "protocol numbers". I am trying to offer DataBinding …

Read More
How can a WPF UserControl inherit a WPF UserControl?

The following WPF UserControl called DataTypeWholeNumber which works. Now I want to make a UserControl called DataTypeDateTime and DataTypeEmail, etc. Many of the Dependency Properties will be shared by all these controls and therefore I want to put their common …

Read More