menu

WinUI

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class RadialAxis - WinUI API Reference | Syncfusion

    Show / Hide Table of Contents

    Class RadialAxis

    The RadialAxis is a circular arc in which a set of values are displayed along a linear or custom scale based on the design requirements.

    Inheritance
    System.Object
    GaugeAxis
    RadialAxis
    Inherited Members
    GaugeAxis.Annotations
    GaugeAxis.AnnotationsProperty
    GaugeAxis.AxisLineFill
    GaugeAxis.AxisLineFillProperty
    GaugeAxis.AxisLineWidth
    GaugeAxis.AxisLineWidthProperty
    GaugeAxis.AxisLineWidthUnit
    GaugeAxis.AxisLineWidthUnitProperty
    GaugeAxis.GradientStops
    GaugeAxis.GradientStopsProperty
    GaugeAxis.Interval
    GaugeAxis.IntervalProperty
    GaugeAxis.IsInversed
    GaugeAxis.IsInversedProperty
    GaugeAxis.LabelFormat
    GaugeAxis.LabelFormatProperty
    GaugeAxis.LabelPosition
    GaugeAxis.LabelPositionProperty
    GaugeAxis.LabelPrepared
    GaugeAxis.LabelTemplate
    GaugeAxis.LabelTemplateProperty
    GaugeAxis.MajorTickLength
    GaugeAxis.MajorTickLengthProperty
    GaugeAxis.MajorTickStyle
    GaugeAxis.MajorTickStyleProperty
    GaugeAxis.Maximum
    GaugeAxis.MaximumLabelsCount
    GaugeAxis.MaximumLabelsCountProperty
    GaugeAxis.MaximumProperty
    GaugeAxis.Minimum
    GaugeAxis.MinimumProperty
    GaugeAxis.MinorTickLength
    GaugeAxis.MinorTickLengthProperty
    GaugeAxis.MinorTicksPerInterval
    GaugeAxis.MinorTicksPerIntervalProperty
    GaugeAxis.MinorTickStyle
    GaugeAxis.MinorTickStyleProperty
    GaugeAxis.Pointers
    GaugeAxis.PointersProperty
    GaugeAxis.Ranges
    GaugeAxis.RangesProperty
    GaugeAxis.ShowAxisLine
    GaugeAxis.ShowAxisLineProperty
    GaugeAxis.ShowLabels
    GaugeAxis.ShowLabelsProperty
    GaugeAxis.ShowTicks
    GaugeAxis.ShowTicksProperty
    GaugeAxis.TickLengthUnit
    GaugeAxis.TickLengthUnitProperty
    GaugeAxis.TickPosition
    GaugeAxis.TickPositionProperty
    GaugeAxis.UseRangeColorForAxis
    GaugeAxis.UseRangeColorForAxisProperty
    Namespace: Syncfusion.UI.Xaml.Gauges
    Assembly: Syncfusion.Gauge.WinUI.dll
    Syntax
    public class RadialAxis : GaugeAxis
    Examples
    <gauge:SfRadialGauge>
       <gauge:SfRadialGauge.Axes>
           <gauge:RadialAxis RadiusFactor="0.85"
                             Interval="10"
                             FontSize="14"
                             Minimum="-60"
                             Maximum="60">
    
               <gauge:RadialAxis.Pointers>
                   <gauge:NeedlePointer EnableAnimation="True"
                                        NeedleLengthUnit="Factor"
                                        NeedleLength="0.7"
                                        Value="9.94"
                                        NeedleStartWidth="2"
                                        NeedleEndWidth="10"
                                        KnobRadius="0.05"
                                        KnobSizeUnit="Factor"
                                        TailLength="0.1"
                                        TailWidth="10">
                   </gauge:NeedlePointer>
               </gauge:RadialAxis.Pointers>
           </gauge:RadialAxis>
       </gauge:SfRadialGauge.Axes>
    </gauge:SfRadialGauge>

    Constructors

    RadialAxis()

    Initializes a new instance of the RadialAxis class.

    Declaration
    public RadialAxis()
    Examples

    Create RadialAxis with the default or required scale range and customized axis properties.

    <gauge:SfRadialGauge>
        <gauge:SfRadialGauge.Axes>
            <gauge:RadialAxis StartAngle = "130"
                              EndAngle="50"
                              IsInversed="False"
                              RadiusFactor="0.9"
                              CanRotateLabels="False"
                              ShowLabels="True"
                              ShowAxisLine="True"
                              ShowTicks="True"
                              ShowFirstLabel="True"
                              ShowLastLabel="True"
                              Minimum="0"
                              Maximum="100"
                              Interval="10"
                              MinorTicksPerInterval="5"
                              ...
                              >
            </gauge:RadialAxis>
        </gauge:SfRadialGauge.Axes>
    </gauge:SfRadialGauge>

    Fields

    BackgroundContentProperty

    Identifies the BackgroundContent dependency property.

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

    The identifier for BackgroundContent dependency property.

    CanRotateLabelsProperty

    Identifies the CanRotateLabels dependency property.

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

    The identifier for CanRotateLabels dependency property.

    EndAngleProperty

    Identifies the EndAngle dependency property.

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

    The identifier for EndAngle dependency property.

    LabelOffsetProperty

    Identifies the LabelOffset dependency property.

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

    The identifier for LabelOffset 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.

    RadiusFactorProperty

    Identifies the RadiusFactor dependency property.

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

    The identifier for RadiusFactor dependency property.

    ShowFirstLabelProperty

    Identifies the ShowFirstLabel dependency property.

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

    The identifier for ShowFirstLabel dependency property.

    ShowLastLabelProperty

    Identifies the ShowLastLabel dependency property.

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

    The identifier for ShowLastLabel dependency property.

    StartAngleProperty

    Identifies the StartAngle dependency property.

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

    The identifier for StartAngle dependency property.

    TickOffsetProperty

    Identifies the TickOffset dependency property.

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

    The identifier for TickOffset dependency property.

    Properties

    BackgroundContent

    Gets or sets the visual element to display in the background content such as Image or gradient content of radial axis boundary.

    Declaration
    public object BackgroundContent { get; set; }
    Property Value
    Type Description
    System.Object

    The object that defines the axis background visual element.

    Examples

    The BackgroundContent applied for the RadialAxis boundary. Defaults value is null.

    <gauge:SfRadialGauge>
        <gauge:SfRadialGauge.Axes>
            <gauge:RadialAxis>
                <gauge:RadialAxis.BackgroundContent>        
                    <Image Source="Assets/AxisBackground.png" />
                </gauge:RadialAxis.BackgroundContent>
            </gauge:RadialAxis>
        </gauge:SfRadialGauge.Axes>
    </gauge:SfRadialGauge>

    CanRotateLabels

    Gets or sets a value indicating whether to rotate the labels.

    Declaration
    public bool CanRotateLabels { get; set; }
    Property Value
    Type Description
    System.Boolean

    true if labels are rotated; otherwise, false. The default value is false.

    Examples
    <gauge:SfRadialGauge>
        <gauge:SfRadialGauge.Axes>
            <gauge:RadialAxis CanRotateLabels="True" />
        </gauge:SfRadialGauge.Axes>
    </gauge:SfRadialGauge>

    EndAngle

    Gets or sets a value that specifies the EndAngle of axis.

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

    It defines the end angle of the axis. The default value is 50.

    Examples

    By setting the StartAngle, EndAngle and IsInversed, we can change the shape the radial gauge into full radial gauge, half radial gauge, and quarter radial gauge.

    <gauge:SfRadialGauge>
        <gauge:SfRadialGauge.Axes>
            <gauge:RadialAxis EndAngle="50" />
        </gauge:SfRadialGauge.Axes>
    </gauge:SfRadialGauge>

    LabelOffset

    Gets or sets a value to adjusts the axis label position from tick end. You can specify value either in logical pixel or radius factor using the OffsetUnit property.

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

    It defines the offset of the axis labels. The default value is double.NaN.

    Examples

    If offsetUnit is GaugeSizeUnit.factor, value will be given from 0 to 1. Here labels placing position is calculated by LabelOffset * axis outer radius value. Example: labelOffset value is 0.2 and axis radius is 100, labels moving 20(0.2 * 100) logical pixels from axis line outer end. If offsetUnit is GaugeSizeUnit.logicalPixel, the defined value distance labels will move from the outer end of the axis.

    <gauge:SfRadialGauge>
        <gauge:SfRadialGauge.Axes>
            <gauge:RadialAxis LabelOffset="30" />
        </gauge:SfRadialGauge.Axes>
    </gauge:SfRadialGauge>

    OffsetUnit

    Gets or sets the value that indicates to calculate the labels and ticks 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 LabelOffset and TickOffset values are considered. The default mode is Pixel.

    Examples
    <gauge:SfRadialGauge>
        <gauge:SfRadialGauge.Axes>
            <gauge:RadialAxis OffsetUnit="Factor" />
        </gauge:SfRadialGauge.Axes>
    </gauge:SfRadialGauge>

    RadiusFactor

    Gets or sets a value that specifies the radius of the RadialAxis. This value ranges from 0 to 1.

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

    It defines the radius factor of the axis. The default value is 0.9.

    Examples

    The size of the axis, expressed as the radius (half the diameter) in factor. The radiusFactor must be between 0 and 1. Axis radius is determined by multiplying this factor value to the minimum width or height of the control.

    <gauge:SfRadialGauge>
        <gauge:SfRadialGauge.Axes>
            <gauge:RadialAxis RadiusFactor="0.9" />
        </gauge:SfRadialGauge.Axes>
    </gauge:SfRadialGauge>

    ShowFirstLabel

    Gets or sets a value indicating whether shows or hides the first label of the axis

    Declaration
    public bool ShowFirstLabel { get; set; }
    Property Value
    Type Description
    System.Boolean

    true if first label is displayed; otherwise, false. The default value is true.

    Examples

    When startAngle and endAngle are the same, the first and last labels are intersected.To prevent this, enable this property to be false, if ShowLastLabel is true.

    <gauge:SfRadialGauge>
        <gauge:SfRadialGauge.Axes>
            <gauge:RadialAxis ShowFirstLabel="False" />
        </gauge:SfRadialGauge.Axes>
    </gauge:SfRadialGauge>

    ShowLastLabel

    Gets or sets a value indicating whether shows or hides the last label of the axis.

    Declaration
    public bool ShowLastLabel { get; set; }
    Property Value
    Type Description
    System.Boolean

    true if last label is displayed; otherwise, false. The default value is true.

    Examples

    When startAngle and endAngle are the same, the first and last labels are intersected.To prevent this, enable this property to be false, if ShowFirstLabel is true.

    <gauge:SfRadialGauge>
        <gauge:SfRadialGauge.Axes>
            <gauge:RadialAxis ShowLastLabel="False" />
        </gauge:SfRadialGauge.Axes>
    </gauge:SfRadialGauge>

    StartAngle

    Gets or sets a value that specifies the StartAngle of axis.

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

    It defines the start angle of the axis. The default value is 130.

    Examples

    By setting the StartAngle, EndAngle and IsInversed, we can change the shape the radial gauge into full radial gauge, half radial gauge, and quarter radial gauge.

    <gauge:SfRadialGauge>
        <gauge:SfRadialGauge.Axes>
            <gauge:RadialAxis StartAngle="130" />
        </gauge:SfRadialGauge.Axes>
    </gauge:SfRadialGauge>

    TickOffset

    Gets or sets the value to adjusts the axis ticks position from the axis lines. You can specify value either in logical pixel or radius factor using the OffsetUnit property.

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

    It defines the offset of the ticks. The default value is double.NaN.

    Examples

    If offsetUnit is GaugeSizeUnit.factor, value will be given from 0 to 1. Here ticks placing position is calculated by TickOffset * axis outer radius value. Example: TickOffset value is 0.2 and axis radius is 100, ticks moving 20(0.2 * 100) logical pixels from axis line outer end. If offsetUnit is GaugeSizeUnit.logicalPixel, the defined value distance ticks will move from the outer end of the axis.

    <gauge:SfRadialGauge>
        <gauge:SfRadialGauge.Axes>
            <gauge:RadialAxis TickOffset="30" />
        </gauge:SfRadialGauge.Axes>
    </gauge:SfRadialGauge>

    Methods

    GenerateVisibleLabels()

    Calculates the visible labels based on axis interval and range.

    Declaration
    public virtual List<AxisLabelData> GenerateVisibleLabels()
    Returns
    Type Description
    System.Collections.Generic.List<AxisLabelData>

    The visible label collection.

    Examples
    • XAML
    • C#
    <gauge:SfRadialGauge>
        <gauge:SfRadialGauge.Axes>
            <local:RadialAxisExt Minimum = "0"
                                 Maximum="150"
                                 ShowTicks="False"
                                 AxisLineWidthUnit="Factor"
                                 AxisLineWidth="0.15">
            </local:RadialAxisExt>
        </gauge:SfRadialGauge.Axes>
    </gauge:SfRadialGauge>
    public class RadialAxisExt : RadialAxis
    {
        public override List<AxisLabelData> GenerateVisibleLabels()
        {
            List<AxisLabelData> customLabels = new List<AxisLabelData>();
            for (int i = 0; i < 9; i++)
            {
                double value = CalculateLabelValue(i);
                AxisLabelData label = new AxisLabelData
                {
                    Value = value,
                    Text = value.ToString()
                };
                customLabels.Add(label);
            }
    
            return customLabels;
        }
    
        double CalculateLabelValue(double value)
        {
            if (value == 0)
            {
                return 0;
            }
            else if (value == 1)
            {
                return 2;
            }
            else if (value == 2)
            {
                return 5;
            }
            else if (value == 3)
            {
                return 10;
            }
            else if (value == 4)
            {
                return 20;
            }
            else if (value == 5)
            {
                return 30;
            }
            else if (value == 6)
            {
                return 50;
            }
            else if (value == 7)
            {
                return 100;
            }
            else
            {
                return 150;
            }
        }
    }

    MeasureOverride(Size)

    Measures the size in layout required for child elements.

    Declaration
    protected override Size MeasureOverride(Size availableSize)
    Parameters
    Type Name Description
    Windows.Foundation.Size availableSize

    This size give to child elements.

    Returns
    Type Description
    Windows.Foundation.Size

    Return child element size.

    OnApplyTemplate()

    Invoke to render RadialAxis class.

    Declaration
    protected override void OnApplyTemplate()

    OnCreateAutomationPeer()

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

    ValueToAngle(Double)

    Converts circular axis value to respective direction angle.

    Declaration
    public double ValueToAngle(double value)
    Parameters
    Type Name Description
    System.Double value

    The value.

    Returns
    Type Description
    System.Double

    Angle of the given value.

    ValueToCoefficient(Double)

    Converts axis value to circular coefficient value.

    Declaration
    public virtual double ValueToCoefficient(double value)
    Parameters
    Type Name Description
    System.Double value

    The axis value to convert as coefficient.

    Returns
    Type Description
    System.Double

    Circular coefficient of the provided value.

    Examples
    • XAML
    • C#
    <gauge:SfRadialGauge>
        <gauge:SfRadialGauge.Axes>
            <local:RadialAxisExt Minimum = "0"
                                 Maximum="150"
                                 ShowTicks="False"
                                 AxisLineWidthUnit="Factor"
                                 AxisLineWidth="0.15">
                <gauge:RangePointer EnableAnimation = "True"
                                    Value="60"
                                    LengthSize="0.15"
                                    SizeUnit="Factor">
                    <gauge:RangePointer.GradientStops>
                        <gauge:GaugeGradientStop Value = "5"
                                                 Color="#FF9E40DC" />
                        <gauge:GaugeGradientStop Value = "45"
                                                 Color="#FFE63B86" />
                    </gauge:RangePointer.GradientStops>
                </gauge:RangePointer>
            </local:RadialAxisExt>
        </gauge:SfRadialGauge.Axes>
    </gauge:SfRadialGauge>
    public class RadialAxisExt : RadialAxis
    {
        public override double ValueToCoefficient(double value)
        {
            if (value >= 0 && value <= 2)
            {
                return (value * 0.125) / 2;
            }
            else if (value > 2 && value <= 5)
            {
                return (((value - 2) * 0.125) / (5 - 2)) + (1 * 0.125);
            }
            else if (value > 5 && value <= 10)
            {
                return (((value - 5) * 0.125) / (10 - 5)) + (2 * 0.125);
            }
            else if (value > 10 && value <= 20)
            {
                return (((value - 10) * 0.125) / (20 - 10)) + (3 * 0.125);
            }
            else if (value > 20 && value <= 30)
            {
                return (((value - 20) * 0.125) / (30 - 20)) + (4 * 0.125);
            }
            else if (value > 30 && value <= 50)
            {
                return (((value - 30) * 0.125) / (50 - 30)) + (5 * 0.125);
            }
            else if (value > 50 && value <= 100)
            {
                return (((value - 50) * 0.125) / (100 - 50)) + (6 * 0.125);
            }
            else if (value > 100 && value <= 150)
            {
                return (((value - 100) * 0.125) / (150 - 100)) + (7 * 0.125);
            }
            else
            {
                return 1;
            }
        }
    }

    ValueToPoint(Double)

    Converts axis value to vector point.

    Declaration
    public Point ValueToPoint(double value)
    Parameters
    Type Name Description
    System.Double value

    The axis value to convert as vector.

    Returns
    Type Description
    Windows.Foundation.Point

    Vector point of the provided value.

    Events

    AxisTapped

    Called when an axis is tapped.

    Declaration
    public event EventHandler<AxisTappedEventArgs> AxisTapped
    Event Type
    Type
    System.EventHandler<AxisTappedEventArgs>
    Remarks

    You can get the tapped axis value from its AxisTappedEventArgs argument.

    Examples
    • XAML
    • C#
    <gauge:SfRadialGauge>
        <gauge:SfRadialGauge.Axes>
            <gauge:RadialAxis AxisTapped="RadialAxis_AxisTapped"/>
        </gauge:SfRadialGauge.Axes>
    </gauge:SfRadialGauge>

    The RadialAxis passes the tapped axis value as arguments.

    private void RadialAxis_AxisTapped(object sender, AxisTappedEventArgs e)
    {
        var value = e.Value;
    }
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved