How to create an analog clock with the WinUI radial gauge (SfRadialGauge)?

2 mins read

This article explains how to create an analog clock using the Syncfusion WinUI Radial Gauge control.

Step 1: Create the SfRadialGauge control by referring to this getting started link and get 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 use AxisLineWidth and AxisLineWidthUnit properties and to customize labels, use FontSize and Foreground properties as shown in the following code sample.

XAML

<gauge:SfRadialGauge.Axes>
    <gauge:RadialAxis AxisLineWidth="3"
                      AxisLineWidthUnit="Pixel"
                      FontSize="12"
                      Foreground="#355C7D">
    </gauge:RadialAxis>
</gauge:SfRadialGauge.Axes>

Step 4: To customize the major and minor ticks, use the MajorTickStyle, MinorTickStyle, MajorTickLength and MinorTickLength as shown in the following sample.

XAML

<gauge:RadialAxis MajorTickLength="0.08"
                  MinorTickLength=".04"
                  TickLengthUnit="Factor">
    <gauge:RadialAxis.MinorTickStyle>
        <Style TargetType="Line">
            <Setter Property="StrokeThickness"
                    Value="1.5"/>
            <Setter Property="Stroke"
                    Value="#999999"/>
        </Style>
    </gauge:RadialAxis.MinorTickStyle>
    <gauge:RadialAxis.MajorTickStyle>
        <Style TargetType="Line">
            <Setter Property="StrokeThickness"
                    Value="1.5"/>
            <Setter Property="Stroke"
                    Value="#999999"/>
        </Style>
    </gauge:RadialAxis.MajorTickStyle>
</gauge:RadialAxis>

Step 5: Add the NeedlePointers to specify hours, minutes and seconds in the analog clock.

XAML

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

Output

Analog Clock using Syncfusion WinUI SfRadialGauge

View sample in the GitHub.

How to create an analog clock with the WinUI radial gauge (SfRadialGauge)?

See also

Access denied