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
A Productive Rant About Lost Car Key Service
Image
Mastering SQL Optimization: A Beginner’s Guide to Faster and More Efficient Queries

sqlserver, sql, database, datascience
Image
Setfill va setw haqida

beginners, basic
Image
Turn Your Website into a Lead Generation Machine (Proudly Open Source ❤️)
Image
7 Little Changes That Will Make An Enormous Difference To Your Causes Of Mesothelioma Other Than Asbestos
Image
Create an Engaging WooCommerce Product Catalog

wordpress, webdev, website, woocommerce
Image
🐕🚀📈 Will Shiba Inu Price Hit ATH Before Year End?
Image
🚀📈💥 Ripple Activity Surges to 6-Month High: Is XRP’s Rally Coming?
Image
🚀📉💥 Solana’s Bull Run Halts with 3-Month High Liquidations After 7% Price Drop
Image
🚀📈💰 Why Analyst Predicts XRP Price Could Hit $95 Soon?
Image
🐋📉⚠️ Ethereum Whales Target the Dip, But Here’s Why ETH Can Slide to $2.3K
Image
🚀📈💰 Is Cardano Price on Track to Hit $1 In November?
Image
📉 Why Did The Bitcoin And Ethereum Price Crash?
Image
📈 Can SUI repeat its 360% surge after recent 13% loss?
Image
How can I get a refund from Paytm for a wrong transaction?

webdev, tutorial
Image
🚀📈💰 Bitcoin Price To Go ‘Vertical’ Towards $200,000 As Crypto Analyst Points Out Massive Cup And Handle Pattern
Image
💸📉🌍 Worldcoin Investors Lose $5.58 Billion in Profits as Price Falls 18%
Image
🚀📊💰 TRON’s Large Transactions Hit 2-Month High – More Gains for $TRX ?
Image
🐋💰📈 Ethereum Whale Activity Spikes To 6-Week High – Smart Money Accumulation?
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .