Radial Gauge For Windows 10 Universal Windows Platform

Display numerical data in graph or any modern way 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 new Windows 10 UWP app and name it as your 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.



Then add the following XAML code in your XAML page:

xmlns:controls="using:WinRTXamlToolkit.Controls"

Finally add the following xaml code inside the Grid to design your Radial Gauge:

<controls:Gauge x:Name="myGrapg" Value="37" Unit="KM" ScaleTickBrush="Transparent" TickBrush="Transparent" ScaleWidth="30" CanDrag="True">
    <controls:Gauge.NeedleBrush>
        <LinearGradientBrush EndPoint="1,0">
            <GradientStop Color="Black" />
            <GradientStop Color="Blue" Offset=".5" />
            <GradientStop Color="Black" Offset="3" />
        </LinearGradientBrush>
    </controls:Gauge.NeedleBrush>
    <controls:Gauge.TrailBrush>
        <SolidColorBrush Color="Green" Opacity="25" />
    </controls:Gauge.TrailBrush>
</controls:Gauge>

Now it looks like the following image,



Here is the list of properties play around the Radial control:

 

• Value: Value to represent.
• Unit: Unit measure to display.
• TickSpacing: Spacing -in value units.
• NeedleBrush: Colour of the needle.
• TickBrush: Colour of the outer tick.
• ScaleWidth: Thickness of the scale.
• ScaleBrush: Background colour of the scale.
• ScaleTickBrush: Colour of the ticks.
• ValueBrush: Colour of the value text.
• UnitBrush: Colour of the unit measure text.

You can set the proprieties value in code behind also.

Now run the app and the output looks like the following image.



Source Code.