[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
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Collapse]Gauge Controls
   [Collapse]Getting Started
     Lesson 1 - Create a Circular Gauge
     Lesson 2 - Create a Linear Gauge
     Lesson 3 - Create a Digital Gauge
     Lesson 4 - Create a State Indicator
    Value Indicators
   [Expand]Visual Elements
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Lesson 2 - Create a Linear Gauge

This is the second tutorial of the DXGauges Getting Started series. It will guide you through the process of creating a Linear gauge and adjusting its common settings.

This tutorial consists of the following steps.

  1. Create a New Project and Add a Gauge Control
  2. Add a Scale and a Level Bar
  3. Add a Secondary Scale
  4. Add a Marker and Custom Labels
  5. Specify Ranges
  6. Result

Expanded Step 1. Create a New Project and Add a Gauge Control

In this step we will perform the common actions that are required when you add a Gauge control to your application.

  • Run MS Visual Studio 2012, 2013, 2015, 2017 or 2019.
  • Create a new WPF Application project.
  • Now add the LinearGaugeControl component to your project. To do this, locate the LinearGaugeControl item in a Visual Studio toolbox on the DX.19.2: Data & Analytics tab and drop it onto the main window.

In this lesson we demonstrate how to create a simple thermometer using LinearGaugeControl.

  • To set a style for a conventional thermometer, set the LinearGaugeControl.Model property to LinearRedThermometerModel.
  • To adjust a gauge's layout, set its System.Windows.FrameworkElement.Margin property to 0, 24, 0, 20.

After performing these steps, your MainWindow may look as follows.

Also your XAML should be similar to the following.

Now we have a Gauge control added to our application and can customize it to meet our requirements.

Expanded Step 2. Add a Scale and a Level Bar

Scales are the main elements of a Gauge control because they contain all other elements, and a level bar is critical for a thermometer because it demonstrates the current temperature value.

After that our XAML for the first scale will look as follows.

And the gauge control will be similar to the following.

Expanded Step 3. Add a Secondary Scale

In many cases some thermometers display two scales - to the left and to the right of the level bar - to better indicate the current value. In this step we will demonstrate how to add a secondary scale to create a similar thermometer.

After performing these actions, XAML for the second scale should look like the following.

MainWindow should be similar to this.

Expanded Step 4. Add a Marker and Custom Labels

Markers are usually intended to indicate any "fixed" value on a scale. In our example, we will use a marker to display an average month temperature (e.g. New York's temperature in May). And custom labels will be used to display units of measurement of our thermometer.

See the result.

Expanded Step 5. Specify Ranges

Ranges are intended to visually identify different intervals on a scale. On our scales, for demonstration purposes, we will show several equal ranges that indicate values lower or higher than water freezing temperature.

  • Select the first LinearScale object, for the LinearScale.Ranges property, invoke the Ranges Collection editor and add two LinearScaleRange objects. Then set its properties as follows.
  • For the first range, set its RangeBase.StartValue property to -40 and RangeBase.EndValue to 32, DefaultLinearScaleRangePresentation.Fill to LightBlue.

  • For the secondary range, set its RangeBase.StartValue property to 32 and RangeBase.EndValue to 120, DefaultLinearScaleRangePresentation.Fill to Tomato.

  • Perform the same actions for the secondary LinearScale object.

Expanded Step 6. Result

Now our Gauge control is ready.

Run the application and see the result.


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

Expanded See Also

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