How to design a radial timer picker using .NET MAUI Radial Gauge (SfRadialGauge)?
This article describes how to design a radial time picker using the Syncfusion .NET MAUI Radial Gauge control.
Step 1: Create the SfRadialGauge control by referring to this getting started link and setting the StartAngle and the EndAngle of the RadialAxis as 270 to get the entire 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, and set the ShowFirstLabel, ShowAxisLine, and ShowTicks as false.
XAML
<gauge:SfRadialGauge> <gauge:SfRadialGauge.Axes> <gauge:RadialAxis Maximum="12" ShowFirstLabel="False" ShowAxisLine="False" ShowTicks="False"> </gauge:RadialAxis> </gauge:SfRadialGauge.Axes> </gauge:SfRadialGauge>
Step 3: Add the NeedlePointer and ContentPointer to specify timing in the timer.
XAML
<gauge:RadialAxis.Pointers>
<gauge:ContentPointer x:Name="pointer"
OffsetUnit="Pixel"
EnableAnimation="False"
Offset="-20"
IsInteractive="True"
StepFrequency="1"
ValueChanging="pointer_ValueChanging"
ValueChangeCompleted="pointer_ValueChangeCompleted">
<gauge:ContentPointer.Content>
<Grid HeightRequest="30"
WidthRequest="30">
<Ellipse Fill="#512BD4" />
<Label Text="{Binding Source={x:Reference pointer}, Path=Value}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Grid>
</gauge:ContentPointer.Content>
</gauge:ContentPointer>
<gauge:NeedlePointer Value="{Binding Source={x:Reference pointer}, Path=Value, Mode=TwoWay}"
KnobFill="#512BD4"
KnobRadius="0.02"
NeedleStartWidth="2"
NeedleEndWidth="2"
NeedleFill="#512BD4"
NeedleLengthUnit="Factor"
NeedleLength="1"
StepFrequency="1" />
</gauge:RadialAxis.Pointers>
Step 4: Set the BackgroundContent to customize the background of the radial axis to display like a clock.
XAML
<gauge:RadialAxis.BackgroundContent> <Ellipse Fill="LightGrey" HorizontalOptions="Center" /> </gauge:RadialAxis.BackgroundContent>
Step 5: Add the logic in the pointer value changing event to perform the timer action.
C#
private void pointer_ValueChanging(object sender, ValueChangingEventArgs e)
{
double newValue = 0;
if (e.NewValue != 60)
{
newValue = e.NewValue;
}
if (this.timerPickerAxis.Maximum == 12)
{
this.HoursLabel.Text = newValue.ToString("00");
}
else
{
this.MinutesLabel.Text = newValue.ToString("00");
}
}
Output:
See also:
How to create an application using the .NET MAUI Radial Gauge?
How to customize the Needle Pointer?
How to customize the Content Pointer?
How to customize background of Axis?
