Using XAML Progress Ring In UWP

Long running tasks in any application make the application or software non-responsive. So to keep the user updated about the running task and also keep the application responsive during long running tasks we can use different kinds of loading bar options like,

Progress Bar
Ring Bar

Let's discuss XAML Progress Ring in UWP Apps.

What is progress ring?
Xaml progress ring represents a controls that indicates that an operation is ongoing. Its shape is a ring shape spinner that shows an animation when a long running task occurs.
Getting started with a Simple Example
Open visual studio and make a blank UWP Project
Once you click ok , you'll see and empty application like this,
We need 4 controls to Implement Progress Ring Control in this app.
- Button
- Progress Ring
- 2 Text block
Button to start a lengthy task , 1 label to show time and other to show status
Make a grid and place these controls accordingly . Here I'm using Static Resources in XAML to set the design for xaml controls. If you don't know how to work with Static Resources in XAML you can check it here.
1. <Page x:Class="UWP_ProgressRing.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWP_ProgressRing" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
2. <Page.Resources>
3. <Style TargetType="Button">
4. <Setter Property="Width" Value="180"></Setter><Setter Property="Height" Value="40"></Setter><Setter Property="HorizontalAlignment" Value="Center"></Setter><Setter Property="FontSize" Value="18"></Setter><Setter Property="Foreground" Value="Green"></Setter><Setter Property="Background" Value="LightCyan"></Setter><Setter Property="BorderBrush" Value="Green"></Setter><Setter Property="BorderThickness" Value="1"></Setter>
5. </Style>
6. <Style TargetType="ProgressRing">
7. <Setter Property="Height" Value="50"></Setter><Setter Property="Width" Value="50"></Setter><Setter Property="Foreground" Value="Green"></Setter>
8. </Style>
9. <Style TargetType="TextBlock">
10. <Setter Property="HorizontalAlignment" Value="Center"></Setter><Setter Property="Foreground" Value="Green"></Setter><Setter Property="FontSize" Value="22"></Setter>
11. </Style>
12. </Page.Resources>
13. <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
14. <Grid.RowDefinitions>
15. <RowDefinition></RowDefinition>
16. <RowDefinition></RowDefinition>
17. <RowDefinition></RowDefinition>
18. <RowDefinition></RowDefinition>
19. <RowDefinition></RowDefinition>
20. <RowDefinition></RowDefinition>
21. </Grid.RowDefinitions>
22. <Button x:Name="btn_StartLongTask" Grid.Row="2" Click="btn_StartLongTask_ClickAsync">Start Long Task</Button>
23. <ProgressRing x:Name="pr_ProgressRing1" Grid.Row="3"></ProgressRing>
24. <TextBlock x:Name="lbl_CountDown" Grid.Row="4" VerticalAlignment="Top">00:00</TextBlock>
25. <TextBlock x:Name="lbl_TaskStatus" Grid.Row="5" VerticalAlignment="Top" HorizontalAlignment="Left" Foreground="Red" FontSize="17">Status...</TextBlock>
26. </Grid>
27. </Page>

Now move to the code behind for button click .

And Add the following code,
1. private async void btn_StartLongTask_ClickAsync(object sender, RoutedEventArgs e)
2. {
3. lbl_TaskStatus.Text = "Starting a lengthy task..."; // Show message before starting task...
4. await Task.Delay(1000); // 1 sec delay
5. pr_ProgressRing1.IsActive = true; // start progress ring
6. lbl_TaskStatus.Text = "In Progress..."; // show status message on UI
7. for (int i = 5; i >= 1; i--) // Keep running progress Ring for 5 seconds
8. {
9. await Task.Delay(1000);
10. lbl_CountDown.Text = string.Format("00:{0:d2}", i); // Show Time left on UI
11. }
12. lbl_TaskStatus.Text = "Task Completed.";
13. pr_ProgressRing1.IsActive = false;
14. }

You need to use following namespaces to work with Tasks.

using System.Threading.Tasks;

Build the project and run it. Once you click the button, Ring bar will appear for 5 seconds.

This is useful when you know the total time a task will take to complete but what if you are not sure about the time left for task to complete? In that case we’ll start our task on a different thread and start the progress ring immediately after that and once the task gets done we’ll stop the progress ring as well. I’m going to write about this in my upcoming article. Stay tuned.

UWP

This is fine . But one major problem is left. Are we sure the task will take a specific time? If time for the lengthy task is defined then it's ok to work like that. But what if this is not the case.?

So for that we need to run a separate task on button click in background thread . We'll again use TPL ( Task parallel library ) for this .

3 Comments

Join the conversation! Your thoughts help the community grow.

Pavithra Sundaram7y ago
Nice article. Yet,Please help me with another problem.. I have various button click events in my application and the page becomes unresponsive.Hence, i tried doing it with progress bar. The thing i need is "Once the page gets loaded, progress bar needs to disappear". Pleaseeee hep with this :(
Srikanth Reddy8y ago
How to show progressive ring asynchronously on button click (like search button press)?
- Ammar Shaukat8y ago
  It works asynchronously by default.