Introduction

Display numerical data in graph or any modern way to increase the user interface and broad range of radial gauges for displaying distance, speed, duration or any other dynamic data.

Let’s see the steps

Create a new Windows 10 UWP app and name it as you wish.
Next right click your project and select Manage NuGet Packages and add the WinRTXamlToolkitControls.Gauge.UWP like the following image.
It’s a free toolkit for Windows UWP App.
Windows UWP App
Then add the following XAML code in your XAML page:
  1. xmlns:controls="using:WinRTXamlToolkit.Controls"
Finally, add the following XAML code inside the Grid to design your Radial Gauge:
  1. <controls:Gauge x:Name="myGrapg" Value="37" Unit="KM" ScaleTickBrush="Transparent" TickBrush="Transparent" ScaleWidth="30" CanDrag="True">
  2. <controls:Gauge.NeedleBrush>
  3. <LinearGradientBrush EndPoint="1,0">
  4. <GradientStop Color="Black" />
  5. <GradientStop Color="Blue" Offset=".5" />
  6. <GradientStop Color="Black" Offset="3" />
  7. </LinearGradientBrush>
  8. </controls:Gauge.NeedleBrush>
  9. <controls:Gauge.TrailBrush>
  10. <SolidColorBrush Color="Green" Opacity="25" />
  11. </controls:Gauge.TrailBrush>
  12. </controls:Gauge>
Now it looks like the following image,
Output
Here is the list of properties play around the Radial control:
You can set the proprieties value in code behind also.
Now run the app and the output looks like the following image.
Run
Source Code.

Summary

In this article, we learned about Radial Gauge For Windows 10 Universal Windows Platform.