Working With Progress Controls in Windows Store Application

Before reading this article, please go through the following articles:

1. Developing Windows Store Apps : Introduction And Requirement Specification
2. Plans For Designing Metro Style Apps (Windows Store Apps)
3. Windows Store Application Life-Cycle
4. Guidelines to Pass Windows Store App Certification
5. Navigation Patterns to Develop Windows Store Application
6. Templates to Develop Windows Store Apps
7. Develop Your First Windows Store App (Hello World)
8. Controls to Design Windows Store Apps
9. Lay-out Design Guidelines For Windows Store Apps
10. Guidelines to Create Splash Screen For Windows Store Application

11. Configure Your Windows Store Application Using Manifest Designer

Introduction

In my last article we saw how to use the Manifest Editor to configure a Windows Store application. In this article we will move towards using controls in Windows Store applications. In this article we will see how to use a progress control and select an appropriate control for our Windows Store application. Visual Studio 2012 provides three different progress controls for Windows Store apps. Previously if you are an ASP.Net developer then you have been stuck on how to show a progress control in your web page. But for Windows Store applications it has been made very easy since built-in progress controls have been provided. These controls are divided into two main categories determinate and indeterminate. We will see those controls step-by-step below.

Determinate

From the title I hope you are clear about what a determinate control is. In other words when we can determine the time necessary to complete the process. When we are confident about how much time is required to complete the process then we can use a determinate progress control like a progress bar. In this category we have a progress bar control provided by Visual Studio.

Progress Bar

We are all familiar with the progress bar control that can be used to show the progress of process. We can use the progress bar control to show the progress of an operation to the user. XAML provides the progress bar control to show the progress for our Windows Store application. (For more about the control see controls to design Windows Store application.) You can create a progress bar control as in the following:

<ProgressBar IsIndeterminate="False" Maximum="100" Value="30" Height="10" Width="200"/>

To create a progress bar control we have to set three main properties of progress bar control i.e. Maximum Value, Value and IsIndeterminate. When you are able to show the operation's progress then you can use the progress bar control by dynamically changing its value property. In some general scenarios like downloading, uploading and installing, we can measure how much time is needed to complete the process so we can use the progress bar control. The Progress bar control can be seen in the following:



Indeterminate

From the title Indeterminate, is it clear to you what is it? It means we cannot estimate the time remaining to complete the process. In those situations in which you need to indicate that an operation is continuing in the background and you need to not block the user from interacting with your application, you can use the indeterminate progress control. You can add an indeterminate progress control to be used by setting the progress bar's IsInderteminate property to true as in the following:

<ProgressBar IsIndeterminate="True" Height="10" Width="200"/>

The above code creates the indeterminate progress bar control. When using the indeterminate progress control you do not need to set its value. This control appears as in the following which has dots moving from left to right and then disappears.



Indeterminate Progress Ring

When you need to perform long operations and you are unable to count how much time it will take to complete the operation and you also need to block the user from interacting with your application then you can use the progress ring control. This control is a ring in which dots are moving in a circle. By using this progress ring control you can block the user from interacting with your application. You can create a progress ring control by using the following markup:

<ProgressRing IsActive="True"/>

The Progress ring control behaves like modal dialogue boxes which restrict the user from interacting with the UI. When you have a long-running task then use the progress ring control. A progress ring control looks as in the following.



Conclusion

In this article we had seen how to use the progress control in Windows Store applications. According to our application needs we can use various kind of progress controls.