Version

Add a Needle Marker to a Gauge

A needle marker is displayed as a pointer that points to a specific value on a scale.

Note
Note

This topic assumes that you already created a Radial gauge with a scale, labels and tick marks. For information on how to do this, see Add Labels to a Gauge.

The next step after adding a needle marker to your gauge is to Add a Range to a Gauge.

You can add a needle marker to your gauge:

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

Shows what the radial wingauge will look like after following the steps below.

To add a needle marker to an existing Radial gauge using the Gauge Designer:

  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 — 3

      • Mid — 3

      • End — 1

    • Extents

      • Start — -20

      • Mid — 0

      • End — 65

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

    • Value — 95.00

    • Precision — 1.00

    • Units — Percent

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

    • Type — Solid

    • Color — 255, 61, 22

  1. In the Gauge Explorer, select Anchor.

  2. In the Brush pane of the Appearance tab of the Properties panel set the following properties:

    • Type — SimpleGradient

    • Start Color — Gainsboro

    • End Color — 64, 64, 64

    • Gradient Style — BackwardDiagonal

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

    • Type — RadialGradient

    • SurroundColor — Gray

    • CenterColor — WhiteSmoke

    • FocusScale — 0,0

    • CenterPoint — 75, 25

To add a needle marker to an existing Radial gauge at design time:

  1. Within the Gauges collection editor, click the Radial Gauge.

  2. Locate the Scales property and click the Ellipsis (…) to launch the Scales collection editor.

  3. Locate the Markers property and click the Ellipsis (…) to launch the Markers collection editor.

  4. Click the Add button and select Add Needle.

  5. Locate the BrushElement property. From the BrushElement drop-down list, select Solid Fill. This will create a new Solid Fill brush element.

  6. Expand the newly created BrushElement property and locate the Color property. Set the color to Red.

  7. Locate and expand the Anchor property and click on its BrushElement property.

  8. From the BrushElement drop-down list, select SimpleGradient and set the following properties:

    • Type — SimpleGradient

    • StartColor — Gainsboro

    • EndColor — 64, 64, 64

    • GradientStyle — BackwardDiagonal

  1. Set the Value property to 95

To add a needle maker to an existing Radial gauge at run time:

  1. Add the following steps to the load event.

  2. Create instances of the classes:

In Visual Basic:

Dim myNeedle As New RadialGaugeNeedle()
Dim mySolidFillBrushElement2 As New SolidFillBrushElement()
Dim mySimpleGradientBrushElement As New SimpleGradientBrushElement()

In C#:

RadialGaugeNeedle myNeedle = new RadialGaugeNeedle();
SolidFillBrushElement mySolidFillBrushElement2 = new SolidFillBrushElement();
SimpleGradientBrushElement mySimpleGradientBrushElement = _
  new SimpleGradientBrushElement();
  1. Set the following color properties for the needle:

    • Type — Solid

    • Color — Red

In Visual Basic:

mySolidFillBrushElement2.Color = System.Drawing.Color.Red
myNeedle.BrushElement = mySolidFillBrushElement2

In C#:

mySolidFillBrushElement2.Color = System.Drawing.Color.Red;
myNeedle.BrushElement = mySolidFillBrushElement2;
  1. Set the following property for the anchor:

    • Radius — 10

    • Measure — Percent

In Visual Basic:

myNeedle.Anchor.RadiusMeasure = _
  Infragistics.UltraGauge.Resources.Measure.Percent
myNeedle.Anchor.Radius = 10

In C#:

myNeedle.Anchor.RadiusMeasure =
  Infragistics.UltraGauge.Resources.Measure.Percent;
myNeedle.Anchor.Radius = 10;
  1. Set the following color properties for the anchor:

    • Type — SimpleGradient

    • EndColor — WhiteSmoke

    • StartColor — Gray

    • GradientStyle — BackwardDiagonal

In Visual Basic:

myNeedle.Anchor.BrushElement = mySimpleGradientBrushElement
mySimpleGradientBrushElement.EndColor = System.Drawing.Color.WhiteSmoke
mySimpleGradientBrushElement.GradientStyle = _
  Infragistics.UltraGauge.Resources.Gradient.BackwardDiagonal
mySimpleGradientBrushElement.StartColor = System.Drawing.Color.Gray

In C#:

myNeedle.Anchor.BrushElement = mySimpleGradientBrushElement;
mySimpleGradientBrushElement.EndColor = System.Drawing.Color.WhiteSmoke;
mySimpleGradientBrushElement.GradientStyle =
  Infragistics.UltraGauge.Resources.Gradient.BackwardDiagonal;
mySimpleGradientBrushElement.StartColor = System.Drawing.Color.Gray;
  1. Set the following properties:

    • AllowDrag — true

    • EndExtent — 65

    • EndWidth — 1

    • MidExtent — 0

    • MidWidth — 3

    • Precision — 1

    • StartExtent — -20

    • StartWidth — 3

    • Value — 95

    • WidthMeasure — Percent

In Visual Basic:

myNeedle.AllowDrag = True
myNeedle.EndExtent = 65
myNeedle.EndWidth = 1
myNeedle.MidExtent = 0
myNeedle.MidWidth = 3
myNeedle.Precision = 1
myNeedle.StartExtent = -20
myNeedle.StartWidth = 3
myNeedle.Value = 95
myNeedle.WidthMeasure = Measure.Percent

In C#:

myNeedle.AllowDrag = true;
myNeedle.EndExtent = 65;
myNeedle.EndWidth = 1;
myNeedle.MidExtent = 0;
myNeedle.MidWidth = 3;
myNeedle.Precision = 1;
myNeedle.StartExtent = -20;
myNeedle.StartWidth = 3;
myNeedle.Value = 95;
myNeedle.WidthMeasure = Measure.Percent;
  1. Add the needle marker to the Markers collection:

In Visual Basic:

myScale.Markers.Add(myNeedle)

In C#:

myScale.Markers.Add(myNeedle)