Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Creating a Complex WebGauge Using the WebGauge Designer (Part 1 of 5)

This procedure guides you through the process of creating a Radial gauge and setting the Dial, Scale and Label properties.

  1. From the toolbox, drag the UltraGauge control to your form. The Gauge Designer opens.

The gauge designer that appears when you place the UltraGauge on a form.

  1. In the Gauge Explorer, expand Gauges.

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

  3. Expand Radial Gauge and select OverDial.

  4. In the Properties panel, click the Appearance tab. In the Brush pane, add the following brush elements with the specified properties:

    • Multi-Stop Radial Gradient brush element

      • ColorStop 1 — Offset = 0, Color = Transparent

      • ColorStop 2 — Offset = 0.005045409, Color = Color.FromArgb(150, 255, 255, 255)

      • ColorStop 3 — Offset = 0.1413793, Color = Color.FromArgb(100, 255, 255, 255)

      • ColorStop 4 — Offset = 0.2689655, Color = Transparent

      • ColorStop 5 — Offset = 1, Color = Transparent

      • FocusScales — 3, 0

      • CenterPoint — 50, 100

    • Multi-Stop Radial Gradient brush element

      • ColorStop 1 — Offset = 0, Color = Transparent

      • ColorStop 2 — Offset = 0.2517241, Color = Color.FromArgb(46, 254, 254, 254)

      • ColorStop 3 — Offset = 0.6034483, Color = Color.FromArgb(120, 255, 255, 255)

      • ColorStop 4 — Offset = 1, Color = Color.FromArgb(255, 255, 255, 255)

      • FocusScales — 0.099999, 0

      • CenterPoint — 50, 110

  1. Expand Radial Gauge and select Dial.

  2. In the Properties panel, click the Appearance tab. In the Brush pane, add the following brush elements with the specified properties:

    • Multi-Stop Radial Gradient brush element

      • ColorStop 1 — Offset = 0, Color = Color.FromArgb(240, 240, 240)

      • ColorStop 2 — Offset = 0.4758621, Color = Color.FromArgb(210, 210, 210)

      • ColorStop 3 — Offset = 1, Color = Color.FromArgb(89, 89, 89)

      • FocusScales — 0.800000012, 0.800000012

      • CenterPoint — 50, 50

    • Multi-Stop Radial Gradient brush element

      • ColorStop 1 — Offset = 0, Color = Transparent

      • ColorStop 2 — Offset = 0.003548387, Color = Color.FromArgb(180, 180, 180)

      • ColorStop 3 — Offset = 0.04193548, Color = Color.FromArgb(240, 240, 240)

      • ColorStop 4 — Offset = 0.05870968, Color = Color.FromArgb(0, 79, 118)

      • ColorStop 5 — Offset = 1, Color = Color.FromArgb(0, 174, 209)

      • FocusScales — 0, 0

      • CenterPoint — 50, 50

    • Multi-Stop Radial Gradient brush element

      • ColorStop 1 — Offset = 0, Color = Transparent

      • ColorStop 2 — Offset = 0.02413793, Color = Color.FromArgb(40, 0, 0, 0)

      • ColorStop 3 — Offset = 0.2655172, Color = Color.FromArgb(30, 0, 0, 0)

      • ColorStop 4 — Offset = 0.4551724, Color = Transparent

      • ColorStop 5 — Offset = 1, Color = Transparent

      • FocusScales — 0.5, 3

      • CenterPoint — 100, 50

    • Multi-Stop Radial Gradient brush element

      • ColorStop 1 — Offset = 0, Color = Transparent

      • ColorStop 2 — Offset = 0.02413793, Color = Color.FromArgb(40, 0, 0, 0)

      • ColorStop 3 — Offset = 0.2655172, Color = Color.FromArgb(30, 0, 0, 0)

      • ColorStop 4 — Offset = 0.4551724, Color = Transparent

      • ColorStop 5 — Offset = 1, Color = Transparent

      • FocusScales — 0.5, 3

      • CenterPoint — 0, 50

  1. In the Stroke pane of the Appearance tab set the following properties:

    • Type — Solid

    • Details — Silver

    • Style — Solid

    • Thickness — 1

    • Alignment — Center

The gauge designer with the basic radial gauge shown.

  1. In the Gauge Explorer, expand Scales.

  2. Click Add Scale…​ and select New Scale.

  3. In the Properties panel, click the Scale Layout tab. In the Sweep Angle pane, set the following properties:

    • Start — 160

    • End — 380

  1. In the Axis pane of the Scale Layout tab, set the following properties:

    • End Value — 300.00

    • Start Value — 30.00

    • Tickmark Interval — 1.0

  1. In the Gauge Explorer, expand the newly created scale, and select Labels.

  2. In the Properties panel, click the Labels Layout tab. In the Orientation pane, set the following properties:

    • Extent — 84

    • Orientation — Horizontal

  1. In the Formatting pane of the Labels Layout tab, set the following properties:

    • Frequency — 30.00

    • Span Max — 10

  1. Click the Labels Appearance tab. In the Brush pane set the following properties:

    • Type — Solid

    • Color — White

  1. In the Font pane of the Labels Appearance tab, set the following properties:

    • Font — Impact

    • Font size — 14

    • Type — Point

The gauge designer that shows labels specified on it.

  1. In the Gauge Explorer, select Major Tickmarks.

  2. In the Properties panel, click the Tickmark Layout tab. In the Extent pane set the following properties:

    • Start — 68

    • End — 78

  1. In the Widths pane of the Tickmark Layout tab, set the following properties:

    • Start — 4

    • End — 4

  1. In the Orientation pane of the Tickmark Layout tab, set the following properties:

    • Frequency — 30.00

    • Post-Initial — 150

  1. Click the Appearance tab. In the Brush pane, set the following properties:

    • Type — Solid

    • Color — Color.FromArgb(180, 255, 216, 22)

  1. In the Stroke pane of the Appearance tab, set the following properties:

    • Type — Solid

    • Color — Color.FromArgb(232, 154, 0)

  1. In the Gauge Explorer, select Minor Tickmarks.

  2. In the Properties Panel, click the Tickmark Layout tab. In the Extent pane, set the following properties:

    • Start — 70

    • End — 75

  1. In the Widths pane of the Tickmark Layout tab, set the following properties:

    • Start — 2

    • End — 2

  1. In the Orientation pane of the Tickmark Layout tab, set the following properties:

    • Post-Initial — 150

    • Frequency — 10.00

  1. Click the Appearance tab. In the Brush pane, set the following properties:

    • Type — Solid

    • Color — Color.FromArgb(0, 255, 255, 255)

  1. In the Stroke pane of the Appearance tab, set the following properties:

    • Type — Solid

    • Color — White

The gauge designer with the tickmarks specified.

  1. In the Gauge Explorer, expand Markers.

  2. Click Add Marker…​ and select New Needle.

  3. In the Properties Panel, click the Needle Marker Layout tab. In the Widths and Extents pane, set the following properties:

    • Widths

      • Start — 7

      • Mid — 7

      • End — 0

    • Extents

      • Start — -26

      • Mid — 26

      • End — 37

  1. In the Value and Units pane of the Needle Marker Layout tab, set the following properties:

    • Value — 100.00

    • Precision — 100.00

    • Units — Percent

  1. Click the Appearance tab. In the Brush pane, add the following brush elements with the specified properties:

    • Simple Gradient brush element

      • StartColor — Color = Color.FromArgb(230, 255, 181)

      • EndColor — Color = Color.FromArgb(180, 69, 209, 0)

      • Gradient Style — BackwardDiagonal

  1. In the Stroke pane of the Appearance tab, set the following properties:

    • Type — Solid

    • Color — Color.FromArgb(125, 255, 255, 255)

    • Thickness — 2

  1. In the Gauge Explorer, expand the newly created needle marker, and select Anchor.

  2. In the Radius pane of the Anchor Layout tab, set the following property:

    • Value — 20

  1. In the Properties panel, click the Appearance tab. In the Brush pane, add the following brush elements with the specified properties:

    • Multi-Stop Radial Gradient brush element

      • ColorStop 1 — Offset = 0, Color = Color.FromArgb(0, 141, 47)

      • ColorStop 2 — Offset = 1, Color = Color.FromArgb(104, 209, 0)

      • FocusScales — 0, 0

      • CenterPoint — 75, 25

    • Multi-Stop Radial Gradient brush element

      • ColorStop 1 — Offset = 0, Color = Transparent

      • ColorStop 2 — Offset = 0.02901786, Color = Color.FromArgb(80, 0, 0, 0)

      • ColorStop 3 — Offset = 0.1241379, Color = Transparent

      • ColorStop 4 — Offset = 1, Color = Transparent

      • FocusScales — 0, 3

      • CenterPoint — 100, 50

    • Multi-Stop Radial Gradient brush element

      • ColorStop 1 — Offset = 0, Color = Transparent

      • ColorStop 2 — Offset = 0.02901786, Color = Color.FromArgb(80, 0, 0, 0)

      • ColorStop 3 — Offset = 0.1241379, Color = Transparent

      • ColorStop 4 — Offset = 1, Color = Transparent

      • FocusScales — 0, 3

      • CenterPoint — 0, 50

    • Multi-Stop Radial Gradient brush element

      • ColorStop 1 — Offset = 0, Color = Transparent

      • ColorStop 2 — Offset = 0.02758621, Color = Color.FromArgb(200, 255, 255, 255)

      • ColorStop 3 — Offset = 0.3034483, Color = Color.FromArgb(0, 0, 0, 0)

      • ColorStop 4 — Offset = 0.3724138, Color = Transparent

      • ColorStop 5 — Offset = 1, Color = Transparent

      • FocusScales — 3, 0

      • CenterPoint — 50, 100

    • Multi-Stop Radial Gradient brush element

      • ColorStop 1 — Offset = 0, Color = Transparent

      • ColorStop 2 — Offset = 0.03103448, Color = Color.FromArgb(71, 255, 255, 255)

      • ColorStop 3 — Offset = 0.162069, Color = Transparent

      • ColorStop 4 — Offset = 0.3724138, Color = Transparent

      • ColorStop 5 — Offset = 1, Color = Transparent

      • FocusScales — 5, 0

      • CenterPoint — 50, 0

  1. In the Stroke pane of the Appearance tab, set the following properties:

    • Radial Gradient brush element

      • SurroundColor — Color.FromArgb(180, 255, 255, 255)

      • CenterColor — Color.FromArgb(150, 255, 255, 255)

      • FocusScale — 0,0

      • CenterPoint — 75, 25

    • Thickness — 3

  1. In the Gauge Explorer, expand Ranges.

  2. Click Add Range…​ and select New Range.

  3. In the Value pane of the Range Layout tab, set the following properties:

    • Start — 180.00

    • End — 360.00

  1. In the Extent pane of the Range Layout tab, set the following properties:

    • Inner Start — 72

    • Inner End — 72

    • Outer — 74

  1. In the Properties panel, click the Appearance tab. In the Brush pane, set the following properties:

    • Type — Solid

    • Color — Color.FromArgb(80, 255, 255, 255)

    • Thickness — 1

The gauge designer with a range specified.

Related Topic

Creating a Complex WebGauge Using the WebGauge Designer (Part 2 of 5)