Silverlight Deep Zoom

Like a lot of folks, I was pretty impressed the first time I saw Silverlight 2.0’s new Deep Zoom feature at work. So I downloaded Deep Zoom Composer and starting building apps to see what makes Deep Zoom tick. Deep Zoom Composer is cool, but what really makes Deep Zoom shine is the MultiScaleImage control. It is amazing how much you can do with so little code.

I built an app that incorporates some of my favorite travel photos:

You can zoom in and out with the mousewheel or pan around by dragging with the left mouse button down. Some of the photos I used are higher-res than others, but in most of them you can zoom in enough to reveal quite a lot of detail.

You can view the app online, and you can download the source code. The download doesn’t include the images because the images comprise more than 30 MB. But you can generate your own images and metadata with Deep Zoom Composer and plug them into my demo. All you have to do is copy the output folder created by Composer into DeepZoom_Web’s ClientBin folder and point the MultiScaleImage control declared in Page.xaml to the info.bin or items.bin file in the output folder. Then fire up the app and zoom away.

When I exported from Deep Zoom Composer, I checked the “Create Collection” box to export a collection of images rather than one monolithic image. Although my code currently doesn’t take advantage of it, exporting a collection allows you to use the SubImages property of the MultiScaleImage control to addess the individual images and even to change their position, aspect ratio, opacity, and Z-index. It appears (though I haven’t tried it yet) that you can also change the zoom factor of individual images. Look for an updated demo in the near future that demonstrates some of these enticing capabilities.