Deep Zoom Collections Example

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)

Comments (37)

  1. Up until now, all of the Deep Zoom samples we’ve shown in this blog were of single high-resolutions

  2. Up until now, all of the Deep Zoom samples we’ve shown in this blog were of single high-resolutions

  3. Brad Spencer says:

    Thanks!  Now I can finish my project…

  4. John says:

    Awesome guys. I have updated my little sample integrating this and the keyboard events. I do like the mouse click / mouse shift click to zoom in and out.

    So the next question is how do we add metadata or link to a database record for the images so we can filter / sort and show additional information?


  5. Kirupa (MS) says:

    John – great suggestion. We’ll look into that for our next example…using metadata to sort your collections 🙂



  6. Michael Sync on User Control Inheritance, Expression Team provides DeepZoom collection example, Pete

  7. Garry Trinder says:

    @Kirupa: I second that: I want metadata!

  8. George Bell says:


    I’ve got some question about performance…I spent the weekend making a collection of images…11,000 to be exact (only took about 12 hours of processing)…we used the built in vista photo tagging and made them searchable (using LINQ, since there is no dataset support in silverlight)…

    There were a number of issues I had with the performance, I’m wondering if you have any suggestions…

    1. The directories that are created have a lot of files/folders (1,100,000 files, 100,000+ folders, 6+ gigs)….they take a lot of time to move around (vista sp1, perhaps due to ntfs?) Is there a way to group them in one file (cab/zip, or some other file that is easy to move around?)

    2. We tried to do similar effects as the hardrock demo (translate/opacity animations)…is there a way to do this on 10,000+ images in a performant way? Right now we’re moving them all to a place off screen and fading at the same time (ie -100,-100)…the storyboard doesn’t animate smoothly, it ends up being a little jerky (does deepzoom use hardware acceleration?)

    3. If once we have a lot of 0% opacity images at -100,-100 we then scroll to that location, the interface becomes very slow/jerky (is there a way to set visibility for the images after the opacity is 0%?)

    4. The program loads quickly and runs well (scrolling/zooming, above issues not withstanding)…but closing IE becomes a big issue (we’re seeing 300+megs of ram usage, and closing IE causes problems)….

    All that said, this stuff is great! We’re looking forward to being able to do alot of great things with it!

  9. Brad Spencer says:

    I agree, the MultiScaleImage control is very cool, but there does seem to be some limiting aspects of it.  It would be great for the SL2 release to expose Add/Remove methods on the subimage collection so that we don’t have to work with all images at once and use opacity tricks.  This should improve the perf issues as well.  It would also be wonderful to have an AutoArrange property that could work similarly to a stack panel (maybe 3 options: static/horizontal/vertical).  Oooh and databinding support!  I know I’m dreaming…  😉

    Oh, and one other thing I’ve noticed:  when a MSI control is resized larger at runtime the appropriate events are fired, but not when it is resized smaller.  Is this on purpose or a bug?

  10. Nice… The other cool thing would be to arrange the images in a grid where the height of all images in a row is the same but can change across rows, much like the Hard Rock site. I have an algorithm for this on my site,, and will try to put up some sample code snippets soon (unless you guys beat me to it!)

  11. I noticed that the animation code adds the storyboard to the resources but never really cleans up after it. It could be done in the Storyboard.Completed event – msi.Resources.Remove(sender).

    Would it be more efficient to create a single storyboard for all the images by adding the animation of each image as a child to the storyboard? I noticed that you were creating a separate storyboard for each image and hence was wondering if there is any performance/resource implications by taking the alternate approach.

    I understand that this is just sample code but thought that I would point this out in case there are folks applying this logic as is to a large number of images.


  12. George Bell says:

    I am using 1 storyboard with 11,000 photos and not getting good results…all the DoubleAnimation and PointAnimation objects are being created, added to the storyboard and targeted before they are used (ie in ImageOpenSucceeded)…then are reused each time, although the first time it is run it shows bad results anyways (so not an issue with lots of items getting added to the graph)…extending the duration of the animation results in similar choppy results…I have an ati x1650

    The 11,000 pointanimations/double animations seems to be the problem…is there anyway to create one of each and apply it to a group of items (it won’t look as cool as the hardrock demo since they will all move as a group, rather than individually)…

    Totally agree about being able to make subgroups (aka views) and then "auto-arrange"…very useful for collections…

    Also, not sure if everyone has taken a look at the command line tools (sparseimagetool)…I found it almost by accident when I was trying to figure out how to not manually have to make my collections 🙂

    It also appears that zipping 1,100,000 files is going to take about 4 hours….but I’m looking forward to getting this on a server with some upstream bandwidth 🙂

    Also wondering if there is a way to "add" new images to a collection….from the perspective that it took 12 hours to generate mine from 11,000 images….if I add a new image do I have to regenerate all 11,000 images, will the bin file be in sync still?

  13. George, Let us know when it’s up on a server. I would love to see if my laptop can render the images!

  14. Garry Trinder says:

    Wow George, that’s awesome 🙂 How did you actually compile those images? Don’t tell me you used that pesky Composer….

  15. George Bell says:

    The command line tool (sparseimagetool.exe) is included with the composer…you can run it from the command line and get information on how to use it…I just created a sparseimagescenegraph.xml file (if you need help on how to make this file, open the ones that are created by the composer) and told it to export to an sdc file (if the extension is wrong it doesn’t seem to export)…

    If you run it as follows you get a nice little interface with options on how to export:

    SparseImageTool.exe CreateCollection

    I’m still trying to figure out what some of the command line options do….some more information about what the compression feature does and the single file vs. exploded does would be nice. (I wonder if that would fix my 1.1 million file problem)…something to try out…

  16. 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…

  17. AaronE says:

    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!!!


  18. Kirupa (MS) says:

    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.

  19. Garry Trinder says:

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

  20. Kirupa (MS) says:

    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 😛

  21. Garry Trinder says:

    @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?

  22. Garry Trinder says:

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

  23. 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.

  24. 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.

  25. Yuvi says:

    @Wilfred Pinto: Thanks! Never thought of that 🙂

  26. Chris Koenig says:

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

  27. ChrisKoenig says:

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

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

  29. Lampros says:

    thanks for the link for the example

  30. wwhite says:

    Will you be updating this example to beta 2?

  31. Zazie says:

    I’m very interested to see this work in Beta 2 as well.

    I downloaded the source and tinkered with it a bit, but unfortunately I’m not familiar enough with Silverlight to fix all of the errors that it has.

    It would be monumentally helpful if you could update this example! 🙂

  32. Kirupa (MS) says:

    Zazie – I can try to have it updated soon and have it posted here. Many of the ideas in this have been extended and used here:

    The above example does work in Beta 2, and I have provided the source files for you or anyone to see and modify.


  33. Ashish says:

    Deep zoom composer is really cool!

  34. Kam says:

    don’t upload file that doesn’t work…it’s useless

  35. Kirupa (MS) says:

    Kam – this example is something I’ll need to update in the future, but you can see a working example + source code here:


    Kirupa =)