DevExpress WPF Gauge Control: How to Create Circular Progress Bars

This example demonstrates the use of DevExpress WPF Gauge controls to create different Circular Progress Bars. This sample implementation includes three custom UserControls:

1. SimpleCircularProgressBar - A simple Circular Progress Bar control.
2. SegmentedCircularProgressBar - A Circular Progress Bar control with four colored sections. Each section is revealed based on the control value.
3. FiveRangeCircularProgressBar - A Circular Progress Bar control able to display the progress of five separate values.

All controls use the DevExpress WPF Circular Gauge Control. ArcScaleRangeBars define gray progress backgrounds and colored progress range elements.

---

Simple Circular ProgressBar

A simple Circular Progress Bar control.

 <controls:SimpleCircularProgressBar 
        MinValue="{Binding ElementName=TrackBar1, Path=Minimum}"
        MaxValue="{Binding ElementName=TrackBar1, Path=Maximum}"
        Value="{Binding ElementName=TrackBar1, Path=Value}"
        Thickness="15" ProgressThickness="15" TextBrush="Black"
        ProgressBrush="{StaticResource OrangeGradient}"/>

• SimpleCircularProgressBar.xaml
• SimpleCircularProgressBar.xaml.cs (VB: SimpleCircularProgressBar.xaml.vb)

Segmented Circular ProgressBar

A Circular Progress Bar control with four colored sections. Each section is revealed based on the control value.

<controls:SegmentedCircularProgressBar 
        MinValue="{Binding ElementName=TrackBar2, Path=Minimum}"
        MaxValue="{Binding ElementName=TrackBar2, Path=Maximum}"
        Value="{Binding ElementName=TrackBar2, Path=Value}"
        Segment1Brush="#CCDC3B"
        Segment2Brush="#FF5E01"
        Segment3Brush="#29B6F6"
        Segment4Brush="#FFC106"
        Thickness="15" ProgressThickness="15" TextBrush="Black"/>

• SegmentedCircularProgressBar.xaml
• SegmentedCircularProgressBar.xaml.cs (VB: SegmentedCircularProgressBar.xaml.vb)

FiveRangeCircularProgressBar

A Circular Progress Bar control able to display the progress of five separate values.

<controls:FiveRangeCircularProgressBar 
        ProgressThickness="25" Thickness="25"
        Range1Label="Temazepam"
        Range2Label="Guaifenesin"
        Range3Label="Salicylic Acid"
        Range4Label="Fluoride"
        Range5Label="Zinc Oxide"
        TextBrush="#262626"
        FontSize="15"
        FontFamily="Segoe UI"
        FontWeight="Regular"
        Range1Value="{Binding ElementName=Range1, Path=Value}"
        Range2Value="{Binding ElementName=Range2, Path=Value}"
        Range3Value="{Binding ElementName=Range3, Path=Value}"
        Range4Value="{Binding ElementName=Range4, Path=Value}"
        Range5Value="{Binding ElementName=Range5, Path=Value}"/>

• FiveRangeCircularProgressBar.xaml
• FiveRangeCircularProgressBar.xaml.cs (VB: FiveRangeCircularProgressBar.xaml.vb)

Files to Review

• MainWindow.xaml

Documentation

• CircularGaugeControl
• ArcScaleRangeBar
• Scales

More Examples

• WPF Gauges - Create a Knob-like Gauge

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)