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.

1. 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.
   
   
2. Getting started with a Simple Example
   Open visual studio and make a blank UWP Project
   
   
   
   
3. Once you click ok , you'll see and empty application like this,
   
   
   
   
4. We need 4 controls to Implement Progress Ring Control in this app.
   
   
   • Button
   • Progress Ring
   • 2 Text block
     
     
     
     
5. Button to start a lengthy task , 1 label to show time and other to show status
   
   
6. 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.
   

   <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">
       <Page.Resources>
           <Style TargetType="Button">
               <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>
           </Style>
           <Style TargetType="ProgressRing">
               <Setter Property="Height" Value="50"></Setter><Setter Property="Width" Value="50"></Setter><Setter Property="Foreground" Value="Green"></Setter>
           </Style>
           <Style TargetType="TextBlock">
               <Setter Property="HorizontalAlignment" Value="Center"></Setter><Setter Property="Foreground" Value="Green"></Setter><Setter Property="FontSize" Value="22"></Setter>
           </Style>
       </Page.Resources>
       <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
           <Grid.RowDefinitions>
               <RowDefinition></RowDefinition>
               <RowDefinition></RowDefinition>
               <RowDefinition></RowDefinition>
               <RowDefinition></RowDefinition>
               <RowDefinition></RowDefinition>
               <RowDefinition></RowDefinition>
           </Grid.RowDefinitions>
           <Button x:Name="btn_StartLongTask" Grid.Row="2" Click="btn_StartLongTask_ClickAsync">Start Long Task</Button>
           <ProgressRing x:Name="pr_ProgressRing1" Grid.Row="3"></ProgressRing>
           <TextBlock x:Name="lbl_CountDown" Grid.Row="4" VerticalAlignment="Top">00:00</TextBlock>
           <TextBlock x:Name="lbl_TaskStatus" Grid.Row="5" VerticalAlignment="Top" HorizontalAlignment="Left" Foreground="Red" FontSize="17">Status...</TextBlock>
       </Grid>
   </Page>

7. Now move to the code behind for button click .
   
   And Add the following code,
   

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

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.



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 .