With the release of the Release Candidate version of Silverlight 2 three long awaited controls were presented - the PasswordTextBox, the ComboBox and the ProgressBar. Since the need of such controls were pretty big, a lot of custom controls were created and the existing ones have been extended in order to fill that need. Probably you've already read a couple of tutorials about creating your own ProgressBar control. We have also developed our own simple progress bar for the Voting control and I was ready to show it off in a separate article, but that's not necessary now. Instead of this we are going to take a look at the ProgressBar control that came with the release candidate and show some of its basic features.
Download source code
Declaring a ProgressBar control
The ProgressBar control is located in the System.Windows.Controls.dll and we can add it to our application either by dragging it form the Toolbox in the Xaml or declaring it in the codebehind:
Xaml
<Grid x:Name="LayoutRoot" Background="White">
<ProgressBar x:Name="MyProgressBar" Width="400" Height="30"></ProgressBar>
</Grid>
C#
ProgressBar MyProgressBar = new ProgressBar();
MyProgressBar.Width = 400;
MyProgressBar.Height = 30;
LayoutRoot.Children.Add( MyProgressBar );
If you now view your application in the browser you'll see an empty progress bar, so in the next step let's add some action to it. For that purpose we have to options.
Determinate and indeterminate progress bar
The progress bar has two states - determinate and indeterminate - and to choose between them we use the IsIndeterminate property of the control.
Determinate
When set to false, the ProgressBar control reports progress based on the Value property. In this case we have to set the Minimum and Maximum properties too:
<Grid x:Name="LayoutRoot" Background="White">
<ProgressBar x:Name="MyProgressBar" IsIndeterminate="False" Minimum="0" Maximum="100" Value="30"
Width="400" Height="30"></ProgressBar>
</Grid>
The progress is calculated on the base of the range (Maximum - Minimum) and the Value property. To change the progress we have to change the Value property. Here is a little sample:
For example we can use this in a scenario where we're downloading a file and the overall length of the process is known.
Indeterminate
When the IsIndeterminate property is set to true, the ProgressBar control reports generic progress with a repeating pattern, like this:
In this case the progress doesn't depend on the Value property so we don't have to set anything else.
The indeterminate progress bar can be used in scenario where the process with unknown length is in progress, like calling a web service for example.
Styling
We can style the ProgressBar control as any other Silverlight control and here are some examples for basic changes in the look of the control.
Background and Foreground
The Background property is applied to the color of the container of the progress bar control and the Foreground property applies to the color of the progress bar.
<Grid x:Name="LayoutRoot" Background="White">
<ProgressBar x:Name="MyProgressBar" IsIndeterminate="False" Background="Black" Foreground="Orange"
Minimum="0" Maximum="100" Value="30" Width="400" Height="30"></ProgressBar>
</Grid>
Border
The ProgressBar control has a BorderBrush and a BorderThickness properties, which allow you to add a border to the control.
<Grid x:Name="LayoutRoot" Background="White">
<ProgressBar x:Name="MyProgressBar" IsIndeterminate="False" BorderBrush="Black" BorderThickness="2"
Background="Black" Foreground="Orange" Minimum="0" Maximum="100" Value="30"
Width="400" Height="30">
</ProgressBar>
</Grid>
Templating
The ProgressBar control allows templating and it can be done the standard way:
<ProgressBar x:Name="MyProgressBar" IsIndeterminate="False" Minimum="0" Maximum="100" Value="30" Width="400" Height="30">
<ProgressBar.Template>
<ControlTemplate>
...
</ControlTemplate>
</ProgressBar.Template>
</ProgressBar>
Important events
- Value changed - raised when the Value property is changed.
Summary
This article was an overview of the basic features of the ProgressBar control. We have explained the two states of the progress bar, which make the control usable in different scenarios, and we have also showed how to make some basic changes to the look of the control. As a conclusion I can say that the Silverlight team did a really good job creating this control.
If you have any questions or suggestions, post them as comments and I will gladly answer you.