Design a Temperature Monitor Like a Pro Using WinUI Radial Gauge

Jollen Moyani - Nov 24 '22 - - Dev Community

The Syncfusion WinUI Radial Gauge is used to display numerical values on a circular scale. It is a multipurpose data visualization control with a rich feature set.

In a previous blog, we saw how to design a sleep tracker using the WinUI Radial Gauge control. This time, we are going to design a temperature monitor using it.

Designing a Temperature Monitor Using WinUI Radial Gauge

Designing a Temperature Monitor Using WinUI Radial Gauge

Features of Radial Gauge

To create a temperature monitor, we are going to use the following features of the WinUI Radial Gauge control:

  • Axes to display the temperature from minimum to maximum values with specific intervals on the radial scale along with labels and ticks.
  • Range to indicate the temperature range. We can also add multiple ranges to indicate satisfactory and dangerous temperature levels. The range appearance is customizable with gradient colors.
  • Pointer to point to the current value in the temperature scale.
  • Annotation to represent the unit of temperature provided in the radial scale.

Steps to design a temperature monitor using WinUI Radial Gauge

Step 1: Create a simple radial gauge

First, refer to the WinUI Radial Gauge control documentation to create a new WinUI application and include the Radial Gauge control in it.

<gauge:SfRadialGauge>
 <gauge:SfRadialGauge.Axes>
  <gauge:RadialAxis>
  </gauge:RadialAxis>
 </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
Enter fullscreen mode Exit fullscreen mode

The gauge elements, such as axes, ranges, pointers, and annotations, are arranged relatively using the custom position option to make the gauge responsive in all window sizes.

Step 2: Design a temperature scale

Let’s design a temperature scale to display the temperature range. To achieve this, initialize a radial axis and add it to the Axes collection.

The radial axis helps us display a scale that represents the temperature values in axis labels from minimum to maximum values with a predefined interval.

Use the radial axis’s Minimum and Maximum properties to define the minimum and maximum values of the temperature scale. Then, use the radial axis’s Interval property to control the scale interval.

To customize the temperature scale’s start and end positions, use the StartAngle and EndAngle properties of the radial axis.

Refer to the following code example.

<gauge:SfRadialGauge.Axes>
 <gauge:RadialAxis Minimum="-60"
                   Maximum="120"
                   Interval="20"
                   StartAngle="115"
                   EndAngle="65">
 </gauge:RadialAxis>
</gauge:SfRadialGauge.Axes>
Enter fullscreen mode Exit fullscreen mode

Designing the Temperature Monitor Scale Using the WinUI Radial Gauge

Designing the Temperature Monitor Scale Using the WinUI Radial Gauge

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

In this demo, the following properties of the radial axis are used to design the temperature scale:

  • MinorTicksPerInterval: To specify the number of minor ticks per interval.
  • MajorTickStyle: To customize the appearance of major ticks corresponding to the temperature scale labels.
  • MinorTickStyle: To customize the appearance of minor ticks that occur between the axis labels.
  • TickPosition: To place the major and minor ticks either inside or outside the axis line.
  • LabelPosition: To place the axis labels either inside or outside the axis line.
  • RadiusFactor: To customize the size of the radial axis.

Refer to the following code example.

<gauge:RadialAxis Minimum="-60"
                  Maximum="120"
                  Interval="20"
                  StartAngle="115"
                  EndAngle="65"
                  TickPosition="Outside"
                  LabelPosition="Outside"
                  MinorTicksPerInterval="5"
                  AxisLineWidthUnit="Factor"
                  AxisLineWidth="0.1"
                  TickLengthUnit="Factor"
                  MajorTickLength="0.1"
                  MinorTickLength="0.05">

 <gauge:RadialAxis.LabelTemplate>
  <DataTemplate>
   <TextBlock Text="{Binding Text}"
              FontWeight="SemiBold"
              FontSize="16" />
  </DataTemplate>
 </gauge:RadialAxis.LabelTemplate>
</gauge:RadialAxis>
Enter fullscreen mode Exit fullscreen mode

Ticks and Labels Placed Outside the Axis Line in the Temperature Monitor Scale

Ticks and Labels Placed Outside the Axis Line in the Temperature Monitor Scale

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

Step 3: Add temperature range indicator

Now, add the temperature range indicator to indicate the severity of the temperature.

We can achieve this either by adding a single range with gradient colors or by adding multiple ranges to the Ranges collection property of the radial axis.

In this demo, we are going to add a single Range using the GradientStops property to indicate the severity of the temperature. In our gauge:

  • Green indicates the low temperature range.
  • Yellow indicates the moderate temperature range.
  • Red indicates the high temperature range.

You can control the start and the end values of the range using the StartValue and EndValue properties, respectively. To customize the range width and color, use the width and GradientStops properties, respectively.

<gauge:RadialAxis.Ranges>
 <gauge:GaugeRange StartValue="-60"
                   EndValue="120"
                   StartWidth="0.1"
                   EndWidth="0.1"
                   WidthUnit="Factor">
   <gauge:GaugeRange.GradientStops>
    <gauge:GaugeGradientStop Value="-24"
                             Color="#FF00AB47" />
    <gauge:GaugeGradientStop Value="30"
                             Color="#FFFFBA00" />
    <gauge:GaugeGradientStop Value="75"
                             Color="#FFFE2A25" />
   </gauge:GaugeRange.GradientStops>
 </gauge:GaugeRange>
</gauge:RadialAxis.Ranges>
Enter fullscreen mode Exit fullscreen mode

Gradient Colors Added to the Temperature Monitor

Gradient Colors Added to the Temperature Monitor

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

Step 4: Add a needle pointer to indicate the current temperature value

Now, add a NeedlePointer to the Pointers collection of the radial axis to indicate the current temperature value.

Also, we are going to customize the appearance of the needle pointer with the following properties:

Refer to the following code example.

<gauge:RadialAxis.Pointers>
 <gauge:NeedlePointer Value=”60”
                      NeedleFill=”Black”
                      NeedleLengthUnit=”Factor”
                      NeedleLength=”0.68”
                      NeedleStartWidth=”2”
                      NeedleEndWidth=”20”
                      TailLengthUnit=”Factor”
                      TailLength=”0.18”
                      TailWidth=”20”
                      TailFill=”Black”
                      KnobSizeUnit=”Factor”
                      KnobRadius=”0.07”
                      KnobFill=”White”
                      KnobStroke=”Black”
                      KnobStrokeThickness=”0.05” />
</gauge:RadialAxis.Pointers>
Enter fullscreen mode Exit fullscreen mode

Added a Needle Pointer to the WinUI Temperature Monitor

Added a Needle Pointer to the WinUI Temperature Monitor

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

Step 5: Annotate the temperature unit

You can use the annotation feature in the WinUI Radial Gauge to indicate whether the temperature unit is Fahrenheit (°F) or Celsius (°C).

Adding a Fahrenheit scale

Refer to the following code example. In our example, we are going to show the temperature unit in Fahrenheit (°F) . The text block will display the current unit. This text is set to the text block’s Text property and placed in the desired location using the PositionFactor, DirectionUnit, and DirectionValue properties of the gauge annotation.

<gauge:RadialAxis.Annotations>
 <gauge:GaugeAnnotation PositionFactor="0.8"
                        DirectionUnit="AxisValue"
                        DirectionValue="90">
  <gauge:GaugeAnnotation.Content>
   <Grid>
    <TextBlock Text="°F"
               FontWeight="Bold"
               FontSize="20" />
   </Grid>
  </gauge:GaugeAnnotation.Content>
 </gauge:GaugeAnnotation>
</gauge:RadialAxis.Annotations>
Enter fullscreen mode Exit fullscreen mode

Annotating Temperature Unit in Fahrenheit °F

Annotating Temperature Unit in Fahrenheit °F

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

Add a Celsius scale

In the above example, we designed the scale to display the temperature value in Fahrenheit. Now let’s see how to add a temperature scale in Celsius (°C).

First, initialize a radial axis and insert it at the zero index of the Axes collection so that the needle pointer of the previous axis will be rendered on the top of this axis.

For the Celsius scale, we are going to use the BackgroundContent property to add an image as the background of the radial axis. Refer to the following code example.

<gauge:RadialAxis.BackgroundContent>
 <Image Source="light_frame.png" />
</gauge:RadialAxis.BackgroundContent>
Enter fullscreen mode Exit fullscreen mode

You can also customize the appearance of the temperature scale (°C) by using the various properties of the radial axis as shown in the following code example.

<Grid.Resources>
 <Style x:Key="MajorTickStyle"
          TargetType="Line">
  <Setter Property="StrokeThickness"
          Value="1.5" />
 </Style>
  <Style x:Key="MinorTickStyle"
           TargetType="Line">
   <Setter Property="StrokeThickness"
           Value="1" />
  </Style>
 </Grid.Resources>

<gauge:RadialAxis Minimum="-50"
                  Maximum="50"
                  Interval="10"
                  RadiusFactor="0.5"
                  AxisLineWidthUnit="Factor"
                  AxisLineWidth="0.015"
                  UseRangeColorForAxis="True"
                  MinorTicksPerInterval="1"
                  MinorTickStyle="{StaticResource MinorTickStyle}"
                  MajorTickStyle="{StaticResource MajorTickStyle}">
</gauge:RadialAxis>
Enter fullscreen mode Exit fullscreen mode

Refer to the following image.

Customizing the Celsius Scale in the Temperature Monitor

Customizing the Celsius Scale in the Temperature Monitor

As in the temperature scale in Fahrenheit, we are going to add ranges in the Celsius axis, too, to indicate the severity of the measured temperature.

In this axis, set the individual range color to the corresponding ticks and axis labels using the UseRangeColorForAxis property of the radial axis.

<gauge:RadialAxis UseRangeColorForAxis="True">
 <gauge:RadialAxis.Ranges>
  <gauge:GaugeRange StartValue="-50"
                    EndValue="-20"
                    Background="#FF00AB47"
                    StartWidth="0.015"
                    EndWidth="0.015"
                    WidthUnit="Factor" />
   <gauge:GaugeRange StartValue="-20"
                     EndValue="20"
                     Background="#FFFFBA00"
                     StartWidth="0.015"
                     EndWidth="0.015"
                     WidthUnit="Factor" />
   <gauge:GaugeRange StartValue="20"
                     EndValue="50"
                     Background="#FFFE2A25"
                     StartWidth="0.015"
                     EndWidth="0.015"
                     WidthUnit="Factor" />
 </gauge:RadialAxis.Ranges>
</gauge:RadialAxis>
Enter fullscreen mode Exit fullscreen mode

Setting Individual Range Colors to the Corresponding Ticks and Axis Labels to the Celsius Scale (°C)

Setting Individual Range Colors to the Corresponding Ticks and Axis Labels to the Celsius Scale (°C)

As with the previous axis, add an annotation to display the temperature unit in °C on the inside axis. Refer to the following image.

Temperature Monitor Displaying Both Fahrenheit and Celsius in WinUI

Temperature Monitor Displaying Both Fahrenheit and Celsius in WinUI

Now our temperature monitor design is done!

GitHub reference

For more details, refer to the code repository for designing a temperature monitor using WinUI Radial Gauge on GitHub.

Conclusion

Thanks for reading! In this blog, we have learned how easy it is to design a temperature monitor 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.

Check out the complete user guide of our Radial Gauge control and see our other WinUI samples in this GitHub location. Additionally, you can check out our demo app in the App Center.

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

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!

Related blogs

Image
Effective Cross-Team Communication: Breaking Down Barriers

softwaredevelopment, career, productivity, learning
Image
Yok Cari kabar Dahulu Beberapa ciri Agen Judi Online Asli yang Layak Menerepkannya
Image
What Can A Weekly Folding Transport Wheelchair Project Can Change Your Life
Image
Manycam Pro 8.3.0.9 Crack With Activation Code [Latest 2024]
Image
10 Tips For 2 Seater Chaise That Are Unexpected
Image
Enhancing User Experience with Voice User Interface Best Practices

ai, chatgpt, voicebot, voiceui
Image
Cat Flap Installation Cost
Image
Why We Love Bi Fold Door Repair (And You Should, Too!)
Image
7 Simple Changes That Will Make The Biggest Difference In Your Patio Electric Heater
Image
¿Cómo llamar a Iberia desde 𝐌é𝐱𝐢𝐜𝐨 [TELEFONO]
Image
Tenorshare 4MeKey 4.2.3 Crack License Key Fre Download [2025]
Image
Connect

codepen
Image
Holiverse Launches a Metaverse for Personalized Medicine and Cosmetics

holiverse, ladookhotnikov, holichain, metaverse
Image
Chiradeep Dutta Gupta

webdev, javascript, beginners, startup
Image
Przemień Swoje Wnętrza: Kreatywne Inspiracje Aranżacji dla Każdego Domu
Image
Advanced SystemCare Pro Crack Lifetime License Key Download
Image
Gérer le Stress et Prévenir le Burnout en Tant que Développeur

productivity, growing, python, django
Image
Berapakah Modal Sedikitnya untuk Main Judi Online?
Image
CorelDraw X7 Crack + Keygen Fre Download [Latest Update] 2025
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .