Progress Controls in Windows Store Apps Using XAML

This article provides information about Progress Controls in Windows Store Apps. Today we will learn how many types of Progress Controls there are and how to use them in a Windows Store App using XAML and C#.

Introduction

Progress Controls are an effective control for UI design from the user's point view. They provide a way to indicate to the user that some task is being performed in the application. Developers use Progress Controls for many purposes such as in downloading tasks, loding resources, or processing some heavy data etc. Usually a Progress Control is used if an operation takes more time to complete.

Types of Progress Controls.

In Windows Store Apps there are mainly three types of Progress Controls; they are:

  1. Determinate Progress Bar.
  2. Indeterminate Progress Bar.
  3. Indeterminate Progress Ring.

In later sections we learn about each of these with an example.

Determinate Progress Bar.

This type of Progress Bar is used to determine the progress of the task being done. It is best used for well-defined durations or the end is predictable,. It shows a bar that displays how much work has been completed and how much is left or in progress.

Properties of the Progress Bar.

There are mainly 3 types of properties used for showing a Determinate Progress Bar; they are:

  1. Maximum: It specifies the maximum completion value of the Determinate Progress Bar.
  2. Value: It specifies the current value of the Determinate Progress Bar.
  3. IsIndeterminate: It sets to false for createion of a Determinate Progress Bar.

Example

To create a Determinate Progress Bar use these steps:

  • Create the Markup for Progress Bar.
  • Set the IsInderterminate property false.
  • Set it's maximum value.
  • Set the default value.

Here is the Code:

<ProgressBar x:Name="progressBar1IsIndeterminate="FalseMaximum="100"Height="10Width="200"/>

Output

progress-bar-in-windows-store-apps.jpg

Indeterminate Progress Bar.

An Indeterminate Progress bar is used for tasks that are not determinate and are non-modal. It does not block the user interaction with the application. An indeterminate progress bar shows an animation of dots moving from left to right.

Properties of Indeterminate Progress Bar.


To create the Indeterminate Progress Bar you have to set the IsIndeterminate property true.

Example

To create a Determinate Progress Bar use these steps:

  • Create the Markup for Progress Bar.
  • Set the IsInderterminate property true.

Here is the code.

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


Output

Indeterminate-progress-bar-in-windows-store-apps.jpg

Indeterminate Progress Ring.

It is another type of Progress Control that is displayed in the rounded shape with an animate dots. It Indicates that user activity is blocked until the app completes the task.

Properties of Indeterminate Progress Ring.

  • IsActive: This property specify that Progress Ring is isible. Set true to show it else false.

Example:

To create a Determinate Progress Bar use these steps:

  • Create the Markup for ProgressRing.
  • Set the IsActive property to true.

Here is the code.

<ProgressRing x:Name="ProgressRing1" IsActive="True"/>
Output
progress-ring-in-windows-store-apps.jpg

Summary
So, in this article we learned how many types of Progress Controls and how to use them in Windows Store Apps.
Hope it will helps.

Up Next
    Ebook Download
    View all
    Learn
    View all