Easily Design a Sleep Tracker Using WinUI Radial Gauge

The Syncfusion WinUI Radial Gauge control is a multi-purpose data visualization control that displays numerical values on a circular scale. Its rich feature set includes axes, ranges, pointers, and annotations that are fully customizable and extendable.

In this blog, we will see how to design a sleep tracker application by customizing the vivid features of the WinUI Radial Gauge control.

Basic requirements

To create a sleep tracker, we need the following features in the WinUI Radial Gauge control:

• Axes: To display the tracker range from its minimum to maximum values with specific intervals on the radial scale along with labels and ticks.
• Range: To highlight the sleeping hours’ start and end range.
• Pointer: To point to the current sleeping time start and end values on the tracker scale.
• Annotation : To display the exact sleeping start and end times and total sleeping hours.

Getting started

Follow these steps to design a sleep tracker with the Syncfusion WinUI Radial Gauge:

Step #1: Create a Radial Gauge control

Refer to the WinUI Radial Gauge documentation to get started.

<gauge:SfRadialGauge>
 <gauge:SfRadialGauge.Axes>
  <gauge:RadialAxis>
  </gauge:RadialAxis>
 </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

Step #2: Design a tracker scale

In the process of designing the sleep tracker, the very first step is to design a tracker scale to display the 24-hour time range.

To achieve this, we have to initialize a radial axis and add it to the Axes collection.

The radial axis allows you to display scale values that represent hours in the axis labels from the desired minimum to maximum values with predefined intervals.

You can use the Minimum and Maximum properties of the radial axis to define the start and end hour values of the tracker scale. The Interval property of the radial axis is used to control the scale interval.

To display the tracker scale as a full circle, use the StartAngle and EndAngle properties of the radial axis. Refer to the following code example.

<gauge:RadialAxis x:Name="radialAxis"
                   StartAngle="270"
                   EndAngle="270"
                   Minimum="0"
                   Maximum="24"
                   Interval="6"
                   MinorTicksPerInterval="5"
                   ShowLastLabel="False"
                   AxisLineFill="#B1E8FF"
                   AxisLineWidthUnit="Factor"
                   AxisLineWidth="0.03">
 </gauge:RadialAxis>
</gauge:SfRadialGauge.Axes>

The major elements present in the tracker scale are labels, an axis line, and major and minor ticks.

In this demo, we have used the following properties of the radial axis to design this tracker scale.

• MinorTicksPerInterval: To customize the number of minor ticks per interval.
• ShowLastLabel: To show or hide the last label in the axis.
• AxisLineFill: To customize the axis line fill color.
• AxisLineWidthUnit: To specify the axis line width in pixel or factor value.
• AxisLineWidth: To customize the axis line width.

Note: For more details, refer to the axis support in the WinUI Radial Gauge

Step #3: Add pointers to indicate start and end values

Once the tracker scale design is complete, add a ContentPointer to the Pointers collection of the radial axis to indicate the start and end values.

In ContentPointer , you can host views as Content. In this demo, we have used the sun and moon font icons to show the start and end values.

<gauge:RadialAxis.Pointers>
 <gauge:ContentPointer x:Name="startPointer"
                       Value="20"
                       IsInteractive="True">
   <gauge:ContentPointer.Content>
    <Grid>
     <Ellipse x:Name="StartPtrContentView"
              Height="30"
              Width="30"
              Fill="#2194f3"
              Stroke="WhiteSmoke"
              StrokeThickness="1" />
      <FontIcon HorizontalAlignment="Center"
                VerticalAlignment="Center"
                FontFamily="Segoe MDL2 Assets"
                FontWeight="ExtraBold"
                Glyph="&#xEC46;"
                FontSize="20"
                Foreground="White"
                RenderTransformOrigin="0.5,0.5">
        <FontIcon.RenderTransform>
         <ScaleTransform ScaleX="-1" />
        </FontIcon.RenderTransform>
      </FontIcon>
    </Grid>
   </gauge:ContentPointer.Content>
 </gauge:ContentPointer>

 <gauge:ContentPointer x:Name="EndPointer"
                         IsInteractive="True"
                         Value="6">
  <gauge:ContentPointer.Content>
   <Grid>
    <Ellipse x:Name="EndPtrContentView"
             Height="30"
             Width="30"
             Fill="#2194f3"
             Stroke="WhiteSmoke"
             StrokeThickness="1" />
      <Path Data="M15.993965,24.811008C16.546965,…"
            Stretch="Uniform"
            Stroke="#FFFFFFFF"
            Fill="#FFFFFFFF"
            Width="18"
            Height="18">
      </Path>
   </Grid>
  </gauge:ContentPointer.Content>
 </gauge:ContentPointer>
</gauge:RadialAxis.Pointers>

Note: For more details, refer to the Pointers in WinUI Radial Gauge documentation

Step #4: Indicate start and end ranges

Now, let’s add a range to display the total sleep hours. A range is a visual element that helps you see where a value falls on a radial axis. It contains a collection of a range of elements. You can add any number of ranges inside the axis.

In our application, we are going to use a single range on the axis to indicate the total sleep hours.

Use the StartValue and EndValue properties to specify the start and end values of the range. Also, you can customize the width of a range using the StartWidth and EndWidth properties.

Refer to the following code example.

<gauge:RadialAxis.Ranges>
 <gauge:GaugeRange x:Name="range"
                   StartValue="20"
                   EndValue="6"
                   Background="#2194f3"
                   WidthUnit="Factor"
                   StartWidth="0.03"
                   EndWidth="0.03" />
</gauge:RadialAxis.Ranges>

Note: For more details, refer to the Ranges in WinUI Radial Gauge documentation.

Step #5: Annotate start and end values

Here, we are going to use gauge annotation to indicate the sleep start and end times.

The text block displays the current start and end hours. Set the text to the TextBlock ’s Text property and place it in the desired location using the PositionFactor, DirectionUnit, and DirectionValue properties of the gauge annotation.

<gauge:RadialAxis.Annotations>
 <gauge:GaugeAnnotation x:Name="StartValueAnnotation"
                        DirectionUnit="Angle"
                        DirectionValue="180"
                        PositionFactor="0.4">
   <gauge:GaugeAnnotation.Content>
     <StackPanel Orientation="Vertical">
       <TextBlock Text="4 Apr"
                  FontSize="16"
                  FontWeight="Medium"
                  Foreground="#2194f3"
                  HorizontalAlignment="Center" />
         <TextBlock x:Name="SleepTime"
                    Text="20:00"
                    FontSize="24"
                    Foreground="#2194f3" />
     </StackPanel>
   </gauge:GaugeAnnotation.Content>
 </gauge:GaugeAnnotation>

 <gauge:GaugeAnnotation x:Name="IntermediateAnnotation">
  <gauge:GaugeAnnotation.Content>
   <TextBlock Text="-"
              Foreground="#2194f3"
              VerticalAlignment="Center"
              FontSize="24"
              FontWeight="SemiBold"
              Margin="20,0,20,0" />
  </gauge:GaugeAnnotation.Content>
 </gauge:GaugeAnnotation>

 <gauge:GaugeAnnotation x:Name="EndValueAnnotation"
                        DirectionUnit="Angle"
                        DirectionValue="0"
                        PositionFactor="0.4">
  <gauge:GaugeAnnotation.Content>
   <StackPanel Orientation="Vertical">
    <TextBlock x:Name="EndValueAnnotationDate"
               Text="5 Apr"
               FontWeight="Medium"
               FontSize="16"
               Foreground="#2194f3"
               HorizontalAlignment="Center" />
    <TextBlock x:Name="WakeUpTime"
               Text="06:00"
               FontSize="24"
               Foreground="#2194f3" />
   </StackPanel>
  </gauge:GaugeAnnotation.Content>
 </gauge:GaugeAnnotation>
</gauge:RadialAxis.Annotations>

Note: For more details, refer to the documentation on annotations support in WinUI Radial Gauge

At the app level, you can add a storyboard to animate the content pointers and annotation while interacting with them using the ValueChangeStarted, ValueChanging, and ValueChangeCompleted events of the pointer.

Note: For more details, refer to the example for pointer and annotation animation in WinUI Radial Gauge on GitHub.

GitHub reference

For more details, refer to the complete code example for Designing a Sleep Tracker using WinUI Radial Gauge on GitHub.

Conclusion

Thanks for reading! In this blog, we have learned how easy it is to design and update a sleep tracker using the Syncfusion WinUI Radial Gauge control. So, try out the instructions provided in this blog and tell us about your experience in the comments section below.

The Syncfusion Radial Gauge control is also available in our Blazor, ASP.NET (Core, MVC, Web Forms), JavaScript, Angular, React, Vue,.NET MAUI, Xamarin, Flutter, UWP, WinForms, and WPF platforms.

Additionally, you can check out our demo app in the App Center and examples on GitHub.

If you aren’t a customer yet, you can try our 30-day free trial to check out these features.

You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!