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

The Radial Gauge control has the following features:

• Axes
• Ranges
• Pointers
• Annotations
• Pointer animations
• Pointer interactions

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.

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.

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.

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.

Pointer animation

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

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.

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>

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>

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>

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>

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 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

• Introducing WinUI 3 Project Reunion Scheduler
• Syncfusion WinUI Controls Are Compatible with WinUI 3 Project Reunion 0.5!
• Introducing Syncfusion Ribbon for WinUI

• Tags:

  Data Visualization desktop Project Reunion Radial Gauge WinUI