How to design an analog clock using .NET MAUI Radial Gauge (SfRadialGauge)?

2 mins read

This article describes how to create a analog clock using the Syncfusion .NET MAUI Radial Gauge control.

Step 1: Create the SfRadialGauge control by referring to this getting started link and set the StartAngle and the EndAngle of the RadialAxis as 270 to get the full circular axis.

XAML

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

Step 2: Set the Minimum and Maximum of the radial axis as 0 and 12 respectively, set the Interval as 1, and set the ShowFirstLabel as false in order to display 12 hours in the radial axis.

XAML

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis Minimum="0"
                          Maximum="12"
                          Interval="1" 
                          ShowFirstLabel="False">
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

Step 3: To customize the axis line and labels, use the AxisLineStyle and AxisLabelStyle as show in the following code sample.

XAML

<gauge:RadialAxis.AxisLabelStyle>
    <gauge:GaugeLabelStyle FontSize="12" 
                           TextColor="#355C7D"/>
</gauge:RadialAxis.AxisLabelStyle>
<gauge:RadialAxis.AxisLineStyle>
    <gauge:RadialLineStyle Thickness="3"/>
</gauge:RadialAxis.AxisLineStyle>

Step 4: To customize the major and minor ticks, use the MajorTickStyle and MinorTickStyle as show in the following code sample.

XAML

<gauge:RadialAxis.MajorTickStyle>
    <gauge:RadialTickStyle Length="0.08" 
                           LengthUnit="Factor" 
                           StrokeThickness="1.5"/>
</gauge:RadialAxis.MajorTickStyle>
 
<gauge:RadialAxis.MinorTickStyle>
    <gauge:RadialTickStyle Length="0.04" 
                           LengthUnit="Factor"
                           StrokeThickness="1"/>
</gauge:RadialAxis.MinorTickStyle>

Step 5: Add the NeedlePointer’s for specify hours, minutes, and seconds in the analog clock.

XAML

<gauge:RadialAxis.Pointers>
    <gauge:NeedlePointer x:Name="hoursPointer"
                         EnableAnimation="True"
                         AnimationDuration="800"
                         AnimationEasing="{x:Static Easing.BounceOut}"
                         NeedleLength="0.6"
                         NeedleStartWidth="2"
                         NeedleEndWidth="5"
                         NeedleFill="#355C7D"
                         KnobRadius="0">
    </gauge:NeedlePointer>
    <gauge:NeedlePointer x:Name="minutesPointer"  
                         EnableAnimation="True"
                         AnimationDuration="800"
                         AnimationEasing="{x:Static Easing.BounceOut}"
                         NeedleLength="0.85"
                         NeedleStartWidth="1"
                         NeedleEndWidth="3"
                         NeedleFill="#355C7D"
                         KnobFill="#00A8B5"
                         KnobRadius="0.05" />
    <gauge:NeedlePointer x:Name="secondsPointer"
                         EnableAnimation="True"
                         AnimationDuration="800"
                         AnimationEasing="{x:Static Easing.BounceOut}"
                         NeedleLength="0.9"
                         NeedleStartWidth="2"
                         NeedleEndWidth="2"
                         NeedleFill="#00A8B5"
                         TailWidth="2"
                         TailLength="0.15"
                         TailFill="#00A8B5"
                         KnobFill="White"
                         KnobRadius="0.03"/>
</gauge:RadialAxis.Pointers>

Output:

Analog clock with the .Net MAUI Radial Gauge

View sample in the GitHub.

How to design an analog clock using .NET MAUI Radial Gauge (SfRadialGauge)?

See also:

Access denied