Silverlight Tip of the Day #49 – How to Implement a Progress Bar
With the release of Silverlight 2 RC0 there are three new controls we will be discussing that were not available for beta 2. The three new controls with a Tip of the Day for each include:
For this tip we will be exploring the ProgressBar control. The following code below shows how to declare a ProgressBar in your XAML:
<ProgressBar Foreground="White" Background="Gray" Value="25" Maximum="100" Width="200" Height="20" Margin="20">
Let’s take a look at each of these properties in the ProgressBar and what they do:
- Foreground – The color of the acutal bar in the ProgressBar.
- Background – The background color of the control.
- Value – The starting value for the ProgressBar.
- Maximum – The end value for the ProgressBar.
- Width/Height – The width & height of the ProgressBar.
- Margin – The gap between the control and it’s parent container. I find it easier to use Margin over setting Canvas.Left and Canvas.Top.
Add a timer and you can move the progress bar to it’s Maximum value:
namespace Password
{
public partial class Page : UserControl
{
Storyboard _timer = new Storyboard();
public Page()
{
InitializeComponent();
_timer.Duration = TimeSpan.FromMilliseconds(10);
_timer.Completed += new EventHandler(_timer_Completed);
_timer.Begin();
}
void _timer_Completed(object sender, EventArgs e)
{
if (MyProgress.Value < MyProgress.Maximum)
{
MyProgress.Value++;
_timer.Begin();
}
}
}
}
If you run this control as is you will see it start at 25 and end when it’s full:
Begin:
End:
Now if you don’t want to use a timer and want the progress bar to repeat non-stop you can set the the property IsDeterminate to “true”
<ProgressBar IsIndeterminate="True"/>
You can further customize your ProgressBar by setting the Background and Foreground to any of the available brushes:
- Brush
- GradientBrush
- LinearBrush
- Imagebrush
- LinearGradientBrush
- RadialGradientBrush
- SolidColorBrush
Here is an example using an ImageBrush:
<ProgressBar Value="25" x:Name="MyProgress" Maximum="100" Width="300" Height="50" Margin="20">
<ProgressBar.Foreground>
<ImageBrush ImageSource="Smile.png"></ImageBrush>
</ProgressBar.Foreground>
</ProgressBar>
Begin:
End:
Thank you,
--Mike Snow
Subscribe in a reader