Version

Create a Box Annotation on a Gauge

Annotations are useful for adding extra information to your gauge. There are many reasons why you would add an annotation to your gauge, for example:

  • to highlight a specific area on your gauge.

  • to add information that would help the end-user easily understand the scale on your gauge, such as 'Mph' on a Radial gauge that represents a speedometer.

  • to add a name to your gauge, such as "Infragistics' Fuel Gauge".

This topic assumes that you have a gauge already created. For information on how to create a gauge, see Getting Started with WebGauge.

You can apply a box annotation on your gauge:

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

The finished radial gauge with a box annotation shown on it.

To create a box annotation to an existing Radial gauge using the Gauge Designer:

  1. In the Gauge Explorer, expand Annotations.

  2. Click Add Annotation…​ and select New Box Annotation.

  3. In the Properties panel, click Annotations tab. In the Bounds pane, set the following properties:

    • X — 38

    • Y — 70

    • Width — 25

    • Height — 10

    • Units — Percent

  1. In the Labels pane of the Annotations tab, set the following property:

    • Format String — Speed

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

    • Type — Solid

    • Color — Gray

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

    • Size — 14

    • Type — Point

To create a box annotation on your gauge at design time:

  1. In the Properties window, click the Annotation property. Then, click the ellipsis (…) button to open the Annotations collection editor.

  2. In the Annotations collection editor, click Add, and select Add Box Annotation.

Annotations collection editor for the gauge.

  1. Create a new BrushElement object by clicking the BrushElement property in the right-hand pane. Then, from the drop-down list, select Solid Fill.

  2. Expand the BrushElement property, and set the Color property to Gray.

  3. Expand the Bounds property to adjust the size of the annotation and to position the annotation on your gauge. Set the X property to 38, the Y property to 70, the Width property to 25, the Height property to 10 and the Units to Percent.

  4. So far if you run the project, the annotation should look similar to the one in the form below.

Radial gauge with box annotation on it.

  1. To add text to the annotation, expand the Label property.

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

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

  4. Set the FormatString property to "Speed".

  5. Expand the Font property.

  6. Set Size to 14 and Name to Arial.

To add labels to your scales 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 instances of the classes:

In Visual Basic:

Dim boxAnnotation1 As New BoxAnnotation()
Dim solidFillBrushElement1 As New SolidFillBrushElement()
Dim solidFillBrushElement2 As New SolidFillBrushElement()

In C#:

BoxAnnotation boxAnnotation1 = new BoxAnnotation();
SolidFillBrushElement solidFillBrushElement1 = new SolidFillBrushElement();
SolidFillBrushElement solidFillBrushElement2 = new SolidFillBrushElement();

  1. Set the following the Bound properties:

    • X — 38

    • Y — 70

    • Width — 25

    • Height — 10

    • Units — Percent

In Visual Basic:

boxAnnotation1.Bounds = New System.Drawing.Rectangle(38, 70, 25, 10)
boxAnnotation1.BoundsMeasure = Infragistics.UltraGauge.Resources.Measure.Percent

In C#:

boxAnnotation1.Bounds = new System.Drawing.Rectangle(38, 70, 25, 10);
boxAnnotation1.BoundsMeasure = Infragistics.UltraGauge.Resources.Measure.Percent;

  1. Set the following the Annotation color properties:

    • Type — Solid

    • Color — Gray

In Visual Basic:

solidFillBrushElement1.Color = System.Drawing.Color.Gray
boxAnnotation1.BrushElement = solidFillBrushElement1

In C#:

solidFillBrushElement1.Color = System.Drawing.Color.Gray;
boxAnnotation1.BrushElement = solidFillBrushElement1;

  1. Set the following the Font color properties:

    • Type — Solid

    • Color — White

In Visual Basic:

solidFillBrushElement2.Color = System.Drawing.Color.White
boxAnnotation1.Label.BrushElement = solidFillBrushElement2

In C#:

solidFillBrushElement2.Color = System.Drawing.Color.White;
boxAnnotation1.Label.BrushElement = solidFillBrushElement2;

  1. Set the following the Font properties:

    • Font — Arial

    • Size — 14

    • Type — Point

In Visual Basic:

boxAnnotation1.Label.Font = New System.Drawing.Font("Arial", 14.0F)

In C#:

boxAnnotation1.Label.Font = new System.Drawing.Font("Arial", 14F);

  1. Set the following the Format string to Speed:

In Visual Basic:

boxAnnotation1.Label.FormatString = "Speed"

In C#:

boxAnnotation1.Label.FormatString = "Speed";

  1. Add the annotation to your gauge.

In Visual Basic:

me.UltraGauge1.Annotations.Add(boxAnnotation1)

In C#:

this.ultraGauge1.Annotations.Add(boxAnnotation1);