How to: Use Custom Draw Events

Jul 19, 2021
5 minutes to read

This example illustrates how to use the CustomDrawElement event to customize the appearance of ASPxGaugeControl.

using System;
using System.Drawing;
using DevExpress.XtraGauges.Core.Primitive;

namespace CustomDraw {
    public partial class _Default : System.Web.UI.Page {
        bool handleCustomDraw;
        protected void Page_Init(object sender, EventArgs e) {
            arcScale.CustomDrawElement += arcScale_CustomDrawElement;
            arcScaleNeedle.CustomDrawElement += arcScaleNeedle_CustomDrawElement;
            arcScaleBackgroundLayer.CustomDrawElement += arcScaleBackgroundLayer_CustomDrawElement;
        }
        protected void Page_Load(object sender, EventArgs e) {
            handleCustomDraw = ASPxCheckBox1.Checked;
            arcScale.Value = (float)value.Number;
        }
        void arcScale_CustomDrawElement(object sender, CustomDrawElementEventArgs e) {
            if(!handleCustomDraw) return;
            e.Handled = true;
        }
        void arcScaleBackgroundLayer_CustomDrawElement(object sender, CustomDrawElementEventArgs e) {
            if(!handleCustomDraw) return;
            RectangleF bounds = RectangleF.Inflate(e.Info.BoundBox, -15, -15);
            e.Context.Graphics.FillEllipse(Brushes.Black, bounds);
            bounds.Inflate(-2, -2);
            e.Context.Graphics.SetClip(new RectangleF(bounds.Left + bounds.Width * 0.5f, bounds.Top, bounds.Width * 0.5f, bounds.Height));
            e.Context.Graphics.FillEllipse(Brushes.White, bounds);
            e.Context.Graphics.ResetClip();
            e.Context.Graphics.FillEllipse(Brushes.White, new RectangleF(
                bounds.Left + bounds.Width * 0.25f, bounds.Top,
                bounds.Width * 0.5f, bounds.Height * 0.5f));
            e.Context.Graphics.FillEllipse(Brushes.Black, new RectangleF(
                bounds.Left + bounds.Width * 0.25f, bounds.Top + bounds.Height * 0.5f,
                bounds.Width * 0.5f, bounds.Height * 0.5f));
            e.Handled = true;
        }
        void arcScaleNeedle_CustomDrawElement(object sender, CustomDrawElementEventArgs e) {
            if(!handleCustomDraw) return;
            e.Context.Graphics.FillEllipse(Brushes.White, new RectangleF(50, 112.5f, 25, 25));
            e.Context.Graphics.FillEllipse(Brushes.Black, new RectangleF(175, 112.5f, 25, 25));
            e.Handled = true;
        }
    }
}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CustomDraw._Default" %>

<%@ Register Assembly="DevExpress.Web.ASPxGauges.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxGauges" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.ASPxGauges.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxGauges.Gauges" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.ASPxGauges.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxGauges.Gauges.Linear" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.ASPxGauges.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxGauges.Gauges.Circular" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.ASPxGauges.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxGauges.Gauges.State" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.ASPxGauges.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxGauges.Gauges.Digital" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <script type="text/javascript">
        // <![CDATA[
        var isDirty;
        function PerformCallbackCore() {
            var gauge = window["gauge"];
            isDirty = gauge.InCallback();
            if (!isDirty)
                gauge.PerformCallback();
        }
        function OnChanged() {
            PerformCallbackCore();
        }
        function OnEndCallback() {
            if (isDirty)
                window.setTimeout(PerformCallbackCore, 0);
        }
        // ]]> 
    </script>

    <div>
        <dx:ASPxGaugeControl runat="server" Height="300px" Width="300px" BackColor="Transparent" ID="gaugeControl" ClientInstanceName="gauge"
            SaveStateOnCallbacks="false">
            <ClientSideEvents EndCallback="OnEndCallback" />
            <Gauges>
                <dx:CircularGauge Bounds="0, 0, 300, 300" Name="cGauge">
                    <scales>
                        <dx:ArcScaleComponent AppearanceTickmarkText-Font="Tahoma, 11pt" ID="arcScale" Name="arcScale"
                            AppearanceTickmarkText-TextBrush="&lt;BrushObject Type=&quot;Solid&quot; Data=&quot;Color:Black&quot;/&gt;" 
                            Center="125, 125" EndAngle="60" MajorTickmark-FormatString="{0:F0}" MajorTickmark-ShapeOffset="-3.5" 
                            MajorTickmark-ShapeType="Circular_Style1_4" MajorTickmark-TextOffset="-15" MajorTickmark-TextOrientation="LeftToRight" 
                            MaxValue="100" MinorTickCount="4" MinorTickmark-ShapeType="Circular_Style1_3" StartAngle="-240" 
                            Value="80">
                        </dx:ArcScaleComponent>
                    </scales>
                    <backgroundlayers>
                        <dx:ArcScaleBackgroundLayerComponent  ID="arcScaleBackgroundLayer" Name="bg" ScaleID="arcScale" ShapeType="CircularFull_Style1" ZOrder="1000" />
                    </backgroundlayers>
                    <needles>
                        <dx:ArcScaleNeedleComponent ID="arcScaleNeedle" Name="needle" ScaleID="arcScale" ShapeType="CircularFull_Style1" StartOffset="-4.5" 
                            ZOrder="-50" />
                    </needles>
                </dx:CircularGauge>
            </Gauges>
        </dx:ASPxGaugeControl>
        <table border="0" cellpadding="4" cellspacing="0">
            <tr>
                <td align="left" class="ActionMainLabel">
                    <dx:ASPxCheckBox EnableViewState="False" ID="ASPxCheckBox1" runat="server" Text="Handle CustomDraw events">
                        <ClientSideEvents CheckedChanged="OnChanged" />
                    </dx:ASPxCheckBox>
                </td>
            </tr>
            <tr>
                <td align="left">
                    Value:
                </td>
                <td align="left">
                    <dx:ASPxSpinEdit ID="value" runat="server" MaxValue="100" MinValue="0" Number="60" Width="120px" NumberType="Float" Increment="1"
                        LargeIncrement="5" SpinButtons-ShowLargeIncrementButtons="true">
                        <ClientSideEvents NumberChanged="OnChanged" />
                    </dx:ASPxSpinEdit>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Imports Microsoft.VisualBasic
Imports System
Imports System.Drawing
Imports DevExpress.XtraGauges.Core.Primitive

Namespace CustomDraw
    Partial Public Class _Default
        Inherits System.Web.UI.Page
        Private handleCustomDraw As Boolean
        Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
            AddHandler arcScale.CustomDrawElement, AddressOf arcScale_CustomDrawElement
            AddHandler arcScaleNeedle.CustomDrawElement, AddressOf arcScaleNeedle_CustomDrawElement
            AddHandler arcScaleBackgroundLayer.CustomDrawElement, AddressOf arcScaleBackgroundLayer_CustomDrawElement
        End Sub
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            handleCustomDraw = ASPxCheckBox1.Checked
            arcScale.Value = CSng(value.Number)
        End Sub
        Private Sub arcScale_CustomDrawElement(ByVal sender As Object, ByVal e As CustomDrawElementEventArgs)
            If (Not handleCustomDraw) Then
                Return
            End If
            e.Handled = True
        End Sub
        Private Sub arcScaleBackgroundLayer_CustomDrawElement(ByVal sender As Object, ByVal e As CustomDrawElementEventArgs)
            If (Not handleCustomDraw) Then
                Return
            End If
            Dim bounds As RectangleF = RectangleF.Inflate(e.Info.BoundBox, -15, -15)
            e.Context.Graphics.FillEllipse(Brushes.Black, bounds)
            bounds.Inflate(-2, -2)
            e.Context.Graphics.SetClip(New RectangleF(bounds.Left + bounds.Width * 0.5f, bounds.Top, bounds.Width * 0.5f, bounds.Height))
            e.Context.Graphics.FillEllipse(Brushes.White, bounds)
            e.Context.Graphics.ResetClip()
            e.Context.Graphics.FillEllipse(Brushes.White, New RectangleF(bounds.Left + bounds.Width * 0.25f, bounds.Top, bounds.Width * 0.5f, bounds.Height * 0.5f))
            e.Context.Graphics.FillEllipse(Brushes.Black, New RectangleF(bounds.Left + bounds.Width * 0.25f, bounds.Top + bounds.Height * 0.5f, bounds.Width * 0.5f, bounds.Height * 0.5f))
            e.Handled = True
        End Sub
        Private Sub arcScaleNeedle_CustomDrawElement(ByVal sender As Object, ByVal e As CustomDrawElementEventArgs)
            If (Not handleCustomDraw) Then
                Return
            End If
            e.Context.Graphics.FillEllipse(Brushes.White, New RectangleF(50, 112.5f, 25, 25))
            e.Context.Graphics.FillEllipse(Brushes.Black, New RectangleF(175, 112.5f, 25, 25))
            e.Handled = True
        End Sub
    End Class
End Namespace

<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="CustomDraw._Default" %>

<%@ Register Assembly="DevExpress.Web.ASPxGauges.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxGauges" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.ASPxGauges.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxGauges.Gauges" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.ASPxGauges.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxGauges.Gauges.Linear" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.ASPxGauges.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxGauges.Gauges.Circular" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.ASPxGauges.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxGauges.Gauges.State" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.ASPxGauges.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxGauges.Gauges.Digital" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <script type="text/javascript">
        // <![CDATA[
        var isDirty;
        function PerformCallbackCore() {
            var gauge = window["gauge"];
            isDirty = gauge.InCallback();
            if (!isDirty)
                gauge.PerformCallback();
        }
        function OnChanged() {
            PerformCallbackCore();
        }
        function OnEndCallback() {
            if (isDirty)
                window.setTimeout(PerformCallbackCore, 0);
        }
        // ]]> 
    </script>

    <div>
        <dx:ASPxGaugeControl runat="server" Height="300px" Width="300px" BackColor="Transparent" ID="gaugeControl" ClientInstanceName="gauge"
            SaveStateOnCallbacks="false">
            <ClientSideEvents EndCallback="OnEndCallback" />
            <Gauges>
                <dx:CircularGauge Bounds="0, 0, 300, 300" Name="cGauge">
                    <scales>
                        <dx:ArcScaleComponent AppearanceTickmarkText-Font="Tahoma, 11pt" ID="arcScale" Name="arcScale"
                            AppearanceTickmarkText-TextBrush="&lt;BrushObject Type=&quot;Solid&quot; Data=&quot;Color:Black&quot;/&gt;" 
                            Center="125, 125" EndAngle="60" MajorTickmark-FormatString="{0:F0}" MajorTickmark-ShapeOffset="-3.5" 
                            MajorTickmark-ShapeType="Circular_Style1_4" MajorTickmark-TextOffset="-15" MajorTickmark-TextOrientation="LeftToRight" 
                            MaxValue="100" MinorTickCount="4" MinorTickmark-ShapeType="Circular_Style1_3" StartAngle="-240" 
                            Value="80">
                        </dx:ArcScaleComponent>
                    </scales>
                    <backgroundlayers>
                        <dx:ArcScaleBackgroundLayerComponent  ID="arcScaleBackgroundLayer" Name="bg" ScaleID="arcScale" ShapeType="CircularFull_Style1" ZOrder="1000" />
                    </backgroundlayers>
                    <needles>
                        <dx:ArcScaleNeedleComponent ID="arcScaleNeedle" Name="needle" ScaleID="arcScale" ShapeType="CircularFull_Style1" StartOffset="-4.5" 
                            ZOrder="-50" />
                    </needles>
                </dx:CircularGauge>
            </Gauges>
        </dx:ASPxGaugeControl>
        <table border="0" cellpadding="4" cellspacing="0">
            <tr>
                <td align="left" class="ActionMainLabel">
                    <dx:ASPxCheckBox EnableViewState="False" ID="ASPxCheckBox1" runat="server" Text="Handle CustomDraw events">
                        <ClientSideEvents CheckedChanged="OnChanged" />
                    </dx:ASPxCheckBox>
                </td>
            </tr>
            <tr>
                <td align="left">
                    Value:
                </td>
                <td align="left">
                    <dx:ASPxSpinEdit ID="value" runat="server" MaxValue="100" MinValue="0" Number="60" Width="120px" NumberType="Float" Increment="1"
                        LargeIncrement="5" SpinButtons-ShowLargeIncrementButtons="true">
                        <ClientSideEvents NumberChanged="OnChanged" />
                    </dx:ASPxSpinEdit>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode