Skip to main content

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

  • 3 minutes to read

This is the second tutorial of the XtraGauges 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. Run the Preset Manager
  3. Load the Required Gauge Preset
  4. Customize Gauge Scales
  5. Result

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

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

  • Create a new Windows Forms Application project in Visual Studio or open an existing one.
  • Add the GaugeControl component to your project. To do this, locate the GaugeControl item in the Visual Studio toolbox on the DX.24.1: Data & Analytics tab and drop it onto the form.

    Lesson - Drag and drop gauge

Step 2. Run the Preset Manager

  • Locate the Gauge’s smart tag and click Run Preset Manager.

    Lesson - Run Preset Manager

After that, you will see the following wizard.

Lesson-Preset Manager

Note that after you drop the Gauge in the previous step, the Gauge Preset Manager may be invoked automatically (if its “Show the preset manager every time a new Gauge control is dropped onto the form” option is enabled).

The Preset Manager allows you to create a ready-to-use gauge by loading it from the preset collection. The next step demonstrates how it is done.

Step 3. Load the Required Gauge Preset

  • In the Preset Manager, click LinearVertical to display presets with vertical linear gauges.

You can load the gauge preset in one of two ways:

  • double-click the required preset on the Preset Manager;
  • select a preset and click the Load button at the bottom of the Preset Manager.

The following image shows how to load the Africa Sunset preset using the second approach.

LessonLinearGauge_LoadAfricaSunset

After that, the Form1 window should look like the following.

LessonLinear_FormAppearance

As you can see, the new Gauge contains a lever bar, two scales, and background layer.

Step 4. Customize Gauge Scales

  • To access the gauge’s elements and customize their settings, run the Visual Gauge Control Designer.
  • To do this, locate the Gauge’s smart tag and in the invoked menu, click Customize Gauge Control, as shown below.

    LessonLinear_CustomizeGaugeOption

Let’s delete the second scale of the linear gauge.

  • To accomplish this, select scale2 in the Visual Gauge Control Designer, and remove it using the Remove button.

    LessonLinear_RemoveSecondScale

On the Designer left side, you can see the linear gauge containing only the first scale (see the image below).

LessonLinear_CustomizeScale1

  • To customize a scale, double click scale1 node, as shown above.
  • In the invoked Scales-Element Designer, change the scale’s properties and click the Ranges… button as shown in the following image.

    LessonLinear_InvokeRangesCollection

  • In the Ranges editor, add two range elements to the circular gauge by clicking the Add button.

    LessonLinear_AddRanges

  • Specify the Range0 properties as shown below.

    LessonLinear_Range1Customization

  • For the Range1, execute the following changes and click OK.

    LessonLinear_Range2Customization

  • Click OK to close the Scale Ranges editor.
  • Click OK to close Scales -Element Designer.

Then, you will see the following confirmation window.

Lesson_GaugeDesignerConfirmation

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.
  • Click OK to close the Visual Gauge Control Designer.

Step 5. Result

Run the application to see the result.

LessonLinear_Result