ASPxGaugeControl Class

Represents an ASPxGaugeControl.

Namespace : DevExpress.Web.ASPxGauges

Assembly : DevExpress.Web.ASPxGauges.v25.2.dll

NuGet Package : DevExpress.Web.Visualization

Declaration

C#
VB.NET

csharp

public class ASPxGaugeControl :
    ASPxWebControl,
    IGaugeContainerEx,
    IGaugeContainer,
    ILayoutManagerContainer,
    INamingContainer,
    IXtraSerializable,
    IRequiresLoadPostDataControl,
    ISharePointEmptyDesignTimeControl

Public Class ASPxGaugeControl
    Inherits ASPxWebControl
    Implements IGaugeContainerEx,
               IGaugeContainer,
               ILayoutManagerContainer,
               INamingContainer,
               IXtraSerializable,
               IRequiresLoadPostDataControl,
               ISharePointEmptyDesignTimeControl

Remarks

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.25.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.

ASPX

aspx

<dx:ASPxGaugeControl ID="ASPxGaugeControl1" runat="server" BackColor="White" 
                     Height="250px" Width="250px" ClientInstanceName="ClientGaugeControl">
    <Gauges>
        <dx:DigitalGauge AppearanceOff-ContentBrush="&lt;BrushObject Type=&quot;Solid&quot; 
            Data=&quot;Color:#C8C8C8&quot;/&gt;" AppearanceOn-ContentBrush="&lt;BrushObject 
            Type=&quot;Solid&quot; Data=&quot;Color:Black&quot;/&gt;" 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.

csharp

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);
}

Imports System.Drawing
Imports DevExpress.Web.ASPxGauges
Imports DevExpress.Web.ASPxGauges.Base
Imports DevExpress.XtraGauges.Core.Drawing
Imports DevExpress.Web.ASPxGauges.Gauges.Digital
Imports DevExpress.XtraGauges.Base
Imports DevExpress.XtraGauges.Core.Model

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    Dim gaugeControl As ASPxGaugeControl = New ASPxGaugeControl()
    gaugeControl.BackColor = Color.White
    gaugeControl.Height = 250
    gaugeControl.Width = 250
    gaugeControl.ClientInstanceName = "ClientGaugeControl"

    Dim digitalGauge As DigitalGauge = CType(gaugeControl.AddGauge(GaugeType.Digital), DigitalGauge)

    digitalGauge.DigitCount = 5
    digitalGauge.Text = "12,345"

    digitalGauge.Name = "Gauge0"
    digitalGauge.AppearanceOn.ContentBrush = New SolidBrushObject(Color.Orange)

    Dim bg As DigitalBackgroundLayerComponent = digitalGauge.AddBackgroundLayer()
    bg.ShapeType = DigitalBackgroundShapeSetType.Style11
    bg.AcceptOrder = -1000
    bg.ZOrder = 1000

    Page.Form.Controls.Add(gaugeControl)
End Sub

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.