Creating Deep Zoom Application for your Images

 

In this lab we will have a closer look on using “Sea Dragon Technology” called “Silverlight Deep Zoom”. Basically used for Zooming and Panning Images.

To work with Sea Dragon you will have to download a tool called as “Deep Zoom Composer” from Microsoft download centre and install it-

http://www.microsoft.com/downloads/details.aspx?FamilyID=457B17B7-52BF-4BDA-87A3-FA8A4673F8BF&displaylang=en

This tool allows you to Zoom and Pan the images like never before. For that you must have High Resolution Images needs to be prepared.

Once you finished installing the Deep Zoom Composer tool, you are ready to use it and deploy the files with Silverlight 2.0. So, let’s get started-

1) Open Deep Zoom Composer tool as shown bellow-

2) This tool follows a simple workflow kind three steps-

i) Import –: Import Images like .jpg, .png etc.

ii) Compose –: Arrange the images as per the requirements. For example set height, width, overlaying images, alignment of images.

iii) Export –: Export Images will allow you to export the Images to DeepZoomPix Technology demonstration or Custom as a Single Image or Multiple Images.

3) So, let’s create a new application by the name DZCSLApplication and start importing few images in our first step to create deep zoom application.

4) I have imported five images as shown bellow-

 

5) Now let’s start looking at how to compose images and what are different tools available for the same-

If you watch it closely, you will see I have done the overlaying of images as highlighted by red box.

6) Once you finish with this have a closer look on a tool bar bellow which will allow you to align the images, and make height and width same with other images-

7) Now the last step is Export the composition as per your requirement. As mentioned earlier you can export the composition either DeepZoomPix Technology demonstration or Custom as a Single Image or Multiple Images.

8) We will export our composition to Silverlight as shown bellow-

As shown above, make a choice of “Silverlight Deep Zoom” option from Output Type. Name the output as SimpleDZCApplication. Image Settings make a choice of “Export as a Collection (multiple images)”. Click Export button.

9) Once Export is completed, Preview the output in Browser and have a closer look at View Project Folder as well.

10) Open the .sln file in Visual studio 2008 and have a closer look on the code which is there in Page.xaml and Page.xaml.cs file.

11) In Page.xaml you will see a control called MultiscaleImage

 <MultiScaleImage x:Name="msi" Source="/GeneratedImages/dzc_output.xml"/>

The Source="/GeneratedImages/dzc_output.xml" property value is coming from ClientBin Folder where the composition output is available.

12) Open Page.xaml.cs file and observe the code which is generated for you by default.

13) Now take a closer look on class file called “MouseWheelHelper.cs”. This will help you to see the Zoom-in or Zoom-out effect by using Mouse Wheel.

14) So, that’s all !! you are done with the assignment.

Now as you have completed writing the sixth Silverlight Lab, let’s have a closer look on seventh lab – “Creating and using Resources in Silverlight 2.0.”