Simple Steps to Design a Temperature Monitor Using WPF Radial Gauge
Tags: csharp, dotnet, productivity
Published: 2020-05-08 11:18:14

---
title: Simple Steps to Design a Temperature Monitor Using WPF Radial Gauge
published: true
date: 2020-05-07 10:00:36 UTC
tags: csharp, dotnet, productivity
canonical_url: https://www.syncfusion.com/blogs/post/design-a-temperature-monitor-using-wpf-radial-gauge.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/tv4khy87fiykfx8p7goy.png
---

The Radial Gauge is a data visualization component that helps you visualize numerical values on a radial scale. It has highly customizable features, such as scales, pointers, ranges, and annotations, and allows you to design a dashboard, clock, temperature monitor, speedometer, etc.

In this blog, you will get a quick overview of our [WPF Radial Gauge](https://www.syncfusion.com/wpf-ui-controls/radial-gauge) control and its features by designing a temperature monitor application.

To create a temperature monitor, you need the following features in the Radial Gauge control:

- Scales—To define the temperature scale values in numbers from start to end with tick marks.
- Ranges—To indicate multiple-colored temperature range indicators.
- Pointers—To point out the current temperature value.
- Annotations—To show the current temperature value and info about the design.

This section explains how to design a temperature monitor by customizing the appearance of the Radial Gauge as shown in the following screenshot.

![Custom appearance of Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2020/05/Custom-appearance-of-Radial-Gauge-1.png)<figcaption>Custom appearance of Radial Gauge</figcaption>

## Configuring Radial Gauge in WPF application

Refer to this [article](https://help.syncfusion.com/wpf/add-syncfusion-controls) to learn how to add Syncfusion controls to Visual Studio projects in various ways. You can also refer to [this](https://help.syncfusion.com/wpf/control-dependencies#sfgauge) link to learn about the assemblies required for adding Radial Gauge to your project.

## Creating a radial gauge

The Radial Gauge control is entirely configurable in both XAML and in code-behind. The following steps describe the initialization of the Radial Gauge control in XAML:

- Import the following Radial Gauge control’s namespace in the XAML page.

```xml
xmlns:gauge=http://schemas.syncfusion.com/wpf
```

Or

```xml
xmlns:gauge ="clr-namespace:Syncfusion.UI.Xaml.Gauges;assembly=Syncfusion.SfGauge.Wpf"
```

- Create an instance of the radial gauge class and add it to the layout that suits your requirements.

```xml
<Grid>
  <gauge:SfCircularGauge>
  </gauge:SfCircularGauge>
</Grid>
```

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

## Add the temperature scale

The first step in designing a temperature monitor is to add scale values as numbers from the minimum, -50, to the maximum, 60, with a specific interval. This is implemented using the scales in the Radial Gauge.

[Scales ](https://help.syncfusion.com/wpf/radial-gauge/scales)contain a collection of scale elements, and you can add any number of radial scales inside the gauge. A scale contains labels and tick marks, the positions and values of which can be customized. In the Radial Gauge, you can display the temperature labels from -50 to 100 using the [StartValue](https://help.syncfusion.com/cr/wpf/Syncfusion.SfGauge.WPF~Syncfusion.UI.Xaml.Gauges.CircularScale~StartValue.html) and [EndValue](https://help.syncfusion.com/cr/wpf/Syncfusion.SfGauge.WPF~Syncfusion.UI.Xaml.Gauges.CircularScale~EndValue.html) properties.

Scales have two types of tick marks, major and minor.

Major ticks have labels and are used to specify the primary value intervals. Minor ticks do not have labels and are used to define the space inside the primary value interval. You can specify the tick’s appearance and position-related properties using the [MajorTickSettings](https://help.syncfusion.com/cr/wpf/Syncfusion.SfGauge.WPF~Syncfusion.UI.Xaml.Gauges.MajorTickSetting.html) and [MinorTickSettings](https://help.syncfusion.com/cr/wpf/Syncfusion.SfGauge.WPF~Syncfusion.UI.Xaml.Gauges.MinorTickSetting.html) properties for a scale.

The intervals of the labels and major ticks can be customized by using the [Interval](https://help.syncfusion.com/cr/wpf/Syncfusion.SfGauge.WPF~Syncfusion.UI.Xaml.Gauges.CircularScale~Interval.html) property. Minor ticks can be chosen per interval in a scale using the [MinorTicksPerInterval](https://help.syncfusion.com/cr/wpf/Syncfusion.SfGauge.WPF~Syncfusion.UI.Xaml.Gauges.CircularScale~MinorTicksPerInterval.html) property.

You can customize the position for the scale, ticks, and labels by using corresponding offset properties. Values for offset should be given from 0 to 1 (gauge center position to edge).

```html
<gauge:SfCircularGauge >
            <gauge:SfCircularGauge.Scales>
                <gauge:CircularScale StartValue="-50" EndValue="60" Interval="10" MinorTicksPerInterval="9" LabelStroke="#5b5b5b"
                                     RangePosition="Custom" TickPosition="Custom" LabelPosition="Custom" ShowRim="False" LabelOffset="0.6" >
                    <gauge:CircularScale.MajorTickSettings>
                        <gauge:MajorTickSetting StartOffset="0.85" EndOffset="0.65" StrokeThickness="1" Stroke="Black" />
                    </gauge:CircularScale.MajorTickSettings>
                    <gauge:CircularScale.MinorTickSettings>
                        <gauge:MinorTickSetting StartOffset="0.85" EndOffset="0.75" StrokeThickness="1" Stroke="Black" />
                    </gauge:CircularScale.MinorTickSettings>
                   </gauge:CircularScale>
            </gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>
```

![Radial Gauge with Major & Minor Ticks](https://www.syncfusion.com/blogs/wp-content/uploads/2020/05/Radial-Gauge-with-Major-Minor-Ticks.png)<figcaption>Radial Gauge with Major &amp; Minor Ticks</figcaption>

## Add temperature range indicator

Once the temperature scale design is completed, you need to add the temperature range indicator to indicate the level of severity of the temperature.

[Ranges](https://help.syncfusion.com/wpf/radial-gauge/ranges) contain a collection of range elements. You can add any number of ranges inside the scale. A range of the Radial Gauge is a visual element that helps you visualize where a value falls on a radial scale.

Ranges in a radial gauge are used to display a temperature range with different color indications. In this blog design, you can use five ranges for scale to indicate the various levels of temperature.

Every range has start and end values, and these can be specified using the [StartValue](https://help.syncfusion.com/cr/cref_files/wpf/Syncfusion.SfGauge.WPF~Syncfusion.UI.Xaml.Gauges.CircularRange~StartValue.html) and [EndValue](https://help.syncfusion.com/cr/cref_files/wpf/Syncfusion.SfGauge.WPF~Syncfusion.UI.Xaml.Gauges.CircularRange~EndValue.html) properties.

The length and position of a range can be customized using the outer and inner offset properties, as shown in the following code example. The outer offset properties are used where the range length starts in scale, and inner offset properties are used where the range length ends.

```html
<gauge:CircularScale.Ranges>
          <gauge:CircularRange OuterStartOffset="0.85" OuterEndOffset="0.85"
                  InnerStartOffset="0.65" InnerEndOffset="0.65" StartValue="-50" EndValue="-10" Stroke="#4f91fa" />
          <gauge:CircularRange OuterStartOffset="0.85" OuterEndOffset="0.85"
InnerStartOffset="0.65" InnerEndOffset="0.65" StartValue="-10" EndValue="5" Stroke="#28bce4" />
          <gauge:CircularRange OuterStartOffset="0.85" OuterEndOffset="0.85"
                 InnerStartOffset="0.65" InnerEndOffset="0.65" StartValue="5" EndValue="20" Stroke="#0bbe53" />
         <gauge:CircularRange OuterStartOffset="0.85" OuterEndOffset="0.85"
                 InnerStartOffset="0.65" InnerEndOffset="0.65" StartValue="20" EndValue="30" Stroke="#d4d459" />
        <gauge:CircularRange OuterStartOffset="0.85" OuterEndOffset="0.85"
                 InnerStartOffset="0.65" InnerEndOffset="0.65" StartValue="30" EndValue="60" Stroke="#ff3233" />
</gauge:CircularScale.Ranges>
```

![Temperature Range Indicator](https://www.syncfusion.com/blogs/wp-content/uploads/2020/05/Temperature-Range-Indicator.png)<figcaption>Temperature Range Indicator</figcaption>

## Add needle pointer

Next, we need to add a needle pointer to indicate the current temperature value. This can be achieved using the pointer support in the Radial Gauge.

[Pointers ](https://help.syncfusion.com/wpf/radial-gauge/pointers)contain a collection of pointer elements, and you can add any number of pointers inside the scale. There are three types of pointers available for gauges: range pointer, needle pointer, and marker pointer. The value of a pointer is set using the [Value ](https://help.syncfusion.com/cr/cref_files/wpf/Syncfusion.SfGauge.WPF~Syncfusion.UI.Xaml.Gauges.CircularPointer~Value.html)property.

A [needle pointer](https://help.syncfusion.com/wpf/radial-gauge/pointers#needle-pointer) that is used in a temperature monitor design to point out a value is a highly customizable needle-type element.

The knob (rounded ball on the arrow) and tail (rectangle at the end of the knob) elements of a needle pointer are used to enhance the pointer’s look. The length of a pointer can be customized using the [NeedleLengthFactor](https://help.syncfusion.com/cr/cref_files/wpf/Syncfusion.SfGauge.WPF~Syncfusion.UI.Xaml.Gauges.CircularPointer~NeedleLengthFactor.html) property.

```html
<gauge:CircularScale.Pointers>     
     <gauge:CircularPointer EnableAnimation="True" Value="{Binding InsideValue}" NeedleLengthFactor="0.77" NeedlePointerStroke="#f7ab9c"
NeedlePointerStrokeThickness="12" TailLengthFactor="0.15" TailFill="#f7ab9c" KnobRadiusFactor="0.08" KnobStroke="#eff2f1" KnobStrokeThickness="5" KnobFill="#e8e8e8" NeedlePointerType="Triangle"/>
</gauge:CircularScale.Pointers>
```

![Temperature Range Indicator with Needle](https://www.syncfusion.com/blogs/wp-content/uploads/2020/05/Temperature-Range-Indicator-with-Needle.png)<figcaption>Temperature Range Indicator with Needle Pointer</figcaption>

## Annotate temperature unit and value

Finally, we need to display the current temperature value and info over the gauge. This can be achieved using the annotation support in the Radial Gauge.

[Annotations](https://help.syncfusion.com/wpf/radial-gauge/annotations) contain a collection of annotation elements, and you can add any number of annotations inside the Radial Gauge. To display the current pointer value in the temperature monitor, use the TextBlock control to display the text value over the radial gauge. You can simply bind the current temperature point value to annotation content text.

The position of annotations can be customized using the [Offset ](https://help.syncfusion.com/cr/cref_files/wpf/Syncfusion.SfGauge.WPF~Syncfusion.UI.Xaml.Gauges.GaugeAnnotation~Offset.html)and [Angle](https://help.syncfusion.com/cr/wpf/Syncfusion.SfGauge.WPF~Syncfusion.UI.Xaml.Gauges.GaugeAnnotation~Angle.html) properties. The Offset property is used to move the annotation from the center to the required distance from it, whereas the Angle property places the annotation with an angle direction.

```html
<gauge:SfCircularGauge.Annotations>
                <gauge:GaugeAnnotation Angle="90" Offset="0.6">
                    <gauge:GaugeAnnotation.Content>
                        <Border BorderBrush="#6f6d6d" BorderThickness="2" Background="#babab2" CornerRadius="3">
                            <TextBlock x:Name="text" Text="{Binding InsideValue }"  Foreground="#403f3d" FontSize="16" FontWeight="Bold"  Margin="10,1,10,1" />
                        </Border>
                    </gauge:GaugeAnnotation.Content>
                </gauge:GaugeAnnotation>
                <gauge:GaugeAnnotation Angle="90" Offset="0.3">
                    <gauge:GaugeAnnotation.Content>
                        <TextBlock FontSize="15" Text="Temp. °C" Foreground="#9b9b9b" FontWeight="SemiBold"/>
                    </gauge:GaugeAnnotation.Content>
                </gauge:GaugeAnnotation>
                <gauge:GaugeAnnotation Angle="270" Offset="0.3">
                    <gauge:GaugeAnnotation.Content>
                        <TextBlock FontSize="15" Text="Inside" Foreground="#9b9b9b" FontWeight="SemiBold"/>
                    </gauge:GaugeAnnotation.Content>
                </gauge:GaugeAnnotation>
</gauge:SfCircularGauge.Annotations>
```

Using the same temperature design, you can monitor the inside and outside temperature by splitting the grid into two columns and adding an “Outside” gauge annotation value.

![Single Temperature Indicator for both Inside & Outside](https://www.syncfusion.com/blogs/wp-content/uploads/2020/05/Single-Temperature-Indicator-for-InsideOutside.png)<figcaption>Single Temperature Indicator for both Inside and Outside Monitoring</figcaption>

You can check out the sample project on [GitHub](https://github.com/SyncfusionExamples/Temperature-Monitor-WPF-Blog).

## Conclusion

Syncfusion’s [Radial Gauge control](https://www.syncfusion.com/wpf-ui-controls/radial-gauge) for WPF has been designed with flexible UI customization to adapt to your app easily. It includes developer-friendly APIs to increase developers’ productivity. We hope you now have a clear idea of these features.

Feel free to visit the Radial Gauge’s [feature tour ](https://www.syncfusion.com/wpf-ui-controls/radial-gauge)and [documentation ](https://help.syncfusion.com/wpf/radial-gauge/getting-started)to learn more about its features and APIs.

If you aren’t a customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out these features. Also, try our other samples from this [GitHub](https://github.com/syncfusion/wpf-demos) location.

If you have any questions about this control, please let us know in the comments section below. You can also contact us through our [support forum](https://www.syncfusion.com/forums), [Direct-Trac](https://www.syncfusion.com/support/directtrac/), or [feedback portal](https://www.syncfusion.com/feedback/wpf). We are happy to assist you!

The post [Simple Steps to Design a Temperature Monitor Using WPF Radial Gauge](https://www.syncfusion.com/blogs/post/design-a-temperature-monitor-using-wpf-radial-gauge.aspx) appeared first on [Syncfusion Blogs](https://www.syncfusion.com/blogs).