WinUI

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class GaugeRange

    Show / Hide Table of Contents

    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

    Identifies the EndValue dependency property.

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

    The identifier for EndValue dependency property.

    EndWidthProperty

    Identifies the EndWidth dependency property.

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

    The identifier for EndWidth dependency property.

    GradientStopsProperty

    Identifies the GradientStops dependency property.

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

    The identifier for GradientStops dependency property.

    LabelProperty

    Identifies the Label dependency property.

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

    The identifier for Label dependency property.

    LabelTemplateProperty

    Identifies the LabelTemplate dependency property.

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

    The identifier for LabelTemplate dependency property.

    OffsetUnitProperty

    Identifies the OffsetUnit dependency property.

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

    The identifier for OffsetUnit dependency property.

    RangeOffsetProperty

    Identifies the RangeOffset dependency property.

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

    The identifier for RangeOffset dependency property.

    StartValueProperty

    Identifies the StartValue dependency property.

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

    The identifier for StartValue dependency property.

    StartWidthProperty

    Identifies the StartWidth dependency property.

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

    The identifier for StartWidth dependency property.

    WidthUnitProperty

    Identifies the WidthUnit dependency property.

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

    The identifier for WidthUnit dependency property.

    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

    It defines the end value of the range. The default value is 0.

    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

    It defines the end width of the range. The default value is 10.

    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>

    A collection of the GaugeGradientStop objects associated with the brush, each of which specifies a color and an offset along the axis. The default is an empty collection.

    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

    It defines the string for the range label. The default value is string.Empty.

    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

    The template for the range labels. The registered default is null.

    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

    One of the SizeUnit enumeration that specifies how the RangeOffset value is considered. The default mode is Pixel.

    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

    It defines offset of the range either in pixel or factor. The default value is double.NaN.

    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

    It defines the start value of the range. The default value is 0.

    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

    It defines the start width of the range. The default value is 10.

    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

    One of the SizeUnit enumeration that specifies how the StartWidth and EndWidth values are considered. The default mode is Pixel.

    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
    Back to top Generated by DocFX
    Copyright © 2001 - 2023 Syncfusion Inc. All Rights Reserved