How to Design a Circular Timer Using .NET MAUI Radial Gauge?

5 mins read

This article describes how to design a circular timer using the Syncfusion®.NET MAUI Radial Gauge control.

Step 1: Create the SfRadialGauge control by referring to this getting-started documentation. Then, set the StartAngle and the EndAngle of the RadialAxis as 270 to get the entire circular axis, as shown in the following code sample.

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 60, respectively, and set the ShowLabels and ShowTicks to false, as shown in the following code sample.

XAML:

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis Maximum="60"
                          ShowLabels="False"
                          ShowTicks="False">
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

Step 3: Add the RangePointer and ShapePointer to specify timing in the circular timer.

XAML:

<gauge:RadialAxis.Pointers>
    <gauge:RangePointer Value="{Binding Source={x:Reference pointer}, Path=Value}"
                        EnableAnimation="True"
                        Fill="Blue" />
    <gauge:ShapePointer x:Name="pointer"
                        Value="60"
                        EnableAnimation="True"
                        ShapeHeight="30"
                        ShapeWidth="30"
                        Stroke="Blue"
                        BorderWidth="3"
                        ShapeType="Circle"
                        Fill="White" />
</gauge:RadialAxis.Pointers>

Step 4: Add the GaugeAnnotation to show the timer value and start/pause button, as shown in the following code sample.

XAML:

<gauge:RadialAxis.Annotations>
    <gauge:GaugeAnnotation PositionFactor="0.4"
                           DirectionValue="30"
                           DirectionUnit="AxisValue">
        <gauge:GaugeAnnotation.Content>
            <StackLayout>
                <Button x:Name="play"
                        Clicked="play_pause_Clicked"
                        Text=""
                        IsVisible="True"
                        FontSize="50"
                        FontFamily="Sync FontIcons"
                        TextColor="Blue"
                        BackgroundColor="Transparent"
                        BorderWidth="0" />
                <Button x:Name="pause"
                        Clicked="play_pause_Clicked"
                        Text=""
                        IsVisible="False"
                        FontSize="50"
                        FontFamily="Sync FontIcons"
                        TextColor="Blue"
                        BackgroundColor="Transparent"
                        BorderWidth="0" />
            </StackLayout>
        </gauge:GaugeAnnotation.Content>
    </gauge:GaugeAnnotation>
    <gauge:GaugeAnnotation PositionFactor="0.1"
                           DirectionValue="0"
                           DirectionUnit="AxisValue">
        <gauge:GaugeAnnotation.Content>
            <Label x:Name="timer"
                   Text="00:00"
                   FontSize="80"
                   TextColor="Blue" />
        </gauge:GaugeAnnotation.Content>
    </gauge:GaugeAnnotation>
</gauge:RadialAxis.Annotations>

Step 5: Add the logic in the button click event to perform the timer action.

bool isCircularTimerOn = false;
private void play_pause_Clicked(object sender, EventArgs e)
{
    isCircularTimerOn = !isCircularTimerOn;
    if (isCircularTimerOn)
    {
        play.IsVisible = false;
        pause.IsVisible = true;
    }
 
    Dispatcher.StartTimer(TimeSpan.FromSeconds(1), () =>
    {
        if (!isCircularTimerOn)
        {
            play.IsVisible = true;
            pause.IsVisible = false;
            return false;
        }
 
        Dispatcher.DispatchAsync(() =>
        {
            pointer.Value -= 1;
            if (pointer.Value == -1)
            {
                isCircularTimerOn = false;
                pointer.Value = 60;
                timer.Text = "01:00";
            }
            else
            {
                timer.Text = pointer.Value.ToString("00:00");
            }
        });
 
        return true;
    });
}

Output:

Circular Timer using the Syncfusion .NET MAUI SfRadialGauge control.

Download the complete sample on GitHub.

Conclusion

I hope you enjoyed learning how to design a circular timer using the .NET MAUI Radial Gauge.

You can refer to our .NET MAUI Radial Gauge feature tour page to learn about its other groundbreaking feature representations and documentation, and how to get started with configuration specifications quickly. Explore our .NET MAUI Radial Gauge example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

How to Design a Circular Timer Using .NET MAUI Radial Gauge?

Access denied