How to Design a Circular Timer Using .NET MAUI Radial Gauge?
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 link. 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, as shown in the following code sample.
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.
C#
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:
See also:
How to create an application using the .NET MAUI Radial Gauge?
How to customize the Shape Pointer?
How to customize the Range Pointer?
How to customize the Gauge Annotation?
Conclusion
I hope you enjoyed learning how to design a circular timer using .NET MAUI Radial Gauge.
You can refer to our .NET MAUI Radial Gauge feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also 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, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
