ProgressBar control design guidelines for Windows Phone

  • Article

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

A ProgressBar control shows the progress of an operation that has a known duration, or shows that an indeterminate operation is in progress.

ProgressBar control

This topic contains the following sections.

Appearance and action

A ProgressBar control displays a colored bar that moves from left to right as a specific operation is completed. When the operation is paused, or can’t complete, the ProgressBar control will stop moving. A ProgressBar control only displays information; users don’t interact with a ProgressBar control.

Detailed description

Use a ProgressBar control to show users how long an operation will take. This allows them to decide whether to wait for the operation to complete or to cancel it.

Use the “completion” of a ProgressBar control to instruct the system to begin another operation or prompt the user to action. It can also be used passively to inform the user of an operation that’s happening in the background of your app.

Standard use

Use a ProgressBar control to show how far along in an operation your app is, relative to a certain value that you designate as “complete.” However, a ProgressBar control can also be an indicator of state or position, as in the case of a music track. In this example, the ProgressBar control corresponds to the timeline of the song, and the length of the bar displays the listener’s position on that timeline; a stopped ProgressBar control in this case indicates that the song is paused.

Design guidelines

Windows Phone SDK offers two different designs for ProgressBar controls:

  • A solid bar of color that moves from left to right as an operation reaches completion.

  • A series of similar and equidistant colored blocks; they appear from left to right as the operation reaches completion.

Use a label to show whether a ProgressBar control is actively moving or stopped; this is optional, but we highly recommend it.

Use labels with gerunds, or –ing verbs, to indicate that a ProgressBar control is going to advance. Examples of these labels include:

  • Connecting

  • Downloading

  • Sending

Use labels with past participles to indicate that a ProgressBar is stopped. In preloaded apps, Windows Phone displays this kind of label in lowercase letters. Examples of these labels include:

  • Paused

  • Download failed

  • Canceled

Customization

It’s up to you where to put a ProgressBar control, but keep in mind that this control’s place and prominence in a view should correspond to its importance. Important ProgressBar controls can serve as a call to action, telling the user to resume a certain operation after the system has done its work. In preloaded Windows Phone apps, important ProgressBar controls appear at the top of the screen.. ProgressBar controls that are less critical, such as the one visible during an app download, appear smaller and are restricted to one view.

See Also

Reference

ProgressBar

Other Resources

How to create a custom indeterminate progress bar for Windows Phone 8