20 Tips and Tricks for Building Gauges

In a previous, I discussed creating radial gauges with C1Gauge- the ultimate gauge-inator. I've worked with this control a lot, so for this post I thought I would share my knowledge and put together 20 tips and tricks that cover more topics of gauge implementation. They're in no specific order...

Tip #1: When creating linear gauges from scratch, you should first set the AxisStart and AxisLength properties before adding decorators and shapes to the gauge. These properties act as the anchors for measuring the placement of FaceShapes and CoverShapes, so if you don't set them up how you want them in the beginning, you'll cause more work for yourself later.

Tip #2: To create a vertical linear gauge (C1LinearGauge), set the Orientation property to Vertical.

Tip #3: Don't forget to optimize the ViewPort! Unless your gauge is a perfect circle or square you need to modify the ViewPort dimensions for the best resizing behavior. Otherwise your gauge may get cut off or be surrounded by too much empty space on your form. Use the guide below to get the recommended ViewPort size based on the general shape of your gauge.

Shape

ViewPort

Shape

ViewPort

AspectPinX: NaN (default)
AspectPinY: NaN (default)
AspectRatio: NaN (default)

AspectPinX: 0.5
AspectPinY: 0.5
AspectRatio: 1.5

AspectPinX: NaN
AspectPinY: NaN
AspectRatio: 3

AspectPinX: 0.5
AspectPinY: 0.5
AspectRatio: 1

AspectPinX: NaN
AspectPinY: NaN
AspectRatio: 0.5

AspectPinX: NaN
AspectPinY: 0.5
AspectRatio: 2

Tip #4: Use ColorMaps for shared ranges and state indicators. This saves you time and improves accuracy when you need to make changes later. Typically, when creating ranges you modify the ValueColors collection to specify your spectrum of colors mapped to values. Unless you are 100% sure that you only need to use that collection of color mappings for that one range you should create a ColorMap instead.

C1RadialGauge and C1LinearGauge have a ColorMaps collection, essentially a collection of ValueColors which can be shared throughout the entire gauge. Simply add your colors and mapped values to this collection, give it a name, and then assign it to your range by setting the range's ColorMapName property. It's that simple, and now you have a more efficient gauge.

Tip #5: To get definitive color breaks in your ranges (rather than a gradient blend), set the ValueColorFalloff property to None.

Tip #6: When creating radial gauges from scratch, first set the StartAngle and SweepAngle properties to define the scale's arc. You should also determine your desired location for the pointer origin early in the design process (PointerOriginX and PointerOriginY). These properties act as anchors for shapes and decorators that you will later add to the gauge.

Tip #7: You can quickly create copies of gauge elements at design-time by clicking the duplicate button from any of the editors. This saves you time in creating many similar styled items like tick marks.

Trick #8: To create a thermometer shaped gauge, add a sector (C1GaugeSector) to the FaceShapes. Set the SweepAngle to 0, and then play with these layout properties to get the exact size necessary: CenterPointY, CenterRadius, InnerRadius, and OuterRadius. Use an ellipse and a bound range to act as the mercury.

Trick #9: Create a glassing effect by adding a semi-transparent segment (C1GaugeSegment) to the FaceShapes collection. Set the InnerRadius property to get an inner arc.

Trick #10: Use the clippings feature to help get the exact shape you need. For instance, create a glassing effect for a rectangular gauge by clipping a segment to fit in the rectangle. Simply give a name to the rectangle, or the shape that you want the clipping to be based off of (by setting the Name property), and then specify this name in the Clippings collection of the segment shape, or the shape that you want clipped. There are several different clipping operations, including replace, intersect, union. Choose the best operation. You can even clip based upon invisible shapes.

Before clipping:

After clipping:

Trick #11: Use ranges to add decorative lines to your gauges. Gauge ranges are designed to highlight certain sections of the gauge scale, but they can also be used for pure aesthetics. Connect tick marks using a range as the line, or give the illusion that the pointers are running in a track.

Trick #12: Add multiple pointers to act as bound markers. C1Gauge allows you to data bind each pointer to some field in your data source. In some scenarios you may want only 1 pointer and some bound markers. Simply add pointers for each bound value you need and hide the extra pointers by setting visible = false. Then, add some markers (C1GaugeSingleMark) to the decorators' collection. Set each marker's PointerIndex property to the specific pointer.

Tip #13: Use consistent Alignment settings (In/Out/Center). You can easily position decorators by setting the location property. The location property is based on logical coordinates from the center point of the gauge (or axis start for linear gauges); however the visual location of decorators is also based upon the Alignment property. Use consistent alignment settings for dectorators you wish to be well-aligned, such as tick marks.

Tip #14: Create a sloping range by setting both the Width and Width2 properties.

Tip #15: Make sure that your major tick marks appear above the minor tick marks in the Decorators Collection Editor. C1Gauge draws the decorators in order from top to bottom of the Members list. For optimal performance, C1Gauge will not draw overlapping tick marks in the same position, so you want the major tick marks (those with the higher interval) to be drawn first, and the minor ticks to fill in between (hence, a minor tick mark will not be drawn over top of a major tick mark).

Tip #16: As mentioned in tip #15, you can't have two of the same types of decorators overlapping on the same interval. If this happens then the only the first in the sequence will be drawn. In some scenarios you may need multiple sets of tick marks that have the same interval but at different locations. To achieve this, set the SequenceNo property on the 2nd set of tick marks to a value other than 0 so that they are in a different sequence than the previous set. Using SequenceNo you can force C1Gauge to draw multiple marks on the same interval.

Tip #17: Ever find yourself having to specify a custom font over and over again for each set of labels and captions? Define a common font in the C1Gauge CommonFonts collection. Give it a unique name and then simply set any item's CommonFontName property to this value. There are several other Common collections that can be shared throughout the gauge too.

Tip #18: Take advantage of the OrthagonalOffset property if you'd rather the labels be drawn next to each mark rather than on top or directly beyond each mark. This property adjusts the labels (or any item) orthogonally from the center of the gauge (or axis start for linear gauges).

Tip #19: Set the Pointer's SweepTime property to add a sweeping animation effect for when the value updates at runtime. A value of 2 or 3 is good. It's that easy!

Tip #20: There are two different types of text you can add to your gauges: Captions and Labels. Use captions for static text that never changes, such as units of measure. Use labels to display dynamic text, such as the current gauge value. To bind a label to the pointer value, simply add a label (C1GaugeSingleLabel) to the Decorators collection. Then set its PointerIndex property.