Expression Blend and Design

The team blog of the Expression Blend and Design products.

Deep Zoom Collections Example

Deep Zoom Collections Example

  • Comments 37

Up until now, all of the Deep Zoom samples we’ve shown in this blog were of single high-resolutions images. This is the case where you arrange all of your images on the artboard, and during export, flatten everything into a large image before breaking them up into the various tiles. This is actually the default behavior of the Deep Zoom Composer and is done transparently in the background while you export. Single high-resolution images are great, but if you wanted to do more with your images such as programmatically move individual images around or filter your images (similar to the Hard Rock Cafe Memorabilia site), the single high-resolution image is not ideal. That is where the Collections feature of Deep Zoom comes in.

With collections, instead of flattening your entire composition into one image before generating your image tree, you actually generate an image tree for each image in your project. This is almost like generating a single high-resolution image for each image you use. The details are not that important. What is important is that this allows you to control each image individually while still retaining the layered zooming and fading effects that Deep Zoom is really known for.

Instead of just describing collections using text, below you’ll find an example that showcases these features instead:

Click on the Randomize Images button to arrange your initial layout into a grid. Keep clicking on Randomize Images to continue randomly swapping your images while still staying within this grid.

If you are curious to see how the above example was created, below I’ve posted a sample project (make sure you have the Silverlight 2 Tools Beta 1 installed) that contains everything you will need:

slproject Download Sample

As you can see, this is really cool, and best of all, you already have everything at your fingertips to create collections using the Deep Zoom Composer itself. In a Deep Zoom Composer project, from the Export workspace, check the “Create Collection” checkbox, and your output is properly adjusted for collections:


The source files provided earlier contain both the C# Silverlight 2 project as well as the Web Site project where your images are stored. Take a look at the Page.xaml file to see the extra Grid/Column info I added for our MultiScaleimage to ensure our Collections will display initially, and if you are curious to know  how the rearranging animation was done, take a gander at the Page.xaml.cs as well.

In case I never explicitly mentioned it, feel free to reuse and modify any of the source files I’ve posted into your own (hopefully cooler!) examples.


- Kirupa (Expression Blend)

- Lutz Gerhard (Live Labs)

Leave a Comment
  • Please add 2 and 2 and type the answer here:
  • Post
  • Nice find, George. Thanks for sharing!

    I just tried the 'Use Compression' feature and the only thing it does is reduce the size of the items.bin file. Can't imagine how this would improve performance...

  • Karupa, thank you very much for filling my request for this example.  This is exactly what I needed to move forward.  This looks eerily like the new egg site...  Nice.

    I third the request for linq'ed metadata, and I agree that filtering should be included with an added bonus of removing images from the collection (i.e. filtering result sets with deep zoom images based off of linq metadata).

    I think that would tackle all of these questions, and shouldn't be hard to do.

    Thanks again Seadragon team!!!


  • George - I contacted a few colleagues about your question, so they may be able to help you out further :)

    Aaron - I'll add to my list of next things to tackle.

  • A week has passed, no metadata still? Are we expected to use the ZOrder property to store id's?

  • You could always parse the SceneGraph XML file that gets exported, add the metadata node and text, and use LINQ to parse this info on an as needed basis.

    That's not the most ideal way of doing it, but it should get you started :P

  • @Kirupa: Problem: How do I "link" with the scenegraph? I mean, when a single MultiScaleSubImage is clicked, how do I "identify" it? I do need some kind of ID, right?

  • Basic problem here is that there is absolutely NO documentation for the MultiscaleImage Control. Or am I missing something?

  • I have rewritten the code sample into VB version

  • Bug in MultiScaleImage?

    Couple of issues:

    1. Getting in and out of full screen mode is problematic. The MultiScaleImage control retains the size of the full screen mode even after it comes out of full screen. Is this a bug or am I doing something wrong? I can elaborate if required. An example of this can be found here:

    2. Setting the Source property of the MultiScaleImage control programatically works fine the first time. Subsequent setting of this property renders the image but the collection is not accessible. If you look at SubImages.Count you will notice that it still retains the subimages count of the old source.

    I am trying to figure out if I am doing something wrong or if this is the way the current MultiScaleImage behaves. An answer would be much appreciated.

  • yuvipanda,

    It seems like the best way to store metadata information for each image is to have an alternate data structure (could be xml as well) and link the 2 (ie. the alternate data structure and the mutiscaleimage.subimages) using the SubImages index. The starting point for the alternate data structure could be the SceneGraph XML file, as Kirupa mentioned.

    I am planning to put up a filter sample soon, but in the meantime, if you want to find out which image is clicked, you can check out my post:

    The code snippet provided there will return an index into MultiScaleImage.SubImages which could be used to index into the alternate data structure as well.

  • @Wilfred Pinto: Thanks! Never thought of that :)

  • Deep Zoom with filter feature (using Linq) is now available at

  • My most favorite SeaDragon demo is now available via Silverlight DeepZoom. The demo features a “fake”

  • My most favorite SeaDragon demo is now available via Silverlight DeepZoom. The demo features a “fake”

  • If you want to learn what is Silverlight , WPF , Photosynth, Popfly, DeepZoom (SeaDragon) Why to go and

Page 2 of 3 (37 items) 123