Building Zoom and Pan Enabled Silverlight Applications with Deep Zoom Composer


The Deep Zoom Composer is an additional tool available to Silverlight developers to compose and export multiple images with zoom and pan functionality. This tutorial is an introduction to the Deep Zoom Composer and how to use it to build zoom and pan enabled Silverlight applications with the help of Expression Blend and Visual Studio 2008.

First second part of this tutorial is the "Deep Zoom User Guide" document provided by Microsoft.

Installation

Download Deep Zoom Composer here and install it: Download from MSDN  

The installation steps should be - Visual Studio 2008, Expression Blend 2, and then Deep Zoom Composer.

Build a Deep Zoom Composer Project

Now we are going to build a Deep Zoom Composer project.

Select New Project, select a folder and type your project name.

1.jpg

Next we are going to add images to the project. Click on Add Image and select images from your machine. I add some images. See below.

2.jpg

Next part is Compose. Click on the Compose button at the top and drag, drop and move images the way you want. You will also see a preview in the left bottom area of the screen. My organized images look like following. 

3.jpg
 

Now we are going to Export the project. Click on the Export option and select Silverlight Export in the tab as you can see from the right side. Make sure to select Output Type option to Export Images and Silverlight Project and click on the Export button.

4.jpg

On next screen, you will be asked to preview and view project and image folder. I select Project Folder.

5.jpg
 

And on next screen, you will see the exported files and Silverlight project.

6.jpg

Now if you double click on the Silverlight solution, it will not be opened in the Visual Studio 2008. You need to right click on the solutuion file and open it in Visual Studio 2008.

7.jpg
 

You will see your project is opened in Visual Studio 2008.

Wait. You are not done yet. Right click on DeepZoomProjectTestPage.html page and set it as the start page. Now you are ready to go. Build and run the project.

8.jpg
 

Now you will see your images in the browser. Now you can scroll mouse wheel to zoom in and zoom out the images. You can also pan the images and they will move from one direction to another.  Here is an zoomed out view.

9.jpg

Here is a zoomed in view.

10.jpg

One panned view. Cool. Huh??

11.jpg

Download the attached project and document for more details. 


Similar Articles
Mindcracker
Founded in 2003, Mindcracker is the authority in custom software development and innovation. We put best practices into action. We deliver solutions based on consumer and industry analysis.