Class GaugeRange

Create the range to add color bar in the gauge. GaugeRange is a visual element that helps to quickly visualize where a value falls on the axis.

Inheritance
System.Object
GaugeRange
Namespace: Syncfusion.UI.Xaml.Gauges
Assembly: Syncfusion.Gauge.WinUI.dll
Syntax
public class GaugeRange : Control
Examples
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Ranges>
                <gauge:GaugeRange StartValue="0" EndValue="35" Background="Red" />
                <gauge:GaugeRange StartValue="35" EndValue="75" Background="Yellow"/>
                <gauge:GaugeRange StartValue="75" EndValue="100" Background="Green"/>
            </gauge:RadialAxis.Ranges>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

Constructors

GaugeRange()

Initializes a new instance of the GaugeRange class.

Declaration
public GaugeRange()
Examples
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Ranges>
                <gauge:GaugeRange StartValue="50" EndValue="100" />
            </gauge:RadialAxis.Ranges>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

Fields

EndValueProperty

The dependency registration for EndValue property.

Declaration
public static readonly DependencyProperty EndValueProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

EndWidthProperty

The dependency registration for EndWidth property.

Declaration
public static readonly DependencyProperty EndWidthProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

GradientStopsProperty

Dependency registration for GradientStops

Declaration
public static readonly DependencyProperty GradientStopsProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

LabelProperty

Dependency registration for Label

Declaration
public static readonly DependencyProperty LabelProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

LabelTemplateProperty

Dependency registration for LabelTemplate

Declaration
public static readonly DependencyProperty LabelTemplateProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

OffsetUnitProperty

The dependency registration for OffsetUnit property.

Declaration
public static readonly DependencyProperty OffsetUnitProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

RangeOffsetProperty

The dependency registration for RangeOffset property.

Declaration
public static readonly DependencyProperty RangeOffsetProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

StartValueProperty

The dependency registration for StartValue property.

Declaration
public static readonly DependencyProperty StartValueProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

StartWidthProperty

The dependency registration for StartWidth property.

Declaration
public static readonly DependencyProperty StartWidthProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

WidthUnitProperty

The dependency registration for WidthUnit property.

Declaration
public static readonly DependencyProperty WidthUnitProperty
Field Value
Type Description
Microsoft.UI.Xaml.DependencyProperty

Properties

EndValue

Gets or sets the value that specifies the range end value.

Declaration
public double EndValue { get; set; }
Property Value
Type Description
System.Double
Examples
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Ranges>
                <gauge:GaugeRange EndValue="100" />
            </gauge:RadialAxis.Ranges>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

EndWidth

Gets or sets the value that specifies the range end width. You can specify value either in logical pixel or radius factor using the WidthUnit property.

Declaration
public double EndWidth { get; set; }
Property Value
Type Description
System.Double
Examples

If WidthUnit is Factor, value must be given from 0 to 1. Here range start width is calculated by EndWidth * axis radius value. Example: EndWidth value is 0.2 and axis radius is 100, range start width is 20(0.2 * 100) logical pixels. if WidthUnit is Pixel, the defined value is set for the end width of the range.

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Ranges>
                <gauge:GaugeRange StartValue="50"
                                  EndValue="100"
                                  RangeOffset="10"
                                  OffsetUnit="Factor"
                                  StartWidth="10"/>
            </gauge:RadialAxis.Ranges>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

GradientStops

Gets or sets a collection of GaugeGradientStop to fill the gradient brush to the gauge range.

Declaration
public ObservableCollection<GaugeGradientStop> GradientStops { get; set; }
Property Value
Type Description
System.Collections.ObjectModel.ObservableCollection<GaugeGradientStop>
Examples

The below examples shows, how to add a collection of gradient stop to the gauge range.

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Ranges>
                <gauge:GaugeRange StartValue="0"
                                  EndValue="100">
                    <gauge:GaugeRange.GradientStops>
                                <gauge:GaugeGradientStop Value="0"
                                                         Color="Green" />
                                <gauge:GaugeGradientStop Value= "50"
                                                         Color="Yellow" />
                                <gauge:GaugeGradientStop Value="100"
                                                         Color="Red" />
                            </gauge:GaugeRange.GradientStops>
                </gauge:GaugeRange>
            </gauge:RadialAxis.Ranges>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

Label

Gets or sets the value that specifies the text for range.

Declaration
public string Label { get; set; }
Property Value
Type Description
System.String
Examples
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis ShowTicks="False"
                          ShowLabels="False">
            <gauge:RadialAxis.Ranges>
                <gauge:GaugeRange StartValue="0"
                                  EndValue="30"
                                  StartWidth="0.5"
                                  EndWidth="0.5"
                                  WidthUnit="Factor"
                                  Background="Red"
                                  Label="Slow" />
                <gauge:GaugeRange StartValue="30"
                                  EndValue="70"
                                  StartWidth="0.5"
                                  EndWidth="0.5"
                                  WidthUnit="Factor"
                                  Background="Yellow"
                                  Label="Moderate" />
                <gauge:GaugeRange StartValue="70"
                                  EndValue="100"
                                  StartWidth="0.5"
                                  EndWidth="0.5"
                                  WidthUnit="Factor"
                                  Background="Green"
                                  Label="Fast" />
            </gauge:RadialAxis.Ranges>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

LabelTemplate

Gets or sets the data template to customizes the label for range.

Declaration
public DataTemplate LabelTemplate { get; set; }
Property Value
Type Description
Microsoft.UI.Xaml.DataTemplate
Remarks

Its DataContext is GaugeRange.

Examples
<Page.Resources>
    <DataTemplate x:Key="RangeLabelTemplate">
        <Grid Background="LightBlue"
              BorderThickness="1"
              BorderBrush="Red">
            <TextBlock Text="{Binding Label}"
                       Foreground="Red"
                       FontSize="30" />
        </Grid>
    </DataTemplate>
</Page.Resources>

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis ShowTicks="False"
                          ShowLabels="False">
            <gauge:RadialAxis.Ranges>
                <gauge:GaugeRange StartValue="0"
                                  EndValue="30"
                                  StartWidth="0.5"
                                  EndWidth="0.5"
                                  WidthUnit="Factor"
                                  Background="Red"
                                  Label="Slow"
                                  LabelTemplate="{StaticResource RangeLabelTemplate}" />
                <gauge:GaugeRange StartValue="30"
                                  EndValue="70"
                                  StartWidth="0.5"
                                  EndWidth="0.5"
                                  WidthUnit="Factor"
                                  Background="Yellow"
                                  Label="Moderate"
                                  LabelTemplate="{StaticResource RangeLabelTemplate}" />
                <gauge:GaugeRange StartValue="70"
                                  EndValue="100"
                                  StartWidth="0.5"
                                  EndWidth="0.5"
                                  WidthUnit="Factor"
                                  Background="Green"
                                  Label="Fast"
                                  LabelTemplate="{StaticResource RangeLabelTemplate}" />
            </gauge:RadialAxis.Ranges>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

OffsetUnit

Gets or sets the value that indicates the to calculate the range offset either in logical pixel or factor.

Declaration
public SizeUnit OffsetUnit { get; set; }
Property Value
Type Description
SizeUnit
Examples
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Ranges>
                <gauge:GaugeRange StartValue="50" EndValue="100" RangeOffset="10" OffsetUnit="Factor" />
            </gauge:RadialAxis.Ranges>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

RangeOffset

Gets or sets the value that specifies the range position. You can specify value either in logical pixel or radius factor using the OffsetUnit property.

Declaration
public double RangeOffset { get; set; }
Property Value
Type Description
System.Double
Examples

If WidthUnit is Factor, value will be given from 0 to 1. Here range placing position is calculated by RangeOffset * axis radius value. Example: RangeOffset value is 0.2 and axis radius is 100, range is moving 20(0.2 * 100) logical pixels from axis outer radius. If WidthUnit is Pixel, the given value distance range moves from the outer radius axis. When you specify RangeOffset is negative, the range will be positioned outside the axis.

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Ranges>
                <gauge:GaugeRange StartValue="50" EndValue="100" RangeOffset="10" />
            </gauge:RadialAxis.Ranges>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

StartValue

Gets or sets the value that specifies the range start value.

Declaration
public double StartValue { get; set; }
Property Value
Type Description
System.Double
Examples
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Ranges>
                <gauge:GaugeRange StartValue="50" />
            </gauge:RadialAxis.Ranges>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

StartWidth

Gets or sets the value that specifies the range start width. You can specify value either in logical pixel or radius factor using the WidthUnit property.

Declaration
public double StartWidth { get; set; }
Property Value
Type Description
System.Double
Examples

If WidthUnit is Factor, value must be given from 0 to 1. Here range start width is calculated by StartWidth * axis radius value. Example: StartWidth value is 0.2 and axis radius is 100, range start width is 20(0.2 * 100) logical pixels. if WidthUnit is Pixel, the defined value is set for the start width of the range.

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Ranges>
                <gauge:GaugeRange StartValue="50"
                                  EndValue="100"
                                  RangeOffset="10"
                                  OffsetUnit="Factor"
                                  StartWidth="10"/>
            </gauge:RadialAxis.Ranges>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

WidthUnit

Gets or sets the value that indicates the whether range start and end width can be calculated using logical pixel or radius factor.

Declaration
public SizeUnit WidthUnit { get; set; }
Property Value
Type Description
SizeUnit
Examples
<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.Ranges>
                <gauge:GaugeRange StartValue="50" EndValue="100" RangeOffset="10" OffsetUnit="Factor" SizeUnit="Factor" />
            </gauge:RadialAxis.Ranges>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

Methods

OnApplyTemplate()

Invoke to render GaugeRange class.

Declaration
protected override void OnApplyTemplate()

OnCreateAutomationPeer()

Declaration
protected override AutomationPeer OnCreateAutomationPeer()
Returns
Type Description
Microsoft.UI.Xaml.Automation.Peers.AutomationPeer