Design a Temperature Monitor Like a Pro Using WinUI Radial Gauge
Tags: csharp, dotnet, winui, desktop
Published: 2022-11-24 13:28:29

---
title: Design a Temperature Monitor Like a Pro Using WinUI Radial Gauge
published: true
date: 2022-11-24 11:04:57 UTC
tags: csharp, dotnet, winui, desktop
canonical_url: https://www.syncfusion.com/blogs/post/temperature-monitor-winui-radial-gauge.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/guo3gguwjcjbaoxrgw57.png
---

The Syncfusion [WinUI Radial Gauge](https://www.syncfusion.com/winui-controls/radial-gauge "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](https://www.syncfusion.com/blogs/post/design-a-sleep-tracker-using-winui-radial-gauge.aspx "Blog: Easily Design a Sleep Tracker Using WinUI Radial Gauge") using the WinUI Radial Gauge control. This time, we are going to design a temperature monitor using it.
<figure>

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

  <figcaption>Designing a Temperature Monitor Using WinUI Radial Gauge</figcaption>

</figure>
## Features of Radial Gauge

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

- [Axes](https://help.syncfusion.com/winui/radial-gauge/axes "Axis in WinUI Radial Gauge") to display the temperature from [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 in WinUI Radial Gauge") and [ticks](https://help.syncfusion.com/winui/radial-gauge/axes#tick-customization "Tick customization in WinUI Radial Gauge").
- [Range](https://help.syncfusion.com/winui/radial-gauge/ranges "Range in WinUI Radial Gauge") 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](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeRange.html#Syncfusion_UI_Xaml_Gauges_GaugeRange_GradientStops "GradientStops property of WinUI Radial Gauge").
- [Pointer](https://help.syncfusion.com/winui/radial-gauge/pointers "Pointers in WinUI Radial Gauge") to point to the current value in the temperature scale.
- [Annotation](https://help.syncfusion.com/winui/radial-gauge/annotation "Annotation in WinUI Radial Gauge") 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 ](https://help.syncfusion.com/winui/radial-gauge/overview "Overview of WinUI Radial Gauge control")to create a new WinUI application and include the Radial Gauge control in it.

```xml
<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](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 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](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 to define the minimum and maximum values of the temperature scale. Then, use the radial axis’s [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 to control the scale interval.

To customize the temperature scale’s start and end positions, 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:SfRadialGauge.Axes>
 <gauge:RadialAxis Minimum="-60"
                   Maximum="120"
                   Interval="20"
                   StartAngle="115"
                   EndAngle="65">
 </gauge:RadialAxis>
</gauge:SfRadialGauge.Axes>
```
<figure>

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

  <figcaption>Designing the Temperature Monitor Scale Using the WinUI Radial Gauge</figcaption>

</figure>

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](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 specify the number of minor ticks per interval.
- [MajorTickStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_MajorTickStyle "MajorTickStyle property of WinUI Radial Gauge Axis"): To customize the appearance of major ticks corresponding to the temperature scale labels.
- [MinorTickStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_MinorTickStyle "MinorTickStyle property of WinUI Radial Gauge Axis"): To customize the appearance of minor ticks that occur between the axis labels.
- [TickPosition](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_TickPosition "TickPosition property of WinUI Radial Gauge Axis"): To place the major and minor ticks either inside or outside the axis line.
- [LabelPosition](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_LabelPosition "LabelPosition property of WinUI Radial Gauge Axis"): To place the axis labels either inside or outside the axis line.
- [RadiusFactor](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.RadialAxis.html#Syncfusion_UI_Xaml_Gauges_RadialAxis_RadiusFactor "RadiusFactor property of WinUI Radial Gauge Axis"): To customize the size of the radial axis.

Refer to the following code example.

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

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Ticks-and-Labels-Placed-Outside-the-Axis-Line-in-the-Temperature-Monitor-Scale.png" alt="Ticks and Labels Placed Outside the Axis Line in the Temperature Monitor Scale" style="width:100%">

  <figcaption>Ticks and Labels Placed Outside the Axis Line in the Temperature Monitor Scale</figcaption>

</figure>
**Note:** For more details, refer to the [axis support in WinUI Radial Gauge](https://help.syncfusion.com/winui/radial-gauge/axes "Axis 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](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_Ranges "Ranges property of WinUI Radial Gauge Axis") collection property of the radial axis.

In this demo, we are going to add a single [Range](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeRange.html "GaugeRange Class of WinUI Radial Gauge") using the [GradientStops](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeRange.html#Syncfusion_UI_Xaml_Gauges_GaugeRange_GradientStops "GradientStops property of WinUI Radial Gauge") 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](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, respectively. To customize the range width and color, use the [width](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeRange.html#Syncfusion_UI_Xaml_Gauges_GaugeRange_WidthUnit "WidthUnit property of WinUI Radial Gauge Range") and [GradientStops](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeRange.html#Syncfusion_UI_Xaml_Gauges_GaugeRange_GradientStops "GradientStops property of WinUI Radial Gauge") properties, respectively.

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

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Gradient-Colors-Added-to-the-Temperature-Monitor.png" alt="Gradient Colors Added to the Temperature Monitor" style="width:100%">

  <figcaption>Gradient Colors Added to the Temperature Monitor</figcaption>

</figure>
**Note:** For more details, refer to the [range support in WinUI Radial Gauge](https://help.syncfusion.com/winui/radial-gauge/ranges "Range support in WinUI Radial Gauge") documentation.

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

Now, add a [NeedlePointer](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.NeedlePointer.html "NeedlePointer 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 Axis") 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:

- [NeedleFill](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.NeedlePointer.html#Syncfusion_UI_Xaml_Gauges_NeedlePointer_NeedleFill "NeedleFill property of WinUI Radial Gauge Pointer"): Customizes the needle color.
- [TailFill,](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.NeedlePointer.html#Syncfusion_UI_Xaml_Gauges_NeedlePointer_TailFill "TailFill property of WinUI Radial Gauge Pointer") [TailLength](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.NeedlePointer.html#Syncfusion_UI_Xaml_Gauges_NeedlePointer_TailLength "TailLength property of WinUI Radial Gauge Pointer"), and [TailWidth](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.NeedlePointer.html#Syncfusion_UI_Xaml_Gauges_NeedlePointer_TailWidth "TailWidth property of WinUI Radial Gauge Pointer"): Customize the appearance of the needle tail.
- [KnobRadius,](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.NeedlePointer.html#Syncfusion_UI_Xaml_Gauges_NeedlePointer_KnobRadius "KnobRadius property of WinUI Radial Gauge Pointer") [KnobFill](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.NeedlePointer.html#Syncfusion_UI_Xaml_Gauges_NeedlePointer_KnobFill "KnobFill property of WinUI Radial Gauge Pointer"), [KnobStroke](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.NeedlePointer.html#Syncfusion_UI_Xaml_Gauges_NeedlePointer_KnobStroke "KnobStroke property of WinUI Radial Gauge Pointer"), and [KnobStrokeThickness](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.NeedlePointer.html#Syncfusion_UI_Xaml_Gauges_NeedlePointer_KnobStrokeThickness "KnobStrokeThickness property of WinUI Radial Gauge Pointer"): Customize the knob appearance.
- [NeedleLength](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.NeedlePointer.html#Syncfusion_UI_Xaml_Gauges_NeedlePointer_NeedleLength "NeedleLength property of WinUI Radial Gauge Pointer"): Customizes the needle length.
- [NeedleStartWidth](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.NeedlePointer.html#Syncfusion_UI_Xaml_Gauges_NeedlePointer_NeedleStartWidth "NeedleStartWidth property of WinUI Radial Gauge Pointer"): Customizes the start width of the needle.
- [NeedleEndWidth](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.NeedlePointer.html#Syncfusion_UI_Xaml_Gauges_NeedlePointer_NeedleEndWidth "NeedleEndWidth property of WinUI Radial Gauge Pointer"): Customizes the end width of the needle

Refer to the following code example.

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

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Added-a-Needle-Pointer-to-the-WinUI-Temperature-Monitor.png" alt="Added a Needle Pointer to the WinUI Temperature Monitor" style="width:100%">

  <figcaption>Added a Needle Pointer to the WinUI Temperature Monitor</figcaption>

</figure>
**Note:** For more details, refer to the [pointers in WinUI Radial Gauge](https://help.syncfusion.com/winui/radial-gauge/pointers "Pointers in WinUI Radial Gauge") documentation.

### Step 5: Annotate the temperature unit

You can use the [annotation](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html "GaugeAnnotation class of WinUI Radial Gauge") 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](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_PositionFactor "PositionFactor property of 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 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 of WinUI Radial Gauge Annotation") properties of the gauge annotation.

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

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Annotating-Temperature-Unit-in-Fahrenheit-%C2%B0F-1.png" alt="Annotating Temperature Unit in Fahrenheit °F" style="width:100%">

  <figcaption>Annotating Temperature Unit in Fahrenheit °F</figcaption>

</figure>
**Note:** For more details, refer to the [annotation in WinUI Radial Gauge](https://help.syncfusion.com/winui/radial-gauge/annotation "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](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.RadialAxis.html "RadialAxis class of WinUI Radial Gauge") and insert it at the zero index of 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 so that the [needle pointer](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.NeedlePointer.html "NeedlePointer class of WinUI Radial Gauge") of the previous axis will be rendered on the top of this axis.

For the Celsius scale, we are going to use the [BackgroundContent](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.RadialAxis.html#Syncfusion_UI_Xaml_Gauges_RadialAxis_BackgroundContent "BackgroundContent property of WinUI Radial Gauge Axis") property to [add an image as the background of the radial axis](https://www.syncfusion.com/kb/13603/how-to-add-an-image-as-a-background-of-winui-radial-gauge-control-sfradialgauge "How to add an image as a background of WinUI Radial Gauge control?"). Refer to the following code example.

```xml
<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](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.RadialAxis.html "RadialAxis class of WinUI Radial Gauge") as shown in the following code example.

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

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Customizing-the-Celsius-Scale-in-the-Temperature-Monitor.png" alt="Customizing the Celsius Scale in the Temperature Monitor" style="width:100%">

  <figcaption>Customizing the Celsius Scale in the Temperature Monitor</figcaption>

</figure>
As in the temperature scale in Fahrenheit, we are going to add [ranges](https://help.syncfusion.com/winui/radial-gauge/ranges "Range in WinUI Radial Gauge") 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 ](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_UseRangeColorForAxis "UseRangeColorForAxis property of WinUI Radial Gauge Axis")property of the radial axis.

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

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Setting-Individual-Range-Colors-to-the-Corresponding-Ticks-and-Axis-Labels-to-the-Celsius-Scale-%C2%B0C.png" alt="Setting Individual Range Colors to the Corresponding Ticks and Axis Labels to the Celsius Scale (°C)" style="width:100%">

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

</figure>
As with the previous axis, add an [annotation](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html "GaugeAnnotation Class of WinUI Radial Gauge") to display the temperature unit in °C on the inside axis. Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Temperature-Monitor-Displaying-Both-Fahrenheit-and-Celsius-in-WinUI.png" alt="Temperature Monitor Displaying Both Fahrenheit and Celsius in WinUI" style="width:100%">

  <figcaption>Temperature Monitor Displaying Both Fahrenheit and Celsius in WinUI</figcaption>

</figure>

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](https://github.com/SyncfusionExamples/How-to-design-a-temperature-monitor-using-WinUI-Radial-Gauge "Designing a temperature monitor using WinUI Radial Gauge demo 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](https://www.syncfusion.com/winui-controls/radial-gauge "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](https://help.syncfusion.com/winui/radial-gauge/overview "WinUI Radial Gauge Overview") of our Radial Gauge control and see our other WinUI samples in this [GitHub location](https://github.com/syncfusion/winui-demos/tree/master/radialgauge "Syncfusion WinUI demos on GitHub"). 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 demo app in the App Center").

The Syncfusion Radial Gauge control is also available for the [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")), [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 Radial 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"), [WinForms](https://www.syncfusion.com/winforms-ui-controls/radial-gauge "WinForms Radial Gauge"), and [WPF](https://www.syncfusion.com/wpf-controls/radial-gauge "WPF Radial Gauge") platforms.

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!

## Related blogs

- [What’s New in 2022 Volume 3: WinUI and WPF](https://www.syncfusion.com/blogs/post/whats-new-in-2022-volume-3-winui-and-wpf.aspx "Blog: What’s New in 2022 Volume 3: WinUI and WPF")
- [Design a Car Dashboard Like a Pro Using the WinUI Radial Gauge](https://www.syncfusion.com/blogs/post/design-a-car-dashboard-like-a-pro-using-the-winui-radial-gauge.aspx "Blog: Design a Car Dashboard Like a Pro Using the WinUI Radial Gauge")
- [Advantages of Using Syncfusion WinUI Controls over Framework Controls: Part 1](https://www.syncfusion.com/blogs/post/advantages-of-using-syncfusion-winui-controls-over-framework-controls-part-1.aspx "Blog: Advantages of Using Syncfusion WinUI Controls over Framework Controls: Part 1")
- [Achieve Google-Like Autosuggestions with the WinUI AutoComplete Control](https://www.syncfusion.com/blogs/post/achieve-google-like-autosuggestions-with-the-winui-autocomplete-control.aspx "Blog: Achieve Google-Like Autosuggestions with the WinUI AutoComplete Control")