ASPxGaugeControl Class
Represents an ASPxGaugeControl.
Namespace: DevExpress.Web.ASPxGauges
Assembly: DevExpress.Web.ASPxGauges.v23.2.dll
NuGet Package: DevExpress.Web.Visualization
Declaration
public class ASPxGaugeControl :
ASPxWebControl,
IGaugeContainerEx,
IGaugeContainer,
ILayoutManagerContainer,
INamingContainer,
IXtraSerializable,
IRequiresLoadPostDataControl,
ISharePointEmptyDesignTimeControlRemarks
ASPxGaugeControl is a container of gauges. It can display multiple gauges of different types simultaneously. There are four gauge types: circular, linear, digital gauges and state indicators.
Create a Gauge Control
Design Time
The ASPxGaugeControl control is available on the DX.23.2: Data & Analytics toolbox tab in the Microsoft Visual Studio IDE.
Drag the control onto a form and customize the control’s settings, or paste the control markup in the page’s source code.
<dx:ASPxGaugeControl ID="ASPxGaugeControl1" runat="server" BackColor="White"
Height="250px" Width="250px" ClientInstanceName="ClientGaugeControl">
<Gauges>
<dx:DigitalGauge AppearanceOff-ContentBrush="<BrushObject Type="Solid"
Data="Color:#C8C8C8"/>" AppearanceOn-ContentBrush="<BrushObject
Type="Solid" Data="Color:Black"/>" Bounds="0, 0, 250, 250"
DigitCount="5" Name="Gauge0" Padding="20, 20, 20, 20" Text="12,345">
<backgroundlayers>
<dx:DigitalBackgroundLayerComponent AcceptOrder="-1000" BottomRight="259.8125, 99.9625"
Name="digitalBackgroundLayerComponent13" ShapeType="Style11" TopLeft="20, 0" ZOrder="1000" />
</backgroundlayers>
</dx:DigitalGauge>
</Gauges>
<LayoutPadding All="0" Left="0" Top="0" Right="0" Bottom="0"></LayoutPadding>
</dx:ASPxGaugeControl>
See the following topic to learn more: Lesson 1 - Create a Circular Gauge.
Run Time
using System.Drawing;
using DevExpress.Web.ASPxGauges;
using DevExpress.Web.ASPxGauges.Base;
using DevExpress.XtraGauges.Core.Drawing;
using DevExpress.Web.ASPxGauges.Gauges.Digital;
using DevExpress.XtraGauges.Base;
using DevExpress.XtraGauges.Core.Model;
...
protected void Page_Load(object sender, EventArgs e)
{
ASPxGaugeControl gaugeControl = new ASPxGaugeControl();
gaugeControl.BackColor = Color.White;
gaugeControl.Height = 250;
gaugeControl.Width = 250;
gaugeControl.ClientInstanceName = "ClientGaugeControl";
DigitalGauge digitalGauge = (DigitalGauge)gaugeControl.AddGauge(GaugeType.Digital);
digitalGauge.DigitCount = 5;
digitalGauge.Text = "12,345";
digitalGauge.Name = "Gauge0";
digitalGauge.AppearanceOn.ContentBrush = new SolidBrushObject(Color.Orange);
DigitalBackgroundLayerComponent bg = digitalGauge.AddBackgroundLayer();
bg.ShapeType = DigitalBackgroundShapeSetType.Style11;
bg.AcceptOrder = -1000;
bg.ZOrder = 1000;
Page.Form.Controls.Add(gaugeControl);
}
The following topics describe how to create the ASPxGaugeControl at runtime:
Note
DevExpress controls require that you register special modules, handlers, and options in the Web.config file. You can change this file or switch to the Design tab in the Microsoft Visual Studio IDE to automatically update the Web.config file. Note that this information is automatically registered if you use the DevExpress Template Gallery to create a project.
At design time, you can create gauges on the fly from predefined presets, using the Preset Manager. Numerous presets are ready-to-use gauges that you can quickly load, and then customize as required. Any gauge element can also be customized. You can choose among numerous paint styles of needles, background layers and scales, and specify the appearance of labels, the position of scales and needles, etc.
The ASPxGaugeControl stores gauges within the ASPxGaugeControl.Gauges collection. Individual gauges can be accessed using indexed notation. To add empty gauges to this collection in code, use the ASPxGaugeControl.AddGauge method.
Typically, an ASPxGaugeControl contains only one gauge. You can use the ASPxGaugeControl.Value property to assign a value to the gauge. For instance, you can use this property to assign text to be displayed in a DigitalGauge, or assign a scale value to a LinearGauge or CircularGauge.
Note
The ASPxGaugeControl control provides you with a comprehensive client-side functionality implemented using JavaScript code:
- The control’s client-side equivalent is represented by the ASPxClientGaugeControl object.
- On the client side, the client object can be accessed directly by the name specified via the ASPxGaugeControl.ClientInstanceName property.
- The available client events can be accessed by using the ASPxGaugeControl.ClientSideEvents property.
The control’s client-side API is enabled if the ASPxGaugeControl.EnableClientSideAPI property is set to true, or the ASPxGaugeControl.ClientInstanceName property is defined, or any client event is handled.