[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Collapse]Gauge Controls
   [Expand]Getting Started
    Scales
    Value Indicators
   [Expand]Visual Elements
    Theming
   [Collapse]Examples
    [Collapse]Circular Gauges
      How to: Use ArcScale
      How to: Show Two Circular Scales Side-by-Side
      How to: Determine whether an Indicator's Value Falls into a Particular Range
      How to: Create a Knob-like Gauge
      How to: Place One Circular Scale into Another
    [Expand]Linear Gauges
    [Expand]Digital Gauges
    [Expand]State Indicators
    [Expand]End-User Interaction
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

How to: Create a Knob-like Gauge

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E3335.

The following example illustrates a gauge that looks and behaves like a typical 'knob' element of a real-life dashboard. In this case we demonstrate how to create, for example, a realistic volume control.

To provide its appearance, we use custom templates for an arc scale's needle and layer elements. For your convenience, these templates are stored in the KnobRestoreDictionary.xaml file, and named OscilloscopeNeedleTemplate and OscilloscopeScaleLayerTemplate. They can be easily re-used in your application.

This knob also provides the capability to interactively modify its value via mouse clicks. To enable this, the ValueIndicatorBase.IsInteractive property of a gauge's needle is set to True to enable its interactivity.

Finally, below the knob-like gauge, there is a System.Windows.Controls.Label control, which is bound to the ValueIndicatorBase.Value property of a needle to display the current volume set by knob.

Is this topic helpful?​​​​​​​