Easily Design a Sleep Tracker Using WinUI Radial Gauge
Tags: csharp, dotnet, desktop, winui
Published: 2022-11-16 11:47:41

---
title: Easily Design a Sleep Tracker Using WinUI Radial Gauge
published: true
date: 2022-11-14 11:52:26 UTC
tags: csharp, dotnet, desktop, winui
canonical_url: https://www.syncfusion.com/blogs/post/design-a-sleep-tracker-using-winui-radial-gauge.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mb3dcrrzm9kwlo53n77u.png---

The Syncfusion [WinUI Radial Gauge control](https://www.syncfusion.com/winui-controls/radial-gauge "WinUI Radial Gauge") 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.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Designing-a-Sleep-Tracker-Using-WinUI-Radial-Gauge.png" alt="Designing a Sleep Tracker Using WinUI Radial Gauge" style="width:100%">

  <figcaption>Designing a Sleep Tracker Using WinUI Radial Gauge</figcaption>

</figure>

## Basic requirements

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

- [**Axes**](https://help.syncfusion.com/winui/radial-gauge/axes "Axis in WinUI Radial Gauge Documentation"): To display the tracker range from its [minimum ](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_Minimum "Minimum property of WinUI Radial Gauge Axis")to [maximum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_Maximum "Maximum property of WinUI Radial Gauge Axis") values with specific [intervals](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_Interval "Interval property of WinUI Radial Gauge Axis") on the radial scale along with [labels](https://help.syncfusion.com/winui/radial-gauge/axes#axis-label-customization "Axis label customization Documentation") and [ticks](https://help.syncfusion.com/winui/radial-gauge/axes#tick-customization "Tick customization in WinUI Radial Gauge Axis documentation").
- [**Range**](https://help.syncfusion.com/winui/radial-gauge/ranges "Range in WinUI Radial Gauge Documentation"): To highlight the sleeping hours’ start and end range.
- [**Pointer**](https://help.syncfusion.com/winui/radial-gauge/pointers "Pointers in WinUI Radial Gauge Documanetation"): To point to the current sleeping time start and end values on the tracker scale.
- [**Annotation**](https://help.syncfusion.com/winui/radial-gauge/annotation "Annotation in WinUI Radial Gauge Documentation") **:** 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](https://help.syncfusion.com/winui/radial-gauge/overview "WinUI Radial Gauge: Overview") to get started.

```xml
<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](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.RadialAxis.html "RadialAxis Class of WinUI Radial Gauge") and add it to the [Axes](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.SfRadialGauge.html#Syncfusion_UI_Xaml_Gauges_SfRadialGauge_Axes "Axes property of WinUI Radial Gauge") 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](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_Minimum "Minimum property of WinUI Radial Gauge Axis") and [Maximum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_Maximum "Maximum property of WinUI Radial Gauge Axis") properties of the radial axis to define the start and end hour values of the tracker scale. The [Interval](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_Interval "Interval property of WinUI Radial Gauge Axis") property of the radial axis is used to control the scale interval.

To display the tracker scale as a full circle, use the [StartAngle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.RadialAxis.html#Syncfusion_UI_Xaml_Gauges_RadialAxis_StartAngle "StartAngle property of WinUI Radial Gauge Axis") and [EndAngle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.RadialAxis.html#Syncfusion_UI_Xaml_Gauges_RadialAxis_EndAngle "EndAngle property of WinUI Radial Gauge Axis") properties of the radial axis. Refer to the following code example.

```xml
<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>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Designing-the-Sleep-Tracker-Scale-Using-WinUI-Radial-Gauge.png" alt="Designing the Sleep Tracker Scale Using WinUI Radial Gauge" style="width:100%">

  <figcaption>Designing the Sleep Tracker Scale Using WinUI Radial Gauge</figcaption>

</figure>

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](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_MinorTicksPerInterval "MinorTicksPerInterval property of WinUI Radial Gauge Axis"): To customize the number of minor ticks per interval.
- [ShowLastLabel:](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.RadialAxis.html#Syncfusion_UI_Xaml_Gauges_RadialAxis_ShowLastLabel "ShowLastLabel property of WinUI Radial Gauge Axis") To show or hide the last label in the axis.
- [AxisLineFill:](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_AxisLineFill "AxisLineFill property of WinUI Radial Gauge Axis") To customize the axis line fill color.
- [AxisLineWidthUnit:](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_AxisLineWidthUnit "AxisLineWidthUnit property of WinUI Radial Gauge Axis") To specify the axis line width in pixel or factor value.
- [AxisLineWidth:](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_AxisLineWidth "AxisLineWidth property of WinUI Radial Gauge Axis") To customize the axis line width.

**Note:** For more details, refer to the [axis support in the WinUI Radial Gauge](https://help.syncfusion.com/winui/radial-gauge/axes "Axis in WinUI Radial Gauge Documentation")

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

Once the tracker scale design is complete, add a [ContentPointer](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.ContentPointer.html "ContentPointer Class of WinUI Radial Gauge") to the [Pointers](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_Pointers "Pointers property of WinUI Radial Gauge") collection of the radial axis to indicate the start and end values.

In **ContentPointer** , you can host views as [Content](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.ContentPointer.html#Syncfusion_UI_Xaml_Gauges_ContentPointer_Content "Content property of WinUI Radial Gauge"). In this demo, we have used the sun and moon font icons to show the start and end values.

```xml
<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>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Adding-Pointers-to-the-Sleep-Tracker-Using-WinUI-Radial-Gauge.png" alt="Adding Pointers to the Sleep Tracker Using WinUI Radial Gauge" style="width:100%">

  <figcaption>Adding Pointers to the Sleep Tracker Using WinUI Radial Gauge</figcaption>

</figure>

**Note:** For more details, refer to the [Pointers in WinUI Radial Gauge documentation](https://help.syncfusion.com/winui/radial-gauge/pointers "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](https://help.syncfusion.com/winui/radial-gauge/ranges "Range in WinUI Radial Gauge Documentation") 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](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeRange.html#Syncfusion_UI_Xaml_Gauges_GaugeRange_StartValue "StartValue property of WinUI Radial Gauge Range") and [EndValue](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeRange.html#Syncfusion_UI_Xaml_Gauges_GaugeRange_EndValue "EndValue property of WinUI Radial Gauge Range") properties to specify the start and end values of the range. Also, you can customize the width of a range using the [StartWidth](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeRange.html#Syncfusion_UI_Xaml_Gauges_GaugeRange_StartWidth "StartWidth property of WinUI Radial Gauge Range") and [EndWidth](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeRange.html#Syncfusion_UI_Xaml_Gauges_GaugeRange_EndWidth "EndWidth property of WinUI Radial Gauge Range") properties.

Refer to the following code example.

```xml
<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>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Adding-a-Range-to-the-Sleep-Tracker.png" alt="Adding a Range to the Sleep Tracker" style="width:100%">

  <figcaption>Adding a Range to the Sleep Tracker</figcaption>

</figure>

**Note:** For more details, refer to the [Ranges in WinUI Radial Gauge](https://help.syncfusion.com/winui/radial-gauge/ranges "Ranges in WinUI Radial Gauge Documentation") documentation.

### Step #5: Annotate start and end values

Here, we are going to use [gauge annotation](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html "GaugeAnnotation Class of WinUI Radial Gauge") 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](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_PositionFactor "PositionFactor property of WinUI Radial Gauge Annotation"), [DirectionUnit](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_DirectionUnit "DirectionUnit property of WinUI Radial Gauge Annotation"), and [DirectionValue](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_DirectionValue "DirectionValue property of WinUI Radial Gauge Annotation") properties of the gauge annotation.

```xml
<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>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Adding-Annotations-to-the-Sleep-Tracker.png" alt="Adding Annotations to the Sleep Tracker" style="width:100%">

  <figcaption>Adding Annotations to the Sleep Tracker</figcaption>

</figure>

**Note:** For more details, refer to the documentation on [annotations support in WinUI Radial Gauge](https://help.syncfusion.com/winui/radial-gauge/annotation "Annotation in WinUI Radial Gauge Documentation")

At the app level, you can add a storyboard to animate the content pointers and annotation while interacting with them using the [ValueChangeStarted](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugePointer.html#Syncfusion_UI_Xaml_Gauges_GaugePointer_ValueChangeStarted "ValueChangeStarted event of WinUI Radial Gauge Pointer"), [ValueChanging](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugePointer.html#Syncfusion_UI_Xaml_Gauges_GaugePointer_ValueChanging "ValueChanging event of WinUI Radial Gauge Pointer"), and [ValueChangeCompleted](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugePointer.html#Syncfusion_UI_Xaml_Gauges_GaugePointer_ValueChangeCompleted "ValueChangeCompleted event of WinUI Radial Gauge Pointer") events of the pointer.

**Note:** For more details, refer to the [example for pointer and annotation animation in WinUI Radial Gauge on GitHub](https://github.com/SyncfusionExamples/How-to-design-a-sleep-tracker-using-WinUI-Radial-Gauge-Control/blob/master/SleepTracker/MainWindow.xaml.cs "Example for pointer and annotation animation in WinUI Radial Gauge on GitHub").
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Designing-a-Sleep-Tracker-Using-the-WinUI-Radial-Gauge.gif" alt="Designing a Sleep Tracker Using the WinUI Radial Gauge" style="width:100%">

  <figcaption>Designing a Sleep Tracker Using the WinUI Radial Gauge</figcaption>

</figure>

## GitHub reference

For more details, refer to the complete code example for [Designing a Sleep Tracker using WinUI Radial Gauge on GitHub](https://github.com/SyncfusionExamples/How-to-design-a-sleep-tracker-using-WinUI-Radial-Gauge-Control "Design a sleep tracker using WinUI Radial Gauge demo 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](https://www.syncfusion.com/winui-controls/radial-gauge "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](https://www.syncfusion.com/blazor-components/blazor-circular-gauge "Blazor Circular Gauge"), ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/circular-gauge "ASP.NET CORE Circular Gauge"), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/circular-gauge "ASP.NET MVC Circular Gauge"), [Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/circular-gauge "ASP.NET Web Forms Circular Gauge Control")), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-circular-gauge "JavaScript Circular Gauge"), [Angular](https://www.syncfusion.com/angular-ui-components/angular-circular-gauge "Angular Circular Gauge"), [React](https://www.syncfusion.com/react-ui-components/react-circular-gauge "React Circular Gauge Chart Component"), [Vue](https://www.syncfusion.com/vue-ui-components/vue-circular-gauge "Vue Circular Gauge Chart Control"),[.NET MAUI](https://www.syncfusion.com/maui-controls/maui-radial-gauge ".NET MAUI Radial Gauge"), [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-circular-gauge "Xamarin Circular Gauge"), [Flutter](https://www.syncfusion.com/flutter-widgets/flutter-radial-gauge "Flutter Radial Gauge"), [UWP](https://www.syncfusion.com/uwp-ui-controls/radial-gauge "UWP Radial Gauge Control"), [WinForms](https://www.syncfusion.com/winforms-ui-controls/radial-gauge "WinForms Radial Gauge Control"), and [WPF](https://www.syncfusion.com/wpf-controls/radial-gauge "WPF Radial Gauge Control") platforms.

Additionally, you can check out our [demo app in the App Center](https://install.appcenter.ms/orgs/syncfusion-demos/apps/winui-demos/distribution_groups/release "Syncfusion WinUI Demos on the App Center") and examples on [GitHub](https://github.com/syncfusion/winui-demos/tree/master/radialgauge "Syncfusion WinUI Radial Gauge demos on GitHub").

If you aren’t a customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out these features.

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/winui "Syncfusion Feedback Portal"). We are always happy to assist you!