Telerik UI for Windows Phone by Progress

SegmentedGaugeIndicator 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.

BarIndicatorSegment exposes three properties that developers can use:

  • Length - 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 - This is the thickness of the segment. The concept is the same as the thickness of a line, or a circle.
  • Stroke - This is the color of the segment. This property is of type Brush.

SegmentedGaugeIndicator is an abstract class since it does not provide an implementation of the segments' layout. Two classes implement this functionality in different ways and they are called SegmentedRadialGaugeIndicator and SegmentedLinearGaugeIndicator. They 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. Below is a XAML snippet (accompanied by screenshots) that demonstrates how to create a SegmentedRadialGaugeIndicator and a SegmentedLinearGaugeIndicator:

<gauges:SegmentedRadialGaugeIndicator Value="100">
    <gauges:BarIndicatorSegment Stroke="Green" />
    <gauges:BarIndicatorSegment Length="2" Stroke="Red" />

<gauges:SegmentedLinearGaugeIndicator Value="100">
    <gauges:BarIndicatorSegment Stroke="Green" />
    <gauges:BarIndicatorSegment Length="2" Stroke="Red" />

segmented Radial

segmented Linear