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:
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.
Sample code (all XAML) posted here