Wahlin on .NET

Silverlight XAML Primer 10: Creating a Silverlight Downloader Progress Bar

Jazz up your downloading process with this download bar in Silverlight.

• By Dan Wahlin
• 03/03/2008

It goes without saying that starting a file download in Silverlight will more than likely cause the user to wait, depending on the size of the download. If the download takes more than a few seconds, the user may think that the application locked up if they aren't give any type of progress indicator. By using the Downloader control's built-in events, you can provide the user with various types of progress indicators so they know the status of a download operation. In this article, I'll walk through the process of creating a progress bar.

Creating a Progress Bar
You can use several different techniques to notify the user about the status of a download. In many cases, a TextBlock that flashes on and off would get the job done. However, by leveraging XAML objects, you can easily create a progress bar or other type of progress indicator using a minimal amount of code.

Listing 1 shows a simple XAML canvas that displays two Rectangle objects and a TextBlock. The first Rectangle (named rectProgress) represents the progress bar. Its Width property will be changed dynamically as the Downloader control's DownloadProgressChanged event fires. The second Rectangle adds a simple black border around the first rectangle and the TextBlock shows the download percentage. By writing a little JavaScript, you can easily update the Width of rectProgress so that the end user can see how much longer they need to wait.

Listing 2 shows an example of creating the Silverlight Downloader control and wiring up its events to event handlers using the AddEventListener() method. Once the event handlers are hooked up, the control calls the Open() method followed by the Send() method to start the download. To avoid the .ZIP file being cached, the code appends the current date onto the end of the file name.

As the download begins, the control's DownloadProgressChanged event fires. This event gives you a way to update the Silverlight canvas with information about the file download. Listing 3 shows an example of an event handler named onDownloadProgressChanged that's used to update the Rectangle and TextBlock shown earlier in Listing 1.

The code starts by accessing the sender object's DownloadProgress property and converts it into a number between 0 and 100. It then locates the rectProgressBorder rectangle to determine the ratio of the rectangle's width since the width may be different than 100. The rectProgress control's Width property value is then changed based on the percentage complete and maximum width of the progress bar. Once the Width property is set, the TextBlock is located and its Text property is assigned the value of the percentComplete variable. 

This small amount of code is all that's needed to simulate a progress bar in Silverlight 1.0. Although a Rectangle is used in this example, you can of course use many other progress techniques.

Once the download completes, the Download control's Completed event will fire and the content of the .ZIP file can be accessed. Listing 4 shows an example of handling the Completed event and using the control's CreateFromXamlDownloader() method to access a XAML file in the .ZIP archive. The output generated by running the code shown in this article can be seen in Figure 1 and Figure 2.