Here is a small/basic but useful sample to create a progress bar in XAML that is updated when making a call to a RESTful web service using WebClient (in my case) for Silverlight from my book. The code can easily be put inside of a self contained Silverlight user control of its own, which would allow it to easily be used in multiple areas of the application. I’ll leave that part up to you :)
The following XAML creates an outer Border panel and an inner Border panel. The outer Border sets the boundaries of the horizontal progress bar. Set the width of the outer Border (named brdProgressBoundary) to whatever width you want. The bar will grows until it reaches this point. The inner Border (named brdProgressMeter) starts with a width of 0 and is incremented using the percentage from the web service’s DownloadProgressChanged event handler to increase its width until it reaches 100% (which is where I has the same width as the outer border). I used a LinearGradientBrush to create a slight color effect in the progress bar. You could add whatever type of content you want here.
<Border x:Name="brdProgressBoundary" CornerRadius="5" Width="250" Height="25"
BorderThickness="1" BorderBrush="#FF00135B" Margin="10,5,10,10">
<Grid HorizontalAlignment="Stretch">
<Border x:Name="brdProgressMeter" Opacity="0.6" CornerRadius="5"
HorizontalAlignment="Left" Width="250">
<Border.Background>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#FEBDE2F4" Offset="0.0"/>
<GradientStop Color="#FF00135B" Offset="0.75"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<TextBlock x:Name="lbProgressValue" HorizontalAlignment="Center"
VerticalAlignment="Center" FontSize="10"/>
</Grid>
</Border>
The key to moving the progress bar is knowing when the progress has changed and by how much. When a call is made through WebClient to a remote web service, if an event handler is added to the DownloadProgressChanged event, the handler receives notification when the progress has changed. For example, the following code will increment the inner border’s width and display a the percentage complete in a TextBlock inside of the inner border. This handler will execute at intervals while the WebClient’s web request is moving along.
C#
private void svc_DownloadProgressChanged(object sender,
DownloadProgressChangedEventArgs e)
{
int pct = e.ProgressPercentage;
lbProgressValue.Text = pct.ToString() + "%";
brdProgressMeter.Width = pct * 0.01 * brdProgressBoundary.Width;
}
VB
Private Sub svc_DownloadProgressChanged(ByVal sender As Object, _ ByVal e As DownloadProgressChangedEventArgs)
Dim pct As Integer = e.ProgressPercentage
lbProgressValue.Text = pct.ToString() & "%"
brdProgressMeter.Width = pct * 0.01 * brdProgressBoundary.Width
End Sub
As you might imagine, you’ll need to initialize the state of the progress bar before each WebClient’s async call and you will need to hide the progress bar when it is no longer needed. Here is the Progress as it looks in process:
Enjoy!
