How to design a circular timer using WinUI Radial Gauge (SfRadialGauge)?
This article describes how to design a circular timer using the Syncfusion WinUI 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 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 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 ElementName=pointer, Path=Value}"
EnableAnimation="True"
Background="Blue"
AnimationDuration="1000" />
<gauge:ShapePointer x:Name="pointer"
Value="60"
EnableAnimation="True"
AnimationDuration="1000"
ShapeHeight="30"
ShapeWidth="30"
Stroke="Blue"
StrokeThickness="3"
ShapeType="Circle"
Fill="White" />
</gauge:RadialAxis.Pointers>
Step 4: Add the GaugeAnnotation to show the timer value and the start/pause text block as shown in the following code sample.
XAML
<gauge:RadialAxis.Annotations>
<gauge:GaugeAnnotation PositionFactor="0.4"
DirectionValue="30"
DirectionUnit="AxisValue">
<gauge:GaugeAnnotation.Content>
<StackPanel>
<TextBlock x:Name="play"
Tapped="play_pause_Tapped"
Visibility="Visible"
Foreground="Blue"
FontFamily="Segoe MDL2 Assets"
Text=""
FontSize="50"
FontWeight="ExtraBold" />
<TextBlock x:Name="pause"
Tapped="play_pause_Tapped"
Visibility="Collapsed"
Foreground="Blue"
FontFamily="Segoe MDL2 Assets"
Text=""
FontSize="50"
FontWeight="ExtraBold" />
</StackPanel>
</gauge:GaugeAnnotation.Content>
</gauge:GaugeAnnotation>
<gauge:GaugeAnnotation PositionFactor="0.1"
DirectionValue="0"
DirectionUnit="AxisValue">
<gauge:GaugeAnnotation.Content>
<TextBlock x:Name="timer"
Text="01:00"
FontSize="80"
Foreground="Blue" />
</gauge:GaugeAnnotation.Content>
</gauge:GaugeAnnotation>
</gauge:RadialAxis.Annotations>
Step 5: Add the logic in the text block tapped event to perform the timer action.
C#
bool isCircularTimerOn = false;
DispatcherTimer dispatcherTimer = null;
public MainWindow()
{
this.InitializeComponent();
dispatcherTimer = new DispatcherTimer();
dispatcherTimer.Interval = TimeSpan.FromSeconds(1);
dispatcherTimer.Tick += Timer_Tick;
}
private void Timer_Tick(object sender, object e)
{
if (isCircularTimerOn)
{
pointer.Value -= 1;
if (pointer.Value == -1)
{
isCircularTimerOn = false;
pointer.Value = 60;
timer.Text = "01:00";
}
else
{
timer.Text = pointer.Value.ToString("00:00");
}
}
}
private void play_pause_Tapped(object sender, TappedRoutedEventArgs e)
{
isCircularTimerOn = !isCircularTimerOn;
if (isCircularTimerOn)
{
play.Visibility = Visibility.Collapsed;
pause.Visibility = Visibility.Visible;
dispatcherTimer.Start();
}
else
{
play.Visibility = Visibility.Visible;
pause.Visibility = Visibility.Collapsed;
dispatcherTimer.Stop();
}
}
Output:
View sample in the GitHub.
See also
How to create an application using the WinUI Radial Gauge?
How to customize the Shape Pointer?
How to customize the Range Pointer?
