.NET MAUI Radial Gauge
The Radial Gauge allows you to display the scale range in a radial form.
Setting Up the Radial Gauge
The following example shows the basic setup of the Radial Gauge.
<telerik:RadRadialGauge x:Name="gauge">
<telerik:RadRadialGauge.Axis>
<telerik:GaugeLinearAxis Maximum="200"
Minimum="0"
Step="25" />
</telerik:RadRadialGauge.Axis>
<telerik:RadRadialGauge.Indicators>
<telerik:GaugeNeedleIndicator Offset="30" Value="60" />
</telerik:RadRadialGauge.Indicators>
<telerik:RadRadialGauge.Ranges>
<telerik:GaugeRangesDefinition>
<telerik:GaugeRange Color="Green"
From="0"
To="150" />
<telerik:GaugeGradientRange From="150" To="200">
<telerik:RadGradientStop Offset="150" Color="Yellow" />
<telerik:RadGradientStop Offset="200" Color="Red" />
</telerik:GaugeGradientRange>
</telerik:GaugeRangesDefinition>
</telerik:RadRadialGauge.Ranges>
</telerik:RadRadialGauge>
The following image shows the end result.
Setting the Rotation and Radius
The Radial Gauge allows you to define the radius of its axis through its AxisRadiusFactor property. For more information about the AxisRadiusFactor, refer to the article on positioning and offset.
You can also control the start angle, the sweep angle, and the sweep direction of the axis through the following properties:
-
StartAngle—The start angle determines the origin position of the axis. -
SweepAngle—The sweep angle defines the size of the axis arc. For example, if the start angle is 90 and the sweep angle is 30, the axis will be drawn between the 90th and 120th angle. If the sweep direction is counter-clockwise, the axis will be drawn between 60 and 90. -
SweepDirection—Sets the axis sweep direction as clockwise or counter-clockwise.