Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Create a Dial

The Dial property determines the shape of a Radial gauge. By default, the dial sweeps 360 degrees, so it appears as a circle.

This topic guides you through the first step in creating a new Radial gauge. After completing the steps outlined in this topic, you will have created a new Radial gauge with the Dial property set to a solid black background.

The next step after creating a Dial is to Add a Scale to a Gauge.

You can configure the Dial property of your gauge:

When you save and run your application after completing the following steps, your gauge should look similar to the gauge below.

Radial gauge shown.

To configure the Dial property of your Radial gauge using the Gauge Designer:

  1. In the Gauge Explorer, expand the Gauges property.

  2. Click Add Gauge…​ and select New Radial Gauge.

  3. Expand Radial Gauge and select Dial.

  4. In the Appearance tab of the Properties panel, select Solid from the Type drop-down list.

  5. Click the Details drop-down arrow.

  6. The color picker appears. On the left-hand side, click Web, then select the Black color.

To configure the Dial property of your Radial gauge at design time:

  1. In Design view, click the UltraGauge control on your form.

  2. In the Properties window, click the Gauges property. Then, click the ellipsis button (…) to open the Gauges collection editor.

  3. In the Gauges collection editor, click Add, and select Add Radial Gauge.

  4. Expand the Dial property.

  5. Create a new BrushElement object by clicking the BrushElement property. Then from the drop-down list, select Solid Fill.

  6. Expand the BrushElement property, and set the Color property to Black.

To configure the Dial property of your Radial gauge at run time:

  1. Before you start writing any code, you should place using/Imports directives in your code-behind so you don’t need to always type out a member’s fully qualified name.

In Visual Basic:

Imports Infragistics.UltraGauge.Resources

In C#:

using Infragistics.UltraGauge.Resources;

  1. Create the load event.

  2. Create a Gauge collection, a Radial gauge and the brush element:

In Visual Basic:

Dim ultraGauge1 As New Infragistics.WebUI.UltraWebGauge.UltraGauge()
Dim myRadialGauge As New RadialGauge()
Dim mySolidFillBrushElement As New SolidFillBrushElement()

In C#:

Infragistics.WebUI.UltraWebGauge.UltraGauge ultraGauge1 =
  new Infragistics.WebUI.UltraWebGauge.UltraGauge();
RadialGauge myRadialGauge = new RadialGauge();
SolidFillBrushElement mySolidFillBrushElement = new SolidFillBrushElement();

  1. Set the following color properties:

    • Type — Solid

    • Color — Black

In Visual Basic:

mySolidFillBrushElement.Color = System.Drawing.Color.Black
myRadialGauge.Dial.BrushElement = mySolidFillBrushElement

In C#:

mySolidFillBrushElement.Color = System.Drawing.Color.Black;
myRadialGauge.Dial.BrushElement = mySolidFillBrushElement;

  1. Add your Radial gauge to the gauges collection. Set the following properties:

    • Location — (30, 4)

    • Name — ultraGauge1

    • Size — (250, 250)

    • TabIndex — 0

In Visual Basic:

ultraGauge1.Gauges.Add(myRadialGauge)
ultraGauge1.Location = New System.Drawing.Point(30, 4)
ultraGauge1.Name ="ultraGauge1"
ultraGauge1.Size = New System.Drawing.Size(250, 250)
ultraGauge1.TabIndex = 0
Me.Controls.Add(ultraGauge1)

In C#:

ultraGauge1.Gauges.Add(myRadialGauge);
ultraGauge1.Location = new System.Drawing.Point(30, 4);
ultraGauge1.Name = "ultraGauge1";
ultraGauge1.Size = new System.Drawing.Size(250, 250);
ultraGauge1.TabIndex = 0;
this.Controls.Add(ultraGauge1);

Related Topic

Add a Scale to a Gauge