Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (150).NET Core  (24)Angular  (42)ASP.NET  (48)ASP.NET Core  (57)ASP.NET MVC  (84)Azure  (28)Blazor  (74)DocIO  (18)Essential JS 2  (67)Essential Studio  (161)Flutter  (83)JavaScript  (140)Microsoft  (101)PDF  (54)React  (32)Succinctly series  (120)Syncfusion  (458)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (26)Webinar  (18)Windows Forms  (54)WPF  (107)Xamarin  (119)XlsIO  (22)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (104)Chart  (44)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (3)DataGrid  (36)Development  (245)Doc  (7)DockingManager  (1)eBook  (91)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (16)Extensions  (11)File Manager  (3)Gantt  (8)Gauge  (6)Git  (3)Grid  (25)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (186)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (19)Performance  (3)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (19)SfDataGrid  (8)Silverlight  (21)Sneak Peek  (14)Solution Services  (2)Spreadsheet  (4)SQL  (5)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (42)UI  (103)Uncategorized  (68)Unix  (2)User interface  (67)Visual State Manager  (1)Visual Studio  (17)Visual Studio Code  (9)Web  (161)What's new  (108)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Introducing WinUI 3 - Project Reunion Radial Gauge

Introducing WinUI 3 – Project Reunion Radial Gauge

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. 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
WinUI 3 – Project Reunion Radial Gauge

The Radial Gauge control has the following features:

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 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
Custom Axes in WinUI Radial Gauge

Range

The gauge range 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
Custom Ranges in WinUI Radial Gauge

Pointers

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 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 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 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
Types of Pointers in WinUI Radial Gauge

Annotation

You can add multiple elements – such as text, images and other custom elements – as annotations inside the Radial Gauge control. You can also customize the position of the annotation inside the gauge.

Custom Annotations in WinUI Radial Gauge
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
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
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 or Get started with WinUI 3 for desktop apps and follow the 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 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"
...
<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 and Maximum properties demonstrated in the following code.

<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
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, EndValue, and Background properties demonstrated in the following code.

<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
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 property is used to specify the value of the pointer.

<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
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, DirectionValue and PositionFactor properties demonstrated in the following code.

<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
Adding an Annotation to WinUI Radial Gauge

GitHub reference

For more information, refer to our WinUI Radial Gauge Getting Started demo project.

Conclusion

Thanks for reading! I hope you enjoyed learning about the new Syncfusion WinUI 3 – Project Reunion Radial Gauge control and its features. This control is available in the 2021 Volume 1 release. Also, refer our WinUI Radial Gauge user guide and  GitHub demos. Additionally, you can download and check out our demo app in the App Center.

If you aren’t a customer yet, you can try our 30-day free trial 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, Direct-Trac, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top