Radial Progress Bar Control In UWP

The Radial Progress Bar Control displays a value in a certain range using a circular sector that grows clockwise until it becomes a full ring.

Radial Progress Bar Control is from UWP Community Toolkit. The UWP Community Toolkit is a collection of helper functions, custom controls, and app services. It simplifies and demonstrates common developer tasks building UWP apps for Windows 10.

Reading this article, you can learn how to use Radial Progress Bar Control in Universal Windows apps development with XAML and Visual C#.

The following important tools are required for developing UWP.

Windows 10 (Recommended)
Microsoft Visual Studio 2017
Windows Anniversary Update (10.0.14393.0)

Step 1

Open Visual Studio 2017. Go to Start -> New Project -> select Windows Universal (under Visual C#) -> Blank App (Universal Windows) -> Give a suitable name for your app (UWPRadialProgressBar) -> OK.

After choosing the target and minimum platform versions that your Windows Universal application will support (Windows Anniversary Update (10.0.14393.0)), the project creates App.xaml and MainPage.xaml.

Step 2

First, update the reference to Microsoft.NETCore.UniversalWindowsPlatform with the latest version using "Manage NuGet Packages".

Step 3

Add the following controls in design window for RadialProgressBar control view.

Add the TextBlock and Button Controls and change the Name and Text property.

Add the RadialProgressBar control and set the following properties - Value, Foreground, Thickness, Minimum, Maximum, Outline, Height, Width etc.

<Controls:RadialProgressBar x:Name="RPBTest" HorizontalAlignment="Left" Margin="321,238,0,0" VerticalAlignment="Top" Value="20" Foreground="DarkBlue" Thickness="6" Minimum="0" Maximum="100" Outline="LightGray" Height="208" Width="235"/>

Step 4

Add the following source code to Mainpage.Xaml.cs for clicking the Progress button.

DispatcherTimer dispatcherTimer = new DispatcherTimer();
public MainPage() {
this.InitializeComponent();
tblPercentage.Text = RPBTest.Value.ToString() + "%";
}
private void btnProgress_Click(object sender, RoutedEventArgs e) {
dispatcherTimer.Tick += dispatcherTimer_Tick;
dispatcherTimer.Interval = new TimeSpan(0, 0, 2);
dispatcherTimer.Start();
}
void dispatcherTimer_Tick(object sender, object e) {
if (RPBTest.Value <= 100) {
RPBTest.Value = Convert.ToInt32(RPBTest.Value) + 10;
tblPercentage.Text = RPBTest.Value.ToString();
} else dispatcherTimer.Stop();
}
}

Note

Automatically, the following code will be generated in XAML code view while we are done in the design view.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPRadialProgressBar" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Controls="using:Microsoft.Toolkit.Uwp.UI.Controls" x:Class="UWPRadialProgressBar.MainPage" mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="279,105,0,0" TextWrapping="Wrap" Text="RadialProgressBar Control in UWP" VerticalAlignment="Top" FontWeight="Bold" FontSize="20" />
<Controls:RadialProgressBar x:Name="RPBTest" HorizontalAlignment="Left" Margin="321,238,0,0" VerticalAlignment="Top" Value="20" Foreground="DarkBlue" Thickness="6" Minimum="0" Maximum="100" Outline="LightGray" Height="208" Width="235" />
<TextBlock x:Name="tblPercentage" HorizontalAlignment="Left" Margin="410,204,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" />
<Button x:Name="btnProgress" Content="Progress" HorizontalAlignment="Left" Margin="586,192,0,0" VerticalAlignment="Top" Click="btnProgress_Click" /> </Grid>
</Page>

Step 5

Deploy your app on local machine. The output of the UWPRadialProgressBar is shown below.

After clicking the Progress button -

Summary

Now, you have successfully tested RadialProgressBar control in XAML and UWP environment using Visual Studio 2017.