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
    [Expand]Gauge Elements
    [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]ASP.NET Core 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]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Layout Customization

This topic explains how to use the auto-layout feature, and details how it affects gauge resizing.

Expanded Auto-Layout Feature

Auto-layout specifies how gauges are arranged within a Gauge Control.

You can customize a gauge layout at design time using the gauge control designer. To do this, locate the gauge control's smart tag on the webform and select Customize Gauge Control as shown below.

Note

By default, auto layout is enabled.

In the invoked Visual Gauge Control Designer, select the gauge you would like to add to the gauge control on the right side of the designer, and click the Add button.

The following image demonstrates the process of adding circular, linear and digital gauges into the gauge control.

As you can see from the image above, if there is only one gauge in a Gauge Control, it's centered within the control. If there are multiple gauges, they are automatically arranged next to each other, without overlapping.

To see each gauge on the web form, you need to populate it with elements via the Gauge Designer.

The image below shows a possible result.

Vertical linear gauges are automatically positioned at the right edge of the Gauge Control (see the image above). Horizontal linear gauges and digital gauges are automatically positioned at the bottom of the Gauge Control. Other gauge types (circular and state indicator gauges) can occupy the remaining area.

In the auto-layout mode, you can use the GaugeControlBase.LayoutPadding and GaugeControlBase.LayoutInterval properties to arrange gauges within a gauge control.

To do this, select Run Style Manager... in the gauge control's smart tag.

In the invoked style manager, select the Gauges Layout tab.

For more information on how to customize a gauge control at design time, refer to the corresponding topic of the Design-time Features section.

Expanded Gauge Resizing

The auto-layout feature also automatically resizes gauges keeping their proportions, while you change the size of a gauge control.

But when you change the size of a gauge, this automatically deactivates the auto-layout feature.

To re-enable auto-layout for a gauge, you can set the control's GaugeControlBase.AutoLayout property to true. You can also enable this feature by checking the Auto Layout check box in the Gauge Control's tag menu.

For additional information, refer to the Manipulate Gauges topic.

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