Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Collapse]Gauges
   [Expand]Getting Started
   [Expand]Concepts
   [Expand]Design-Time Features
   [Collapse]Examples
     How to: Add and Customize Gauge Animation
     How To: Bind a Gauge Control to a Data Source
     How to: Bind a Gauge Control to a Data Source at Runtime
     How to: Create a Circular Gauge (Design-time)
     How to: Create a Circular Gauge (Runtime)
     How To: Create a Digital Gauge (Design-time)
     How To: Create a Digital Gauge (Runtime)
     How To: Create a Gauge From Scratch (Runtime)
     How To: Create a Linear Gauge (Design-time)
     How To: Create a Linear Gauge (Runtime)
     How To: Create a State Indicator Gauge (Design-time)
     How To: Create a State Indicator Gauge (Runtime)
     How To: Custom Draw a Gauge Control
     How to: Move Value Indicators at Runtime
     How To: Use Gauges for In-Place Editing
   [Expand]Product Information
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

How To: Create a Digital Gauge (Design-time)

This is the third tutorial of the XtraGauges 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. Prerequisite
  2. Load the Required Gauge Preset
  3. Specify the Digital Gauge Main Properties
  4. Add a Layer Effect
  5. Add a Custom Label and Customize its Appearance
  6. Result

Expanded Step 1. Prerequisite

Create a new Windows Forms Application (Visual Studio 2010, 2012, 2013, 2015 or 2017) or open an existing one, add a GaugeControl and run its Preset Manager (as you would do it for circular or linear gauge).

Expanded Step 2. Load the Required Gauge Preset

The Preset Manager contains lots of style presets allowing you to quickly customize the gauge appearance.

Let's apply the Cosmic style preset to the digital gauge.

  • To do this, select this style on the right list of the Preset Manager. After that, you can click either this preset or the Load button below.

The digital gauge appears on the form window with an appearance corresponding to the chosen style preset.

Let's change the current preset style (e.g., to Dark Night).

  • To do thos, click the smart tag and select Change Style, as shown below.

  • Then, in the invoked the Style Chooser manager, select the Dark Night style and click OK.

Expanded Step 3. Specify the Digital Gauge Main Properties

  • Let's customize a digital gauge. For this, locate the property window and set the gauge properties as follows:

Then, the Form should look like the following.

Expanded Step 4. Add a Layer Effect

  • To add a visual effect to the digital gauge, locate the smart tag and click Add Effect Layer, as shown below:

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

Expanded Step 5. Add a Custom Label and Customize its Appearance

  • Finally, add a label to the gauge. To accomplish this, locate the smart tag and click the Add Label option.

  • To customize a label on the gauge, it is necessary to locate it on the form and select Run Designer via the smart tag. See the image below.

  • In the invoked designer, change the label's font, position and text, as shown below. Then, click the Ok button.

Then, you will see the following confirmation window.

Note

The confirmation window occurs in the Gauge Designer every time the current layout is changed.

  • click Yes to confirm the operation, as shown above.

Expanded Step 6. Result

Run the application to see the result.

How would you rate this topic?​​​​​​​