Silverlight 4 – Displaying a Bunch of Files from a Zip File

One of the things I often find when publishing blog posts is that I want to display a bunch of files. For instance – in talking about WPF or Silverlight you might be trying to show something that involves a XAML file and a couple of code files and it can be a bit painful if you have to do that with 3 separate lumps of embedded text inside of a blog post.

I was thinking about that problem a bit more generally and I wondered how I could do something such that I’d have a control that I could just drop into a blog post in order to display a number of files. Almost like a mini-explorer view across a set of files.

I figured that I could use Silverlight for this and then I pondered a little on how I’d want to file-set packaged in order that it’d be as little trouble as possible to create one of these plug-ins. I decided on Zip.

There are a few zip libraries out there for .NET but I settled on using the DotNetZip project from CodePlex which I brought down in source form and hacked to work with Silverlight.

When I say “hacked” I do mean hacked. There’s one key sticking point in using that library in that it looks to rely on a particular IBM437 codepade which seems to be prevalent in zip files. However, Silverlight supports UTF8 and Unicode and so what I ended up doing was hacking the library so that it only deals with UTF8. This may well mean that my code doesn’t deal with a bunch of ZIP files. I’m hoping that the original library writers might try and do a Silverlight version and then maybe I can just reference that rather than hacking around in code that I didn’t want to get too involved in 🙂

Because of using DotNetZip, the rest of the code here is licensed under the Microsoft Public License so please bear that in mind.

Anyway, I took DotNetZip and turned it into a little Silverlight application. The idea is that you put the XAP for this onto a website next to some zip files. By default it looks for Content.zip but that can be changed by using initParams when the application is run as in the example below which points the application at its own XAP file;

image

Here’s the application in use to display its own source code;

A note – the application is rubbish at displaying anything other than a text file right now so take care if you click on a binary file as the app’s likely to blow up.

I built this with Silverlight 4 and Visual Studio 2010 Beta 2. I also tried to be a little more structured than for some of the code that gets thrown onto this blog 🙂 and I also used MEF in order to plug things together which worked out pretty well for me. I also make use of the Silverlight Toolkit for theming support and one or two other pieces.

I could use MEF in order to add different viewers based on file extensions – wouldn’t be too difficult to use the PackageCatalog and download additional plug-ins that knew how to view image files etc. Equally, syntax-colouring would be another area for add-ins to plug in.

Along the way I encountered a few hitches that had to be worked around but nothing too serious. I had one or two disagreement with the TreeView in that I didn’t seem to be able to;

  1. Nicely databind its SelectedItem
  2. Nicely databind its ItemsSource in that you have to jump through a hoop or two creating TabItem that other items controls don’t ask you to do

but, here’s the source-code for conventional download if you want to take a look at it outside of the application above.