Version

Add Tick Marks to a Scale on a Gauge

The Tickmark property on the WebGauge control is used to visually display the values on a scale of your Radial or Linear gauge.

Note
Note:

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

The next step after adding tick marks to a scale on your gauge is to Add Labels to a Gauge.

You can add tick marks to your scale:

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

Radial gauge with tickmarks set on it.

To add tick marks to your scales using the Gauge Designer:

  1. In the Gauge Explorer, expand Scale.

  2. Select Major Tickmarks.

  3. In the Extent pane of the Tickmark Layout tab of the Properties panel, set the following properties:

    • Start — 85

    • End — 95

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

    • Start — 3

    • End — 3

  1. In the Orientation pane of the Tickmark Layout tab, set the Frequency to 10.00\.

  2. In the Gauge Explorer, select Minor Tickmarks

  3. In the Extent pane of the Properties panel, set the following properties:

    • Start — 85

    • End — 90

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

    • Start — 1

    • End — 1

  1. In the Orientations pane of the Tickmark Layout tab, set the Frequency to 2.00.

To add tick marks to your scales at design time:

  1. In the Gauges Collection editor window, click the Scales property. Then, click the ellipsis (…) button to open the Scales editor.

  2. Expand the MajorTickmarks property. Then click the BrushElement property, and from the drop-down list, select Solid Fill.

  3. Expand the BrushElement property and set the Color property to 189, 189, 189.

  4. Under the MajorTickmarks property, set the following properties:

    • StartExtent — 75

    • StartWidth — 3

    • Frequency — 10

    • EndExtent — 85

    • EndWidth — 3

  1. Expand the MinorTickmarks property. Then click the BrushElement property, and from the drop down list, select SolidFill.

  1. Expand the BrushElement property. Then set the Color property to 240, 240, 240\.

  2. Under the MinorTickmarks property, set the following properties:

    • StartExtent — 85

    • StartWidth — 1

    • Frequency — 2

    • EndExtent — 90

    • EndWidth — 1

To add tick marks to your scales at run time:

  1. Add the following steps to the load event.

  2. Create instances of the classes:

In Visual Basic:

Dim mySolidFillBrushElementMajor As New SolidFillBrushElement()
Dim mySolidFillBrushElementMinor As New SolidFillBrushElement()
Dim mySolidFillBrushElementMinorStroke As New SolidFillBrushElement()
Dim myStrokeElement As New StrokeElement()

In C#:

SolidFillBrushElement mySolidFillBrushElementMajor = new SolidFillBrushElement();
SolidFillBrushElement mySolidFillBrushElementMinor = new SolidFillBrushElement();
SolidFillBrushElement mySolidFillBrushElementMinorStroke =
  new SolidFillBrushElement();
StrokeElement myStrokeElement = new StrokeElement();
  1. Set the following MajorTickmarks properties:

    • Color — 189, 189, 189

    • StartExtent — 85

    • StartWidth — 3

    • Frequency — 10

    • EndExtent — 95

    • EndWidth — 3

In Visual Basic:

mySolidFillBrushElementMajor.Color = System.Drawing.Color.FromArgb( _
  CInt(CByte(189)), _
  CInt(CByte(189)), _
  CInt(CByte(189)))
myScale.MajorTickmarks.BrushElement = mySolidFillBrushElementMajor
myScale.MajorTickmarks.EndExtent = 95
myScale.MajorTickmarks.EndWidth = 3
myScale.MajorTickmarks.Frequency = 10
myScale.MajorTickmarks.StartExtent = 85
myScale.MajorTickmarks.StartWidth = 3

In C#:

mySolidFillBrushElementMajor.Color = System.Drawing.Color.FromArgb(
  ((int)(((byte)(189)))),
  ((int)(((byte)(189)))),
  ((int)(((byte)(189)))));
myScale.MajorTickmarks.BrushElement = mySolidFillBrushElementMajor;
myScale.MajorTickmarks.EndExtent = 95;
myScale.MajorTickmarks.EndWidth = 3;
myScale.MajorTickmarks.Frequency = 10;
myScale.MajorTickmarks.StartExtent = 85;
myScale.MajorTickmarks.StartWidth = 3;
  1. Set the following MinorTickmarks properties:

    • Color — 240, 240, 240

    • StartExtent — 85

    • StartWidth — 1

    • Frequency — 2

    • EndExtent — 90

    • EndWidth — 1

In Visual Basic:

mySolidFillBrushElementMinor.Color = System.Drawing.Color.FromArgb( _
  CInt(CByte(240)), _
  CInt(CByte(240)), _
  CInt(CByte(240)))
myScale.MinorTickmarks.BrushElement = mySolidFillBrushElementMinor
myScale.MinorTickmarks.EndExtent = 90
myScale.MinorTickmarks.EndWidth = 1
myScale.MinorTickmarks.Frequency = 2
myScale.MinorTickmarks.StartExtent = 85
mySolidFillBrushElementMinorStroke.Color = System.Drawing.Color.FromArgb( _
  CInt(CByte(135)), _
  CInt(CByte(135)), _
  CInt(CByte(135)))
myStrokeElement.BrushElement = mySolidFillBrushElementMinorStroke
myScale.MinorTickmarks.StrokeElement = myStrokeElement

In C#:

mySolidFillBrushElementMinor.Color = System.Drawing.Color.FromArgb(
  ((int)(((byte)(240)))),
  ((int)(((byte)(240)))),
  ((int)(((byte)(240)))));
myScale.MinorTickmarks.BrushElement = mySolidFillBrushElementMinor;
myScale.MinorTickmarks.EndExtent = 90;
myScale.MinorTickmarks.EndWidth = 1;
myScale.MinorTickmarks.Frequency = 2;
myScale.MinorTickmarks.StartExtent = 85;
mySolidFillBrushElementMinorStroke.Color = System.Drawing.Color.FromArgb(
  ((int)(((byte)(135)))),
  ((int)(((byte)(135)))),
  ((int)(((byte)(135)))));
myStrokeElement.BrushElement = mySolidFillBrushElementMinorStroke;
myScale.MinorTickmarks.StrokeElement = myStrokeElement;