A Silverlight Deep Zoom Exercise

Silverlight DeepZoom allows you to create a set of (one or more) pictures that load very quickly, and allow for intensive zooming. The technology is based on the creation of a set of images of various resolutions that are being loaded in a sequence from low res to high. This gives you the experience that a picture is loaded in little time, and that the resolution still improves in the few seconds after the picture is first shown. I’ve done an exercise to get the trick into my bag. Doing nothing new, by the way.

But then I wanted to deploy the project onto my test server. That put me in an awkward situation. Silverlight deployment is by Zip files called xap files. If you add the picture collection to the xap, you pass by the intention of DeepZoom that you don’t need to wait for large images to be downloaded before you can see them. So you want to add them to the web application that hosts the Silverlight application. It turned out that WebDeploy overwrites the images every time you redeploy. So the question became: How to add the DeepZoom image collection to the hosting web application in such a way that:

i. The Silverlight application can find it.

ii. WebDeploy deploys it for you.

iii. You don’t deploy it as a resource with your Silverlight application.

The trick that does it is to simply add the directory with the image collection to your hosting web application’s ClientBin directory. Then click the show all files button in your VS2010 project, and finally right click the bleak icon for your image collection and select “Include In Project”. See the screen shots below.

You can play around with the Deep Zoom exercise at my App Shop. Zooming in and out is by rolling your mouse wheel (sorry if you don’t have any 😉 ). Zooming in aims at the mouse pointer location. You can also drag the image around with the mouse and enjoy the nice inertia animation.

Above you see the DZC (Deep Zoom Collection) Source folder represented by bleak icons. Right clicking the Source folder gives you the image below.

Now you can publish your web application safely and easily using WebDeploy.

– Is that all?

– Yes, that’s all.

– But, that’s trivial!

– Yes, it is. But it is also a problem many people struggle hard with, and don’t get it done.