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: Move Value Indicators at Runtime

This example illustrates how to grant your end-users the capability to move a gauge needle by dragging it or clicking a gauge scale. Note that you can do this on any type of value indicator, not only needles.

  1. Handle the MouseDown and MouseMove events, inherited from the System.Windows.Forms.Control class.
  2. Use the CalcHitInfo method provided by the IGaugeContainer interface. This method takes a point as a parameter and returns the gauge hit information. You can use this information to get which gauge element is located at the target coordinates.
  3. A rendered gauge is always surrounded by a gauge background (see the figure below).

    Technically, this background belongs to the gauge control and thus, clicking it returns a valid BasePrimitiveHitInfo object. The code below illustrates how to check the type of the gauge element to which the hit information corresponds. As a result, the needle will move only when an end-users clicks within a rendered gauge.

  4. Convert the click coordinates to gauge coordinates by using the PointToModelPoint method of the DevExpress.XtraGauges.Core.Primitive.MathHelper class.
  5. Now, convert gauge coordinates to a scale value. First, use the ArcScale.PointToPercent method (the LinearScale.PointToPercent method for linear gauges). This method will return the percentage of the 'filled' scale compared to this entire scale. Then, call the ArcScale.PercentToValue/LinearScale.PercentToValue method to convert this relative value to an absolute scale value. Finally, apply this value to a scale (or to a value indicator if it is not bound to scale values).
  6. For the MouseMove event, you need to do exactly the same as before, except for one additional condition: check the Button parameter of the received MouseEventArgs data to get whether or not an end-user moves the mouse pointer while holding left mouse button down.
  7. Move your code from event handlers to a separate method to avoid code duplication.
  8. Use the following code to change the mouse pointer when it hovers a rendered gauge. This small enhancement will give your customers a tip that the gauge is clickable.

    Add this method call to your MouseMove event handler as follows.

  9. Launch the application to see the result.

Expanded Complete Code

This section lists the complete example code. Also, the DevExpress Demo Center contains a demo module for this example ('Gauge and Indicators' demo, 'Event-based Interaction' module). Click the 'Open Solution' button to open this demo module in Visual Studio.

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