lineargauge-configuring-the-ranges.adoc

Configuring the Ranges ({LinearGaugeName})

Topic Overview

Purpose

This topic explains, with code examples, how to configure ranges in the {LinearGaugeName}™ control. This includes the number of ranges and their positions, lengths, widths, and formatting.

Required background

The following topics are prerequisites to understanding this topic:

Topic	Purpose
{LinearGaugeName} Overview	This topic provides conceptual information about the {LinearGaugeName} control including its main features, minimum requirements, and user functionality.
Adding {LinearGaugeName}	This topic explains how to add the {LinearGaugeName} control to a {PlatformName} application.

In this topic

This topic contains the following sections:

• Configuring Comparative Ranges

  • Comparative ranges configuration summary

  • Comparative ranges configuration summary chart

  • Property settings

  • Example

• Related Content

  • Topics

Configuring Comparative Ranges

Comparative ranges configuration summary

The {LinearGaugeName} control supports multiple comparative ranges through populating its Ranges collection.

Each range can be configured individually by specifying its starting and ending value (in the measures of the scale), fill color, and border thickness and color. The size of a comparative range in the across-the-scale is configurable by adjusting its inner and outer margins.

Comparative ranges configuration summary chart

The following table explains briefly the configurable aspects of {LinearGaugeName} control’s comparative ranges and maps them to properties that configure them.

Configurable aspects	Property	Default value
Number (of ranges in the graph)	pick:[xaml=" {LinearGaugeName}.Ranges"] pick:[android=" {LinearGaugeName}.addRange"]	Not set
Length, width, and position	{LinearGaugeRange}.StartValue	Not set
	{LinearGaugeRange}.EndValue	Not set
	{LinearGaugeRange}.InnerStartExtent	Not set
	{LinearGaugeRange}.InnerEndExtent	Not set
	{LinearGaugeRange}.OuterStartExtent	Not set
	{LinearGaugeRange}.OuterEndExtent	Not set
Fill color	{LinearGaugeRange}.Brush	Defined in the default theme
Border color	{LinearGaugeRange}.Outline	Defined in the default theme
Border thickness	{LinearGaugeRange}.StrokeThickness	1.0

Note

Note: If you do not explicitly provide values for the Brush and Outline properties for each range, the values are retrieved from the values of {LinearGaugeName} ’s RangeBrushes and RangeOutlines collections. They can also be used to predefine a set of brushes to be used consecutively for setting each range’s color or outline fill.

Property settings

The following table maps the desired behavior to its respective property settings.

In order to configure:	Details	Use this property:	And set it to:
Range start	Position on the scale at which the range begins	{LinearGaugeRange}.StartValue	The desired value (in the measures of the scale)
Range end	Position on the scale at which the range ends	{LinearGaugeRange}.EndValue	The desired value (in the measures of the scale)
Inner vertex of the starting edge of the range	The position of the inner vertex of the starting edge across the scale relative to the edge of the Reserved area. (Inner vertex is the point of the starting edge that is the closest to the edge of the Reserved area.)	{LinearGaugeRange}.InnerStartExtent	The desired value as a relative part of the height/width of the Graph area depending on the orientation (horizontal / vertical) presented as a fraction of 1 (e.g. _0.2 )
Inner vertex of the ending edge of the range	The position of the inner vertex of the ending edge across the scale relative to the edge of the Reserved area	{LinearGaugeRange}.InnerEndExtent	The desired value as a relative part of the height/width of the Graph area depending on the orientation (horizontal / vertical) presented as a fraction of 1 (e.g. 0.3 )
Outer vertex of the starting edge of the range	The position of the outer vertex of the starting edge across the scale relative to the edge of the Reserved area. (Outer vertex is the point of the starting edge that is the closest to the edge of the Reserved area)	{LinearGaugeRange}.OuterStartExtent	The desired value as a relative part of the height/width of the Graph area depending on the orientation (horizontal / vertical) presented as a fraction of 1 (e.g. 0.7 )
Outer vertex of the ending edge of the range	The position of the outer vertex of the ending edge across the scale relative to the edge of the Reserved area	{LinearGaugeRange}.OuterEndExtent	The desired value as a relative part of the height/width of the Graph area depending on the orientation (horizontal / vertical) presented as a fraction of 1 (e.g. 0.8 )
Fill color	Fill color of the range	{LinearGaugeRange}.Brush	The desired color
Border thickness	Thickness of the range’s border	{LinearGaugeRange}.StrokeThickness	The desired value in pixels
Border color	Color of the range’s border	{LinearGaugeRange}.Outline	The desired color

Example

The screenshot below demonstrates how a comparative range added to the {LinearGaugeName} looks as a result of the following settings:

Property	Value
Brush	“Green”
StartValue	“6”
EndValue	“89”
InnerStartExtent	“0.5”
InnerEndExtent	“0.5”
OuterStartExtent	“0.8”
OuterEndExtent	“0.8”
Outline	“Black”

Following is the code that implements this example.

Related Content

Topics

The following topics provide additional information related to this topic.

Topic	Purpose
Configuring the Scale ( {LinearGaugeName} )	This topic explains, with examples, how to configure the scale of the {LinearGaugeName} control. This includes positioning the scale inside the control and configuring the scale tick marks and labels.
Configuring the Needle ({LinearGaugeName})	This topic explains, with code examples, how to configure the needle of the {LinearGaugeName} control. This includes the needle’s value, width, and formatting.
Configuring the Background ( {LinearGaugeName} )	This topic explains, with code examples, how to configure a background for the linear gauge. This includes setting the background’s size, position, color, and border.