Blog
Windows 8 Progress Controls
By Ken Getz | November 19, 2012
XAML provides two controls specifically meant to indicate active progress, as some activity is running, to the user. The ProgressBar and ProgressRing controls can both display an indeterminate length for the activity, and the ProgressBar can display a specific value for its progress.
ProgressBar and ProgressRing
The ProgressBar control indicates the progress of an operation using one of two styles: Indeterminate, which displays a repeating pattern, or determinate, displaying specific values. Set the IsIndeterminate property to set the appearance of the ProgressBar control. When the property is False, the bar displays a specific value. In this state, you specify Minimum and Maximum properties for the ProgressBar. To specify progress, set the Value property.
The ProgressRing control works much like the ProgressBar control, except that it can only display in the indeterminate state. Use the IsActive property to control the visual state of the progress.
The figure below shows a determinate progress bar, with its value set for the purposes of the demo from a Slider control. The markup for those two controls looks like the following:
<StackPanel Orientation="Vertical"
Margin="10">
<ProgressBar
Minimum="0", Maximum="100"
Value="{Binding ElementName=ProgressSlider,
Path=Value}"
Width="150"></ProgressBar>
<Slider Minimum="0"
x:Name="ProgressSlider"
Maximum="100"
Width="150"
Value="20"
Margin="0, 60, 0, 0" />
</StackPanel>
The figure below shows indeterminate ProgressBar and ProgressRing controls (it's hard to capture these in action).
The following markup generated these controls:
<StackPanel Orientation="Vertical"
Margin="10, 10">
<ProgressBar Width="150"
IsIndeterminate="True" />
</StackPanel>
<StackPanel Orientation="Vertical"
Margin="10, 10">
<ProgressRing IsActive="True"
Width="50"
Height="50" />
</StackPanel>
