A Data-Bound progress bar in WPF

Several weeks ago I posted a sample progress bar using rectangle overlay to achieve gradient looking and text overlay. But that control was C# code-driven to update the UI. Here I’ve improved it to utilize ValueConverters and Data Binding, so you can update its source data and the UI can automatically updates.

The XAML part of the ProgressBar control is listed as following. I am using two-column grid to simulate the progress bar container:

Then you can define your custom ValueConverter to convert percentage progress values to grid column widths. The following shows the ValueConverter for the ProgressBar Column Width property inside the parent grid:

You can create other types of ValueConverter to suit your needs.

Once you are done , then in your code you can easily adjust your progress data without manually coding against the Progress Bar UI anymore:

This has advantages in situations where you need to implement data-driven applications without in-depth knowledge of the visualization layer.

The finished UI will look like this:

[Update 8/27/2007]

After some study of the ControlTemplate in WPF, especially those special meaning PART elements in a control template, I realized this could be implemented with a ControlTemplate with all XAML approach. 

The key to the control template is to use the PART_Track and PART_Indicator element to contain the rectangle areas.

[Update: 1/16/2009]

Sample code (all XAML) posted here

6 Responses to A Data-Bound progress bar in WPF

  1. JosephCooney says:

    What does this buy you that the regular WPF progress bar doesn’t? You can bind to that too (Value is a dependency property). Is it the text in the middle? If so you could probably do the same thing with a control template.

  2. ligao101 says:

    Joseph,
    You are right. A ControlTemplate-based implementation would just be fine in most cases. I changed my implementation couple days ago when I realized it. But didn’t get the chance to update it here yet.

    So I just updated the blog entry to include an ALL XAML based and ControlTemplate based progressbar.

  3. Jazzoid says:

    GREAT

    The Binding between Value and Text works perfect in my Template !

  4. Tom says:

    could you update the links to the samples?

    thanks

  5. ligao101 says:

    Hi Tom,

    sample code link (mostly in XAML) is posted at the bottom of the blog page.

  6. Zedega says:

    wow, your tutorial was superb!
    this is what i was looking for! a way to show progressbar value!
    you have my thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: