Skip to main content

ASPxGaugeControl Class

Represents an ASPxGaugeControl.

Namespace: DevExpress.Web.ASPxGauges

Assembly: DevExpress.Web.ASPxGauges.v22.1.dll

Declaration

public class ASPxGaugeControl :
    ASPxWebControl,
    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.

ASPxGaugeControl_class

Create a Gauge Control

Design Time

The ASPxGaugeControl control is available on the DX.22.1: 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="&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.

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

Implements

See Also