See proposal documents for:
Progress controls indicate to a user that an operation is occuring. This includes ProgressBar and ProgressRing controls. ProgressBar has both a determinate and indeterminate mode. ProgressRing only has an indeterminate mode.
Important APIs: ProgressBar and ProgressRing
Represents a control that indicates that an operation is ongoing. The typical visual appearance is a ring-shaped "spinner" that animates a filled area as progress continues.
Please see this table of current ProgressBar and ProgressRing modes and states.
The following examples show how to use the IsIndeterminate property to change the mode of the ProgressRing and the Value property to change the proportionate amount indicated.
<ProgressRing IsActive="True" Height="100" Width="100"/>
<ProgressRing IsActive="True" Height="100" Width="100" Value="75" IsIndeterminate="False"/>
Below are tables showing how ProgressRing is affected by the IsActive, IsIndeterminate, ShowPaused, ShowError and Value properties.
| Note | Image |
|---|---|
| When IsActive is False, ProgressRing will always appear blank, regardless of other properties |  |
IsIndeterminate is True
| ShowPaused | ShowError | Value | Image |
|---|---|---|---|
| False | False | |
|
| False | False | 75 | |
| False | True |  |
|
| False | True | 75 | |
| True | False | |
|
| True | False | 75 | |
| True | True | |
|
| True | True | 75 | |
Setting a Value on an Indeterminate ProgressRing should display as though there is no Value.
IsIndeterminate is False
| ShowPaused | ShowError | Value | Image |
|---|---|---|---|
| False | False | |
|
| False | False | 0 | |
| False | False | 75 | |
| False | True | |
|
| False | True | 75 | |
| True | False | |
|
| True | False | 75 |  |
| True | True | |
|
| True | True | 75 | |
ProgressRing should indicate progress based on the Value, relative to the Minimum and Maximum.
| Properties | Image |
|---|---|
| Minimum=10, Maximum=18, and Value=16 | |
*Note that the designs for ProgressRing are not finalized. See here for early designs.
With the addition of a determinate mode of ProgressRing, the ShowPaused and ShowError properties that ProgressBar already has should be aligned in ProgressRing. ProgressRing can be used in scenarios where progress is paused, or an error occured during the process. With this additional capability, the determinate ProgressRing does not represent a "hung" state where the user cannot interact with the app. Previously, guidance recommended that ProgressRing only be used when the user cannot continue to interact with the app, but this is no longer the only use case and ProgressRing can be used in scenarios where user interaction can continue while the ring is spinning.
ProgressRing will continue to inherit from Control, and will not inherit from RangeBase. Rangebase has functionality that is not used in ProgressBar and would not be used in ProgressRing. There is an ongoing investigation into adding content (Text or icons) in the center of the ProgressRing to potentially align with Xbox and other Microsoft teams.
Below are properties being added to ProgressRing. The IsIndeterminate property of ProgressRing will default to True for back compatability.
| Name | Type | Description |
|---|---|---|
| IsIndeterminate | boolean | Defaults to True. Gets or sets a value that indicates whether the progress ring reports generic progress with a repeating pattern (indeterminate progress) or reports progress based on the Value property (determinate progress) |
| Value | double | Gets or sets the current setting of the range control, which may be coerced. |
| ShowPaused | boolean | Defaults to False. Gets or sets a value that indicates whether the progress bar should use visual states that communicate a Paused state to the user. |
| ShowError | boolean | Defaults to False. Gets or sets a value that indicates whether the progress bar should use visual states that communicate an Error state to the user. |
| Maximum | double | Defaults to 100. Gets or sets the highest possible Value of the range element. |
| Minimum | double | Defaults to 0. Gets or sets the Minimum possible Value of the range element. |
| ValueChanged | event | Event that occurs when the range value changes. |
- How should the edge cases of 0%, 1%, 98%, 99% be visualized? We are currently discussing with other teams at Microsoft how to visualize this with the rounded interior corners.