Silverlight 2.0 DeepZoom

I have not done too much with the new Silverlight 2.0 Beta, but one area that interested me was the new DeepZoom capabilities.

DeepZoom is based on the idea of a MultiScaleImage, where the user is able to compose a single (or collage of images) and pan around and zoom in/out, and the image quality remains fairly good at all zoom levels. I believe this used to be called "Sea Dragon" and Microsoft purchased Sea Dragon, and re-branded it DeepZoom.

To see what DeepZoom looks like have a look at the Vertigo showcase site. This gives you a feel.

Anyway, yesterday I set about trying to get it working in my own Silverlight 2.0 app.

And guess what, it’s not quite as intuitive as one would think.

For example I had (probably quite wrongly) assumed that the behaviour shown at the Vertigo showcase site was the default behaviour for a MultiScaleImage, and it’s not. By default the MultiScaleImage does nothing special at all for dragging/zooming, you have to do this yourself.

Most of it is simple CLR mouse stuff, there is however one area that wasn’t clear to me, which is the scrollwheel on the mouse, these are not natively available in Silverlight. You need to hook these events straight from your chosen browser into CLR code. Now again Vertigo being the community minded folk that they are, had a codeplex page which shows how to do this.

So to show what I did to get DeepZoom working for my own app, I followed these steps:

  1. Created a Deep Zoom composer project and exported it (using DeepZoom Composer)
  2. Created a Silverlight 2.0 app in VS2008
  3. Adding a MultiScaleImage  in the Silverlight app
  4. Copied the Deep Zoom composer project output to the web projects ClientBin, and used the Vertigo MultiScaleImageWrapper class to capture mousewheel browser events
  5. Changed the Uri that I need to point to for my Deep Zoom composer project  output (ClientBin/….)

And then I was in business.

You can read the entire article that I wrote over codeproject using this link DeepZoom codeproject article


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s