Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (161).NET Core  (29).NET MAUI  (64)Angular  (74)ASP.NET  (50)ASP.NET Core  (79)ASP.NET MVC  (88)Azure  (36)Blazor  (153)DocIO  (23)Essential JS 2  (86)Essential Studio  (174)File Formats  (29)Flutter  (123)JavaScript  (187)Microsoft  (113)PDF  (67)React  (62)Succinctly series  (128)Syncfusion  (611)TypeScript  (32)Uno Platform  (3)UWP  (4)Vue  (40)Webinar  (35)Windows Forms  (59)WinUI  (52)WPF  (138)Xamarin  (156)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (5)Build conference  (6)Business intelligence  (54)Button  (4)C#  (120)Chart  (57)Cloud  (12)Company  (445)Dashboard  (8)Data Science  (3)Data Validation  (6)DataGrid  (55)Development  (402)Doc  (7)DockingManager  (1)eBook  (96)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (23)Extensions  (18)File Manager  (4)Gantt  (11)Gauge  (11)Git  (4)Grid  (28)HTML  (11)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (313)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (30)Performance  (9)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (36)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (23)Solution Services  (3)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (92)UI  (225)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (23)Visual Studio Code  (17)Web  (377)What's new  (213)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Easily Design a Sleep Tracker Using WinUI Radial Gauge

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.

Designing a Sleep Tracker Using WinUI Radial Gauge
Designing a Sleep Tracker Using WinUI Radial Gauge

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>
Designing the Sleep Tracker Scale Using WinUI Radial Gauge
Designing the Sleep Tracker Scale Using WinUI Radial Gauge

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.

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>
Adding Pointers to the Sleep Tracker Using WinUI Radial Gauge
Adding Pointers to the Sleep Tracker Using WinUI Radial Gauge

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>
Adding a Range to the Sleep Tracker
Adding a Range to the Sleep Tracker

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>
Adding Annotations to the Sleep Tracker
Adding Annotations to the Sleep Tracker

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.

Designing a Sleep Tracker Using the WinUI Radial Gauge
Designing a Sleep Tracker Using the WinUI Radial Gauge

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 (CoreMVCWeb Forms), JavaScriptAngular, ReactVue, .NET MAUI, XamarinFlutterUWPWinForms, 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 forumssupport portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top