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 State Indicator Gauge (Design-time)

This is the fourth tutorial of the XtraGauges Getting Started series. It will guide you through the process of creating a State lndicator Gauge and adjusting its common settings.

This tutorial consists of the following steps.

  1. Prerequisite
  2. Load the Required Gauge Preset
  3. Add the Additional States
  4. Animate the State Indicator
  5. 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

  • In the Preset Manager, click StateIndicator to display state indicator's presets.

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

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

The image below shows how to load the TrafficLight preset using the second approach.

The Form1 window will have the following view.

Expanded Step 3. Add the Additional States

In this step, we will add the additional states for the TrafficLight preset. They will be two flags: USA and UK.

To accomplish this, do the following:

  • Locate the smart tag of the Indicator element and click Run Designer as shown below.

  • In the invoked Indicators-Element Designer, click the States... button to get access to the collection of the state indicator's states.

As you see from the image below, the TrafficLight preset contains 4 states. Let's add two additional states for this preset.

  • To do this, double click the Add button on the left side of the Indicator States editor.

  • For the Default state, change its name to State5 and ShapeType to FlagUSA. See the image below.

  • Rename State5 to State6 and set its ShapeType to FlagUK. Then, click OK.

  • Click OK to close the Indicators - Element Designer editor.

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 4. Animate the State Indicator

In this step, we will force the state indicator to change its states using the ComboBox component.

  • To accomplish this, drop ComboBox from the toolbox onto the form.

  • Locate the Text property of the ComboBox component in the Property window, and set it to State1.
  • Invoke the ComboBox String Collection Editor by clicking the Item... button in the Property window and add the following strings to this editor. Then, click OK.

  • Double-click the ComboBox component in the Form1, and add the following code to the Form1.cs file.

Expanded Step 5. Result

Run the project to see the result.

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