Introducing WinUI 3 – Project Reunion Radial Gauge
Tags: winui, dotnet, csharp
Published: 2021-04-28 11:23:12

---
title: Introducing WinUI 3 – Project Reunion Radial Gauge
published: true
date: 2021-04-27 10:35:42 UTC
tags: winui, dotnet, csharp
canonical_url: https://www.syncfusion.com/blogs/post/introducing-winui-3-project-reunion-radial-gauge.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Introducing-WinUI-3-Project-Reunion-Radial-Gauge-672x372.png
---

We at Syncfusion are happy to introduce our new [WinUI 3 – Project Reunion Radial Gauge](https://www.syncfusion.com/winui-controls/radial-gauge "Link to WinUI Radial Gauge") control in the [2021 Volume 1](https://www.syncfusion.com/forums/164043/essential-studio-2021-volume-1-release-v19-1-0-54-is-available-for-download "Link to download Essential Studio 2021 Volume 1") release. The Radial Gauge is a multipurpose data visualization control for displaying numerical values on a circular scale. It allows users to create various application components, such as speedometers, temperature monitors, dashboards, multiaxial clocks, watches, activity gauges, compasses, and so on.

![WinUI 3 - Project Reunion Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/WinUI-3-Project-Reunion-Radial-Gauge.png)<figcaption>WinUI 3 – Project Reunion Radial Gauge</figcaption>

The Radial Gauge control has the following features:

- [Axes](#axis)
- [Ranges](#range)
- [Pointers](#pointers)
- [Annotations](#annotation)
- [Pointer animations](#pointer-animation)
- [Pointer interactions](#pointer-interaction)

These are fully customizable and extendable.

Let’s check out these features and learn how to integrate the Radial Gauge into an application.

## Axis

The [radial axis](https://help.syncfusion.com/winui/radial-gauge/axes "Link to Axis in WinUI Radial Gauge") is a circular arc in which values are displayed along a linear or custom scale based on the design requirements. You can add any number of axes inside the Radial Gauge.

You can also further customize the following radial axis elements to enhance axis readability: scales, labels, label rotation, label style, tick style, inversed axes, outside axis position, and support for multiple axes.

![Custom Axes in WinUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Custom-Axes-in-WinUI-Radial-Gauge-1.png)<figcaption>Custom Axes in WinUI Radial Gauge</figcaption>

## Range

The [gauge range](https://help.syncfusion.com/winui/radial-gauge/ranges "Link to Range in WinUI Radial Gauge") is a visual element that helps to quickly visualize where a value falls on an axis. You can add any number of ranges inside the radial axis. You can also customize the start and end width of a range and annotate the text in it to improve readability.

![Custom Ranges in WinUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Custom-Ranges-in-WinUI-Radial-Gauge.png)<figcaption>Custom Ranges in WinUI Radial Gauge</figcaption>

## Pointers

[Pointers](https://help.syncfusion.com/winui/radial-gauge/pointers "Link to Pointers in WinUI Radial Gauge") help to indicate values on the radial axis. The Radial Gauge control supports three types of pointers:

- Needle
- Marker
- Range

You can customize all these pointers as needed.

The [needle pointer](https://help.syncfusion.com/winui/radial-gauge/needle-pointer "Link to Needle Pointer in WinUI Radial Gauge") is used to indicate a value with a highly customizable needle-type element. One end of the needle is positioned at the middle of the Radial Gauge, and the other end points to the value on the radial axis. Use the knob and tail elements in the needle pointer to enhance the pointer appearance.

The [marker pointer](https://help.syncfusion.com/winui/radial-gauge/marker-pointer "Link to Marker Pointer in WinUI Radial Gauge") is used to indicate a value with built-in shapes, such as a circle, diamond, triangle, inverted triangle, or rectangle. You can also use custom text or an image as a marker pointer.

The [range pointer](https://help.syncfusion.com/winui/radial-gauge/range-pointer "Link to Range Pointer in WinUI Radial Gauge") is an arc element that is used to indicate a value from the starting value of the radial axis. You can also customize the pointer corner style to be rounded or curved.

![Types of Pointers in WinUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Types-of-Pointers-in-WinUI-Radial-Gauge.png)<figcaption>Types of Pointers in WinUI Radial Gauge</figcaption>

## Annotation

You can add multiple elements – such as text, images and other custom elements – as [annotations](https://help.syncfusion.com/winui/radial-gauge/annotation "Link to Annotation in WinUI Radial Gauge") inside the Radial Gauge control. You can also customize the position of the annotation inside the gauge.

![Custom Annotations in WinUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Custom-Annotations-in-WinUI-Radial-Gauge-1.png)<figcaption>Custom Annotations in WinUI Radial Gauge</figcaption>

## Pointer animation

You can animate the pointer in a visually appealing way when it moves from one value to another.

![Animating the Pointer in WinUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Animating-the-Pointer-in-WinUI-Radial-Gauge.gif)<figcaption>Animating the Pointer in WinUI Radial Gauge</figcaption>

## Pointer interaction

The Radial Gauge provides an option to drag a pointer from one value to another. Use it to change the value at run time.

![Pointer Interaction in WinUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Pointer-Interaction-in-WinUI-Radial-Gauge.gif)<figcaption>Pointer Interaction in WinUI Radial Gauge</figcaption>

## Add the WinUI Radial Gauge to your application

This section covers how to create a simple WinUI 3 application with the Radial Gauge control to demonstrate its basic usage.

### Step 1: Create a WinUI application

First, create a simple project using the instructions provided in  [Get started with WinUI 3 for UWP apps](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/get-started-winui3-for-uwp "Link to get started with WinUI 3 for UWP apps documentation") or [Get started with WinUI 3 for desktop apps](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/get-started-winui3-for-desktop "Link to get started with WinUI 3 for desktop apps documentation") and follow the [Get started with Project Reunion](https://docs.microsoft.com/en-us/windows/apps/project-reunion/get-started-with-project-reunion "Link to get started with Project Reunion documentation") documentations.

### Step 2: Install the necessary NuGet package

Then, install the **Syncfusion.Gauge.WinUI** NuGet package to the application from [nuget.org](https://www.nuget.org/ "Link to NuGet Gallery") or from the installed location, **C:\Program Files (x86)\Syncfusion\Essential Studio\WinUI\xx.x.x.xx\NuGetPackages**.

**Note:** xx.x.x.xx denotes the version of the Syncfusion WinUI 3 – Project Reunion Radial Gauge package.

### Step 3: Add the namespace and initialize the Radial Gauge

Import the control’s namespace **Syncfusion.UI.Xaml.Gauges** in the XAML file and initialize the Radial Gauge control as shown in the following code example.

```html
xmlns:gauge="using:Syncfusion.UI.Xaml.Gauges"
...
<gauge:SfRadialGauge>
```

### Step 4: Add an axis to the Radial Gauge

Axes contain a variety of elements, and you can add any number of radial axes to the gauge. You can specify the minimum and maximum values of an axis using the [Minimum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_Minimum "Link to the Minimum property") and [Maximum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_Maximum "Link to the Maximum property") properties demonstrated in the following code.

```html
<gauge:SfRadialGauge>
  <gauge:SfRadialGauge.Axes>
     <gauge:RadialAxis Minimum="0" Maximum="150"
                       Interval="10">
     </gauge:RadialAxis>
  </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
```

![Adding an Axis to WinUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Adding-Axis-to-WinUI-Radial-Gauge.png)<figcaption>Adding an Axis to WinUI Radial Gauge</figcaption>

### Step 5: Add a range to the Radial Gauge

Ranges contain a variety of range elements, and you can add any number of ranges to an axis. You can specify the start value, end value, and background color for a range using the [StartValue](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeRange.html#Syncfusion_UI_Xaml_Gauges_GaugeRange_StartValue "Link to the StartValue property"), [EndValue](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeRange.html#Syncfusion_UI_Xaml_Gauges_GaugeRange_EndValue "Link to the EndValue property"), and Background properties demonstrated in the following code.

```html
<gauge:SfRadialGauge >
  <gauge:SfRadialGauge.Axes>
     <gauge:RadialAxis Maximum="150"
                       Interval="10">
         <gauge:RadialAxis.Ranges>
             <gauge:GaugeRange StartValue="0"
                               EndValue="50"
                               Background="Red" />
             <gauge:GaugeRange StartValue="50"
                               EndValue="100"
                               Background="Orange" />
             <gauge:GaugeRange StartValue="100"
                               EndValue="150"
                               Background="Green" />
        </gauge:RadialAxis.Ranges>
     </gauge:RadialAxis>
  </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

```

![Adding Ranges to WinUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Adding-Range-to-WinUI-Radial-Gauge.png)<figcaption>Adding Ranges to WinUI Radial Gauge</figcaption>

### Step 6: Add a pointer to the Radial Gauge

Pointers contain a variety of pointer elements, and you can add any number of  pointers – such as needle pointers, range pointers, and marker pointers – to the radial axis to indicate a value. The [Value](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugePointer.html#Syncfusion_UI_Xaml_Gauges_GaugePointer_Value "Link to the Value property") property is used to specify the value of the pointer.

```html
<gauge:SfRadialGauge >
   <gauge:SfRadialGauge.Axes>
      <gauge:RadialAxis Maximum="150"
                        Interval="10">
         <gauge:RadialAxis.Pointers>
             <gauge:NeedlePointer Value="90" />
         </gauge:RadialAxis.Pointers>
     </gauge:RadialAxis>
   </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
```

![Adding a Pointer to WinUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Adding-Pointer-to-WinUI-Radial-Gauge.png)<figcaption>Adding a Pointer to WinUI Radial Gauge</figcaption>

### Step 7: Add annotation to the Radial Gauge

You can add custom content – such as text or images- as annotations inside the axis. You can also customize the position of annotation using the [DirectionUnit](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_DirectionUnit "Link to the DirectionUnit property"), [DirectionValue](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_DirectionValue "Link to the DirectionValue property") and [PositionFactor](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_PositionFactor "Link to the PositionFactor property") properties demonstrated in the following code.

```html
<gauge:SfRadialGauge >
  <gauge:SfRadialGauge.Axes>
     <gauge:RadialAxis Maximum="150"
                       Interval="10">
         <gauge:RadialAxis.Pointers>
            <gauge:NeedlePointer x:Name="needlePointer" Value="90" />
         </gauge:RadialAxis.Pointers>
         <gauge:RadialAxis.Annotations>
          <gauge:GaugeAnnotation DirectionUnit="Angle"
                                 DirectionValue="90"
                                 PositionFactor="0.5">
            <gauge:GaugeAnnotation.Content>
              <TextBlock Text="{Binding ElementName=needlePointer, Path=Value}"
                         FontSize="25"
                         FontWeight="Bold" />
            </gauge:GaugeAnnotation.Content>
          </gauge:GaugeAnnotation>
        </gauge:RadialAxis.Annotations>
      </gauge:RadialAxis>
   </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
```

![Adding an Annotation to WinUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Adding-Annotation-to-WinUI-Radial-Gauge.png)<figcaption>Adding an Annotation to WinUI Radial Gauge</figcaption>

## GitHub reference

For more information, refer to our [WinUI Radial Gauge Getting Started demo project](https://github.com/SyncfusionExamples/WinUI_Radial_Gauge_Getting_Started "Link to WinUI Radial Gauge getting started demo on GitHub").

## Conclusion

Thanks for reading! I hope you enjoyed learning about the new Syncfusion [WinUI 3 – Project Reunion Radial Gauge](https://www.syncfusion.com/winui-controls/radial-gauge "Link to WinUI Radial Gauge") control and its features. This control is available in the [2021 Volume 1](https://www.syncfusion.com/forums/164043/essential-studio-2021-volume-1-release-v19-1-0-54-is-available-for-download "Link to download Essential Studio 2021 Volume 1") release. Also, refer our [WinUI Radial Gauge user guide](https://help.syncfusion.com/winui/radial-gauge/overview "Link to WinUI Radial Gauge documentation") and  [GitHub demos](https://github.com/syncfusion/winui-demos/tree/master/radialgauge "Link to WinUI Radial Gauge demos on GitHub"). Additionally, you can download and check out our [demo app in the App Center](https://install.appcenter.ms/orgs/syncfusion-demos/apps/winui-demos/distribution_groups/release "Link to Syncfusion WinUI demos on the App Center").

If you aren’t a customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out these features.

Also, if you need a specific feature in our WinUI Radial Gauge control, please let us know in the comments section below. You can also contact us through our [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/winui "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Introducing WinUI 3 Project Reunion Scheduler](https://dev.to/sureshmohan/introducing-winui-3-project-reunion-scheduler-2eea-temp-slug-7751157 "Link to Introducing WinUI 3 Project Reunion Scheduler blog")
- [Syncfusion WinUI Controls Are Compatible with WinUI 3 Project Reunion 0.5!](https://dev.to/sureshmohan/syncfusion-winui-controls-are-compatible-with-winui-3-project-reunion-0-5-2d48-temp-slug-7630831 "Link to Syncfusion WinUI Controls Are Compatible with WinUI 3 Project Reunion 0.5 blog")
- [Introducing Syncfusion Ribbon for WinUI](https://dev.to/syncfusion/introducing-syncfusion-ribbon-for-winui-4blc "Link to Introducing Syncfusion Ribbon for WinUI blog")
- [Syncfusion Essential Studio 2021 Volume 1 Is Here!](https://dev.to/sureshmohan/syncfusion-essential-studio-2021-volume-1-is-here-4ie3-temp-slug-4198863 "Link to Syncfusion Essential Studio 2021 Volume 1 Is Here blog")