How to design radial timer picker using WinUI Radial Gauge?
This article describes how to design a radial time picker 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.
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"
MarkerOffset="-20"
IsInteractive="True"
ValueChanging="pointer_ValueChanging"
ValueChangeCompleted="pointer_ValueChangeCompleted">
<gauge:ContentPointer.Content>
<Grid Height="30"
Width="30">
<Ellipse Fill="#512BD4" />
<TextBlock x:Name="ContentTextBlock"
Foreground="White"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</gauge:ContentPointer.Content>
</gauge:ContentPointer>
<gauge:NeedlePointer Value="{Binding ElementName=pointer, Path=Value, Mode=TwoWay}"
KnobFill="#512BD4"
KnobRadius="0.02"
NeedleStartWidth="2"
NeedleEndWidth="2"
NeedleFill="#512BD4"
NeedleLengthUnit="Factor"
NeedleLength="0.85" />
</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="LightGray" /> </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 = (int)e.NewValue;
}
this.ContentTextBlock.Text = newValue.ToString("00");
if (this.timerPickerAxis.Maximum == 12)
{
this.HoursTextBlock.Text = this.ContentTextBlock.Text;
}
else
{
this.MinutesTextBlock.Text = this.ContentTextBlock.Text;
}
}
Output:
View sample in the GitHub.
See also
How to create an application using WinUI Radial Gauge?
How to customize the Needle Pointer?
How to customize the Content Pointer?
How to customize background of Axis?
Conclusion
I hope you enjoyed learning on how to design a radial timer picker using WinUI Radial Gauge (SfRadialGauge).
You can refer to our WinUI 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 WinUI 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!
