Design a Temperature Monitor Like a Pro Using WinUI Radial Gauge
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (172).NET Core  (29).NET MAUI  (192)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (209)BoldSign  (12)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (63)Flutter  (131)JavaScript  (219)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (882)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (49)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (125)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (613)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (37)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (488)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (41)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (368)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (30)Visual Studio Code  (17)Web  (577)What's new  (313)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Design a Temperature Monitor Like a Pro Using WinUI Radial Gauge

Design a Temperature Monitor Like a Pro Using WinUI Radial Gauge

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>

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>
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>
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>
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>
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>
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>

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>

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>
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 Scales 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 (CoreMVCWeb Forms), JavaScriptAngularReactVue, .NET MAUI, XamarinFlutterUWPWinForms, 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

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed
Scroll To Top