ComponentOne Gauges for WinForms
Gauges for WinForms Task-Based Help / Adding Ranges
In This Topic
    Adding Ranges
    In This Topic

    Ranges are bands of color that denote certain thresholds along the gauge scale. You can add ranges to C1Gauge through the Decorators collection, along with tick marks and labels.

    1. Click the ellipsis button next to the Gauges property in the Properties window. The C1Gauge.Gauges Collection Editor dialog box opens.
    2. Click the ellipsis button next to Decorators. The Decorators Collection Editor opens.
    3. Click the drop-down arrow next to Add and select C1GaugeRange. Just like with our Marks and Labels, we can position the range by setting the Alignment and/or Location properties.
    4. Set the Location property to 85 so that it aligns with our tick marks.
      Location to Align

      Set the From and To properties to specify the limits of this range. Since we want this range to go from our minimum to our maximum we will leave these as default (NaN). To mark various color-based thresholds you could add multiple ranges, each with a different Filling color. However, C1Gauge provides a convenient way to map colors to values using the ValueColors collection.

    5. You may have noticed that all Decorator items (including tick marks) have a ValueColors collection. Select the range we just added and click the ellipsis button next to ValueColors to open the Decorator Value Colors window.
    6. Click Add three times to add three colors: gray, yellow and red. For each color we specify the color property, and the corresponding value. The value set is the minimum value for the range (i.e., gray: 0, yellow: 40, red: 100). For each color we also select the pointer which gives the value.
      1. Select the first member 0, click the drop-down arrow next to Color, and select Gray. Set the PointerIndex and Value properties to 0.
      2. Select the next member 1, click the drop-down arrow next to Color, and select Yellow. Set the PointerIndex and Value properties to 40.
      3. Select the last member 2, click the drop-down arrow next to Color, and select Red. Set the PointerIndex and Value properties to 100.
        change color
    7. Click OK to close the Decorator Value Colors window.
      close Decorator

      You will notice the colors blend together across the range. We could, however, remove the blending effect of the colors by setting the ValueColorFalloff property to None in the Decorators Collection Editor.

      To move the range below the tick marks, use the up/down arrows to move it to the 0th member. In this example, we also removed the border of the range for a better look. Click OK to close the Decorators Collection Editor.


      Decorators Collection Editor
    See Also