[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 4 - Create a State Indicator

This lesson demonstrates how to create a State Indicator and adjust its common settings.

This tutorial consists of the following steps.

  1. Create a New Project and Add a State Indicator
  2. Select a Model
  3. Change the Indicator Default State
  4. Animate the State Indicator
  5. Result

Expanded Step 1. Create a New Project and Add a State Indicator

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.
  • Add the StateIndicatorControl component to your project. To do this, locate the StateIndicatorControl item in a Visual Studio toolbox on the DX.19.2: Data & Analytics tab and drop it onto the main window.

  • Right-click the StateIndicatorControl 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 the following.

Expanded Step 2. Select a Model

A State Indicator provides a large number of built-in models that can be used for different purposes.

In this lesson, we'll use SmileStateIndicatorModel to create a smile indicator, which can change its state depending on the mouse position.

After that the MainWindow may look like the following.

Expanded Step 3. Change the Indicator Default State

SmileIndicatorModel contains several predefined states that can be used to show different object states.

Let's change the default state of the smile indicator.

The state indicator control will be similar to the following.

Expanded Step 4. Animate the State Indicator

If you want the state indicator to change its image when a mouse pointer hovers it, handle the stateIndicatorControl1_MouseEnter and stateIndicatorControl1_MouseLeave events of the control.

  • For this, double-click the MouseEnter and MouseLeave events in the Properties window, as shown below.

    After that, your XAML should look like the following.

  • Add the following code to the MainWindow.xaml.cs file.

Expanded Step 5. Result

Run the project to see the result.


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

Expanded See Also

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