Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]Welcome to DevExpress .NET Documentation
[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
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
   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
   [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
    Scales
    Value Indicators
   [Expand]Visual Elements
   [Expand]Examples
  [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]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]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Lesson 3 - Create a Digital Gauge

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

This tutorial consists of the following steps.

  1. Create a New Project and Add a Gauge Control
  2. Select a Symbol View Type
  3. Specify a Text
  4. Add a Layer and Customize the Gauge Layout
  5. Specify a Model
  6. Customize Animation Settings
  7. 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 2010, 2012, 2013, 2015 or 2017.
  • Create a new WPF Application project.
  • Add the DigitalGaugeControl component to your project. To do this, locate the DigitalGaugeControl item in a Visual Studio toolbox on the DX.17.2: Data & Analytics tab and drop it onto the main window.

  • Right-click the DigitalGaugeControl object and choose the Reset Layout | All option in the context menu. This will stretch the Gauge control to fill the whole window.

  • After this, your XAML may look like the following. If it doesn't, you can overwrite your code with:

Expanded Step 2. Select a Symbol View Type

The Digital Gauge control can represent its content using one of the predefined symbol view types: 7 segments, 14 segments, 5x8 and 8x14 segment matrices.

In this example, we will use the 8x14 segment matrix to display a creeping line with a custom text.

Expanded Step 3. Specify a Text

A 8x14 segment matrix can display any text consisting of numbers, Latin or other characters.

  • Let's add custom text to the digital gauge. For this, set the DigitalGaugeControl.Text property to ON AIR.

    The digital gauge displays this text immediately at design time within Visual Studio.

Expanded Step 4. Add a Layer and Customize the Gauge Layout

In this step, we'll add a layer to the Digital Gauge control and align the gauge vertically.

  • To add a layer to the digital gauge, locate the DigitalGaugeControl.Layers property on the Properties window. Then, click the ellipsis button to invoke the Layers collection editor. In this editor, add a new DigitalGaugeLayer object using the Add button.

  • Let's change the digital gauge layout. For this, set the System.Windows.FrameworkElement.VerticalAlignment property to Center.

    After this, the MainWindow should look like the following.

Expanded Step 5. Specify a Model

In this step, we'll select a model for the Digital Gauge control.

  • For this, locate the DigitalGaugeControl.Model property and select DigitalClassicModel from the drop-down list.

    Now the Gauge control should look as shown in the image below.

Expanded Step 6. Customize Animation Settings

The digital gauge supports two animation types: creeping line and blinking animation. In this lesson, we'll use the creeping lime animation to demonstrate a moving text.

Expanded Step 7. Result

After performing all the steps, your XAML should look as follows.

Run the project to see the result.

Show Me

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

Expanded See Also

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