Introduction

In the "old" alpha edition of Silverlight, you could use the Downloader class to download a zip file containing one or many packed media elements (images, videos). The Downloader provided a progress report (to update a progress bar, for example). After the download was completed, you could use the Image.SetSource or MediaElement.SetSource method to directly unpack one file from the downloaded zip file.

In Silverlight 2 beta, the interfaces changed, but you can still do the same operations. Let's see how:

Creating

• Create a new Silverlight 2 Beta project in Visual Studio. Also create a test web site. In my example, the Silverlight application is named GalaSoft.SL.WebClientTest and the test web site is named GalaSoft.SL.WebClientTest.Web.
• In the newly created project, delete Default.aspx and GalaSoft.SL.WebClientTestTestPage.aspx.
• Rename GalaSoft.SL.WebClientTestTestPage.html to index.html.
• Using a utility of your choice, create a Zip file containing multiple media files. Alternatively, you can download one from here.
• Create a XML file named "content.xml" with the media files information, for example:

• Add the file "content.xml" to the zip file, in the root.
• Add the zip file (renamed Media.zip) to the project GalaSoft.SL.WebClientTest.Web.

Designing the XAML UI

• Open the file Page.xaml and copy the following XAML code:

This XAML code contains an Image and a MediaElement, used to display images and videos. It has a TextBlock to display the download progress. And two buttons in a StackPanel, to display the Previous and Next media.

Declaring attributes

• Open the filePage.xaml.cs.
• Add 3 private attributes:

The attribute _mediaInfos will contain the list of media information read from the XML file. The attribute _zipInfo stores the StreamResourceInfo read from the Zip file. Finally, the _mediaIndex stores the index of the media file currently displayed by the application.

Starting the download

• Add an event handler to the "Loaded" event for the Page:

• In the Page_Loaded event handler, start the download. Note: The URL of the Zip file must be entered as relative to the "xap" file, which is located in the ClientBin folder.

• Handle the DownloadProgressChanged event. This simply updates the ProgressTextBlock, showing how many percents of the Zip file was downloaded.

Reading the XML file

• The most complex method is the one called when the Zip file is finished downloading. Let's copy the code first, and then we will review it:

• First, we check if there was an error downloading the file. if it's the case, the e.Error is not null, and contains information about the error.
• Then, we convert the stream returned by the web client in the e.Result property into a StreamResourceInfo. This class is the center of the whole process. We store this reference in a private attribute, because we will need it every time that we want to display a new media file. We do not unzip the downloaded file!! We just keep it in memory.
• Then, we can start reading from the Zip file. The first thing we read is the XML file. We use another StreamResourceInfo instance to get the XML file's stream. We then pass the Stream to a StreamReader, and eventually we construct a XDocument with this reader. The XDocument class is allowing us to use LINQ to XML to load the XML elements easily.
  Important: To use the XML to LINQ library, you must add the DLL System.Xml.Linq to the project's references.
• The next block of code uses LINQ to create a collection of MediaInfo instances. This class is declared after the Page class (see below). One MediaInfo instance simply reflects the XML file's content: Which type does the media file have (video or image), and the file name. After the collection has been loaded with LINQ, we initialize a List with this information, so that we can enumerate the files easily.

Displaying the media

• Once done, we are ready to roll: We simply hide the progress TextBlock, enable the buttons and display the first media.

• The method DisplayMedia above displays the media file corresponding to the index. First it uses the information passed in the MediaInfo parameter to get the media file's stream from the Zip file. If the media is a video, you can simply use the method MediaElement.SetSource and "feed" the stream to that method. If the media is an image, it's a bit more complex, and you have to construct a BitmapImage first, and then assign it to the Source property of the Image control.
• Note that we use a different control to display image or video, so we must take care of hiding the non-used control.
• The rest of the methods are here to control the application: The buttons Previous and Next simply decrement or increment the index and call DisplayMedia. The method StopVideo stops the currently playing video. Finally, the event handler StackPanel_MouseEnter and StackPanel_MouseLeave change the StackPanel's opacity when the mouse enters it, so that the buttons don't block the media currently displayed.

Additional Enum and Class

• In the end of the file, you'll find an enum for the media type, and the MediaInfo class:

Conclusion

This code demonstrates how easy it is to pass a Zip file containing various media files to a Silverlight application. In a few lines of code, we have a full blown downloader (including download progress indication), and a UI displaying mixed videos and images. The beauty of it is that all the information needed is contained in a XML file, so you can change the content of the Zip file without recompiling the application. It also shows how to use LINQ to XML to load a XML file in a very concise and easy way.

• A demo can be seen here.
• The source code is available here.
• Note: To save space, I removed the media zip file from the source code. It is available as a separate download here.