Progress Bar Control and Progress Ring Control, Using Repeat Button In UWP

A Progress Control provides feedback to the user about running the ongoing operation. So, the user cannot interact with the app when the progress indicator is visible, and can also indicate the waiting time.

Types of Progress Control

There are two types of Progress controls- ProgressBar and ProgressRing.

• The ProgressBar displays a vertical bar that shows the percentage completed of a task but its progress should not block the user's interaction with the app.
  
  
  
  
• The ProgressRing displays like a ring. The user interaction is blocked until the operation has completed.
  
  
  

Prerequisites

•    Visual Studio 2015

Now, let's get started with the following steps.

Step 1 - Create Windows Universal Project

Open Visual Studio 2015 and click File - New - Project Option for New Universal App.



Step 2 - Giving the Project Name

Then, New Project window will open. There, select Installed -> Template -> Visual C# -> Windows -> Universal and select a Blank App (Universal Windows).

Type Project Name as ProgressBarApp and click the OK button.



Step 3 - Setting the platform Versions

Here, we choose the Target Version and Minimum Version for our Universal Windows application. Click OK button



Step 4 - Choose Designer Window

Now, go to the Solution Explorer and open the MainPage.xaml for design.


 
Step 5 - Designing the App

In the MainPage.xaml designing page, drag TextBlock button control from the tool box. Then, go to the Property window and click Text then Enter the given text.



Next, drag the Progress Bar button from the tool box and go to the property then change the Name as ProgressBarcontrol



Now, drag the Repeat button from the tool box and goto the property then change the content as Press and Hold



After designing the app, the XAML code looks like this.

<Page x:Class="ProgressBarAppp.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:ProgressBarAppp" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Height="71" Margin="10,44,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="340">
            <Run Text="Progress Bar" />
            <Run Text=" " />
            <Run Text="Control " />
            <Run Text=" using Repeat Button Control" />
            <Run Text="in UWP" /> </TextBlock>
        <ProgressBar x:Name="ProgressBarcontrol" Value="0" Maximum="200" Margin="22,161,20,439" Height="40" />
        <RepeatButton Content="Press and hold" Click="RepeatButton_Click" Width="197" Margin="86,235,0,353" Height="52" /> </Grid>
</Page>

Step 6 - Add the Coding

To add coding, double click on the Repeat Button, then add the mentioned source code.

private static int X = 0;
private void RepeatButton_Click(object sender, RoutedEventArgs e)
{
    X += 1;
    ProgressBarcontrol.Value = X;
    if (X >= ProgressBarcontrol.Maximum) X = 0;
}
}

Step 7 - Run the Application

Now, we are ready to run our Project. So, click the Local Machine for running the Application.



Output 1 



Output 2



Step 8 - Add the Progress Ring

Now, add the Progress Ring Control to the app.

Drag the Progress Ring button from the tool box and go to the property. Then check the IsActive checkbox,



Step 9 - Run the Application

Now, we are ready to run our Project. So, click the Local Machine for running the application.



Output 3



Step 10 - Changing the colour of the Progress Ring

By default, the main coloring of the progress controls is set to the accent color of the system.

<ProgressRing IsActive="True" Height="100" Width="100" Foreground="Red"/>

Step 11 - Run the Application

Now, we are ready to run our Project. So, click the Local Machine for running the application



Output 4 



Conclusion - I hope you understood how to create the Progress Bar Control and Progress Ring with the uses of Repeat button, in the Universal app and how to run it.