Telerik UI for Windows 8 XAML

SegmentedGaugeIndicator Class

SegmentedGaugeIndicator class is the base class of the segmented indicators. It does not have any visual representation initially and users are expected to populate the indicator with BarIndicatorSegment objects.

Note

SegmentedGaugeIndicator class inherits from the GaugeIndicator class - See the inherited properties.

Two classes implement the functionality of SegmentedGaugeIndicator class in different ways and they are:

  • SegmentedLinearGaugeIndicator

  • SegmentedRadialGaugeIndicator

Note

SegmentedLinearGaugeIndicator and SegmentedRadialIndicator do not introduce any new properties and simply implement the abstract logic of their base class by arranging their segments in circular and linear manners respectively.

BarIndicatorSegment Properties

Properties of BarIndicatorSegment:

  • Length (double)

    - This is a proportional length of the segment. The actual length of each segment will be determined by Length divided by the sum of all the segments' lengths.

  • Thickness (double)

    - This is the thickness of the segment. The concept is the same as the thickness of a line, or a circle.

  • Stroke (Brush)

    - This is the color of the segment. This property is of type Brush.

SegmentedLinearGaugeIndicator Example

The following code sample demonstrates how to implement a RadLinearGauge with a SegmentedLinearGaugeIndicator and three colored BarIndicatorSegments.

XAML Copy imageCopy
<telerik:RadLinearGauge LabelStep="60" TickStep="20" MaxValue="120"  Width="200">
    <telerik:SegmentedLinearGaugeIndicator Value="120">
        <telerik:BarIndicatorSegment Stroke="Green" Length="3"/>
        <telerik:BarIndicatorSegment Stroke="Yellow" Length="2" />
        <telerik:BarIndicatorSegment Stroke="Red" Length="1" />
    </telerik:SegmentedLinearGaugeIndicator>
</telerik:RadLinearGauge>

Result:

Rad Gauge-Segmented Linear Gauge Indicator

SegmentedRadialGaugeIndicator Example

The following code sample demonstrates how to implement a RadRadialGauge with a SegmentedLinearGaugeIndicator and three colored BarIndicatorSegments.

XAML Copy imageCopy
<telerik:RadRadialGauge LabelStep="60" TickStep="20" MaxValue="120" LabelRadiusScale="1.10" Width="200">
    <telerik:SegmentedRadialGaugeIndicator Value="120">
        <telerik:BarIndicatorSegment Stroke="Green" Length="3"/>
        <telerik:BarIndicatorSegment Stroke="Yellow" Length="2" />
        <telerik:BarIndicatorSegment Stroke="Red" Length="1" />
    </telerik:SegmentedRadialGaugeIndicator>
</telerik:RadRadialGauge>

Result:

Rad Gauge-Segmented Radial Gauge Indicator