Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
  [Expand]Reporting
  [Expand]Chart Control
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Site Navigation and Layout
  [Expand]File Management
  [Expand]Multi-Use Site Controls
  [Expand]Scheduler
  [Expand]HTML Editor
  [Expand]Pivot Grid
  [Expand]Tree List
  [Collapse]Gauges
   [Expand]Product Information
   [Expand]Getting Started
   [Expand]Fundamentals
   [Collapse]Concepts
    [Expand]Gauge Types
    [Collapse]Gauge Elements
      Scales
      Ranges
      Labels
      Value Indicators
    [Expand]Appearance
     Data Binding
     Layout Customization
   [Expand]Visual Elements
   [Expand]Design-time Features
   [Expand]Examples
  [Expand]Data Editors
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[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

Labels

There are two types of labels supported in theASPxGaugeControl:

  • Custom labels that can display only static text, and do not display a scale value automatically;

  • Scale value labels (supported only by circular and linear gauges) show current scale values and can also display custom text.

Expanded Custom Labels

All types of gauges support custom labels. Custom labels provide the following features.

  • They can be displayed above or below other gauge elements.

    To specify the label's position along the Z axis, use the label's ZOrder property.

  • Support for HTML formatting of the label's text.

    You can use specific HTML tags to format the label's text. See Label.Text to learn more.

To add a custom label to a web form at design time, do the following:

  • locate the Gauge control's smart tag and click Customize Gauge Control...;

  • In the invoked Visual Gauge Control Designer, locate the gauge's smart tag menu and click Add Label;

A custom gauge label appears in the gauge designer and you can edit it.

For this, select the label on the gauge and invoke its designer via the label's smart tag as shown below.

Then, in the invoked designer, you can customize label appearance, geometry and text.

Custom labels are represented by LabelComponent class objects.

When you add a custom label at design time, it's added to the gauge's BaseGaugeWin.Labels collection.

Expanded Scale Value Labels

Scale value labels are supported by circular and linear gauges. They allow a scale's value to be automatically displayed, and in addition, they can display custom text. The features of scale labels include:

  • The ability to display a scale's value along with custom text.

    Value labels belong to a scale and they automatically receive notifications when the scale's value is changed, and update view information accordingly. You do not need to write additional code to synchronize the value label and the scale's value.

  • Support for HTML formatting of the label's text.

    You can use specific HTML tags to format the label's text.

  • A scale label belongs to a scale, so it's displayed at the same level as the scale.

To add a scale value label at design time, you need to run the scale label collection editor. To accomplish this, do the following:

  • Run Visual Gauge Control Designer as you did in the previous section;

  • For the required scale, locate its smart tag and click Run Designer.

  • Then, in the invoked Scales - Element Designer, locate and click the Labels... button, as shown below.

The collection editor allows you to add one or more labels and customize their settings:

For instance, the FormatString property allows you to include the scale's current value in the label's text. Note that placeholder {0} stands for the value of the label's Text property, and placeholder {1} stands for the scale's current value.

In the image below, the label belongs to the upper scale, so it shows a value of 25.

Expanded See Also

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