--- title: "Introducing WinUI 3 – Project Reunion Radial Gauge" published_at: "2021-04-27T10:35:42+00:00" modified_at: "2025-03-24T07:36:27+00:00" url: "https://www.syncfusion.com/blogs/post/introducing-winui-3-project-reunion-radial-gauge" excerpt: "We at Syncfusion are happy to introduce our new WinUI 3 – Project Reunion Radial Gauge control in the 2021 Volume 1 release. The Radial Gauge is a multipurpose data visualization control for displaying numerical values on a circular scale...." taxonomy_category: - "Desktop" - "Gauge" - "UI" - "What's new" - "WinUI" taxonomy_post_tag: - "Data Visualization" - "desktop" - "Project Reunion" - "Radial Gauge" - "WinUI" --- # Introducing WinUI 3 – Project Reunion Radial Gauge [Sheik Syed](https://www.syncfusion.com/blogs/author/sheiksyedm) ![Introducing WinUI 3 - Project Reunion Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Introducing-WinUI-3-Project-Reunion-Radial-Gauge.png) We at Syncfusion are happy to introduce our new [WinUI 3 – Project Reunion Radial Gauge](https://www.syncfusion.com/winui-controls/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) 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) WinUI 3 – Project Reunion Radial Gauge 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) 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) Custom Axes in WinUI Radial Gauge ## Range The [gauge range](https://help.syncfusion.com/winui/radial-gauge/ranges) 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) Custom Ranges in WinUI Radial Gauge ## Pointers [Pointers](https://help.syncfusion.com/winui/radial-gauge/pointers) 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) 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) 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) 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) Types of Pointers in WinUI Radial Gauge ## Annotation You can add multiple elements – such as text, images and other custom elements – as [annotations](https://help.syncfusion.com/winui/radial-gauge/annotation) 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) Custom Annotations in WinUI Radial Gauge ## 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) Animating the Pointer in WinUI Radial Gauge ## 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) Pointer Interaction in WinUI Radial Gauge ## 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) or [Get started with WinUI 3 for desktop apps](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/get-started-winui3-for-desktop) and follow the [Get started with Project Reunion](https://docs.microsoft.com/en-us/windows/apps/project-reunion/get-started-with-project-reunion) 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/) 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. ``` xmlns:gauge="using:Syncfusion.UI.Xaml.Gauges" ... ``` ### 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) and [Maximum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_Maximum) properties demonstrated in the following code. ``` ``` ![Adding an Axis to WinUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Adding-Axis-to-WinUI-Radial-Gauge.png) Adding an Axis to WinUI Radial Gauge ### 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) , [EndValue](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeRange.html#Syncfusion_UI_Xaml_Gauges_GaugeRange_EndValue) , and Background properties demonstrated in the following code. ``` ``` ![Adding Ranges to WinUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Adding-Range-to-WinUI-Radial-Gauge.png) Adding Ranges to WinUI Radial Gauge ### 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) property is used to specify the value of the pointer. ``` ``` ![Adding a Pointer to WinUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Adding-Pointer-to-WinUI-Radial-Gauge.png) Adding a Pointer to WinUI Radial Gauge ### 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) , [DirectionValue](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_DirectionValue) and [PositionFactor](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_PositionFactor) properties demonstrated in the following code. ``` ``` ![Adding an Annotation to WinUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Adding-Annotation-to-WinUI-Radial-Gauge.png) Adding an Annotation to WinUI Radial Gauge ## GitHub reference For more information, refer to our [WinUI Radial Gauge Getting Started demo project](https://github.com/SyncfusionExamples/WinUI_Radial_Gauge_Getting_Started) . ## 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) 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) release. Also, refer our [WinUI Radial Gauge user guide](https://help.syncfusion.com/winui/radial-gauge/overview) and [GitHub demos](https://github.com/syncfusion/winui-demos/tree/master/radialgauge) . 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) . 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, 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) , [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents) , or [feedback portal](https://www.syncfusion.com/feedback/winui) . We are always happy to assist you! ## Related blogs - [Introducing WinUI 3 Project Reunion Scheduler](https://www.syncfusion.com/blogs/post/introducing-winui-3-project-reunion-scheduler.aspx) - [Syncfusion WinUI Controls Are Compatible with WinUI 3 Project Reunion 0.5!](https://www.syncfusion.com/blogs/post/syncfusion-winui-controls-are-compatible-with-winui-3-project-reunion-0-5.aspx) - [Introducing Syncfusion Ribbon for WinUI](https://www.syncfusion.com/blogs/post/introducing-syncfusion-ribbon-for-winui.aspx) - [Syncfusion Essential Studio® 2021 Volume 1 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2021-volume-1.aspx)