WPF Gauges – Create a Volume Knob

This example changes the CircularGaugeControl so that it looks and behaves like a volume knob. Turn the gauge needle to update the percentage label under the control.

Use the CircularGaugeControl when you need to:

• Create an interactive rotary control to adjust a value.
• Imitate analog controls in dashboards, audio mixers, or monitoring panels.
• Apply a custom design to match a specific UI theme.

Implementation Details

Custom Needle and Scale Templates

Define custom templates in the KnobResourceDictionary.xaml file:

• OscilloscopeNeedleTemplate – changes the needle shape and color.
• OscilloscopeScaleLayerTemplate – changes the gauge background and decorative elements.

The following code example applies templates through CustomArcScaleNeedlePresentation and CustomArcScaleLayerPresentation properties:

<dxga:ArcScaleNeedle.Presentation>
    <dxga:CustomArcScaleNeedlePresentation
        NeedleTemplate="{StaticResource OscilloscopeNeedleTemplate}" />
</dxga:ArcScaleNeedle.Presentation>
...
<dxga:ArcScaleLayer.Presentation>
    <dxga:CustomArcScaleLayerPresentation
        ScaleLayerTemplate="{StaticResource OscilloscopeScaleLayerTemplate}" />
</dxga:ArcScaleLayer.Presentation>

Gauge Configuration

The circular gauge has the following features:

• Starts at 0 and ends at 100.
• Uses a custom start/end angle to simulate knob rotation.
• Hides numeric labels and displays only tick marks.
• Supports interactive needle movement.

<dxga:ArcScale
    StartValue="0" EndValue="100"
    StartAngle="-230" EndAngle="50"
    ShowLabels="False">

Use the SmartTickmarksPresentation property to change the tick mark style and position tick marks with negative offsets to align with the custom scale.

Value Display

A Label displays the gauge value. Its content is bound to the needle’s Value property:

<Label Content="{Binding ElementName=needle, Path=Value}"
       ContentStringFormat=" Volume: {0:f0} % " />

The label updates automatically when the knob is rotated.

Files to Review

• KnobResourceDictionary.xaml (VB: KnobResourceDictionary.xaml)
• MainWindow.xaml (VB: MainWindow.xaml)

Documentation

• CircularGaugeControl
• Circular Gauge Elements
• CustomArcScaleLayerPresentation
• CustomArcScaleNeedlePresentation
• Gauge Controls

More Examples

• WPF Linear Gauge – Display Custom UI Elements
• WPF Gauges Getting Started – Lesson 3 – Create a Digital Gauge
• WPF Gauges – Set Width and Height of Symbols in Digital Gauge
• WPF Gauge – Create a Digital Gauge
• Reporting for WPF – Advanced Gauge Customization

Does this example address your development requirements/objectives?

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