DeepZoom and Silverlight in C#

One of the things I have seen the biggest buzz around lately is DeepZoom.  This is a really cool technology that gives users a whole different way to display images or show vast amounts of data.

When you are looking to get started with this technology, it is difficult to know where to start, there are so many different blog posting around it and many different techniques people are using.  The cleanest I have seen was posted by Scott Hanselman here.  He uses a class that allows all of the zooming with the mouse wheel to be done without the need for javascript.

There is an amazing sample of this technology done at the HardRock Memorabilia site.

NoteThis information is brought to you by: https://blogs.msdn.com/tom

So how do you get started with this?  Well the easiest way is to download a few different things:

  1. Preview of the Deep Zoom Composer
  2. Installation Tips for Silverlight Tools Beta 1 for Visual Studio 2008  - if using VS 2008
  3. Expression Blend 2.5 - if not using VS 2008

Note: there is also a Deep Zoom Composer User Guide

So how hard is this to do yourself?  Well, I wanted to create something using C# so I didn't have to mess with javascript, so I followed along with what Scott did and installed the Deep Zoom Composer and created a project in it:

DeepZoom1

Then you use the Import workspace to bring in your pictures:

DeepZoom2

Then you want to switch to the compose workspace and place the images where you want them:

DeepZoom3

Once that is done, switch to the Export workspace and give it a name and click export.  This will create a bunch of folders with all the necessary files to display this.

Now we create our Silverlight Application project in VS2008 with the new Silverlight beta installed, and select to add a new web to the solution for hosting the control:

DeepZoom5

So take the output folder, called osu for me, and copy the files to where your project can read them from, for example, I placed them under the ClientBin folder of my web application for easier access.  Now you edit the xaml file to add the usercontrol:

DeepZoom6

Notice that we gave this object the name myMsi.  We will use that in the code.  So now we want to setup the hooks for all the mouse events.  I used the same code Scott has on his blog along with the MouseWheelHelper code referenced above also.

That is it.  Just build the project and then browse to the test page, MyDeepZoomTestPage.aspx in my application, and you have your DeepZoom application all complete.

Note: If you use IIS, don't forget to setup .xap files as the mime type application/x-silverlight-app on your IIS instance.  Thanks to Scott for reminding us of that.

kick it on DotNetKicks.com