Article
11/17/2011

How to: Use Deep Zoom in Silverlight

Microsoft Silverlight will reach end of support after October 2021. Learn more.

Deep Zoom enables you to zoom and pan high-resolution images rapidly. Deep Zoom achieves this by using multi-resolution images. This topic shows you how to create a very simple Silverlight application that uses Deep Zoom.

To view a running sample of this application, click the following link.

Run this sample

Creating a Deep Zoom Image

A Deep Zoom image is composed of tiles of JPEG or PNG images at different resolutions that make up an image pyramid. The best way to create Deep Zoom images is to use a tool like Deep Zoom Composer.

To create a Deep Zoom image

Download and install Deep Zoom Composer.
Start Deep Zoom Composer and create a new project.
In the Import workspace, click Add image and add a high-resolution image to the project.
Click the Compose workspace.
On the Images tab, drag the image onto the artboard.
Size the image as needed.
Click the Export workspace.
Click the Custom tab.
In the Output type section, select Silverlight Deep Zoom.
In the Name box, type dzc_output.
In the Location box, specify a location.
In the Image settings section, select Export as a composition (single image).
Leave the other settings as their defaults.
Click the Export button to export the Deep Zoom image files.

Loading a Deep Zoom Image

Once you have a Deep Zoom image, you can use the MultiScaleImage control to load it.

To load a Deep Zoom image

In Visual Studio, create a new Silverlight Application project in Visual Basic or C#.
If you selected the Host the Silverlight application in a new Web site option, while creating your Silverlight Application, open the <ApplicationName>.Web\ClientBin folder for the Silverlight application in Windows Explorer. If you did not select the Host the Silverlight application in a new Web site option, while creating your Silverlight Application, open the \Bin\Debug folder for the Silverlight application in Windows Explorer.
Create a new folder named Source.
In the Exported Data\dzc_output\GeneratedImages folder created by Deep Zoom Composer, copy the generated dzc_output.xml file and the dzc_output_files folder to the Source folder.
In Visual Studio, open MainPage.xaml.

Within the Grid element, add the following MultiScaleImage element.

<MultiScaleImage x:Name="deepZoomObject" Source="source/dzc_output.xml" />

Build and run the application.

You should see Deep Zoom image fill the entire browser window.
Refresh the browser.

Notice that the image is initially blurry and then become sharp.

Adding Interactivity to a Deep Zoom Image

After you load a Deep Zoom image, the user cannot yet interact with the image. To enable interaction, you need to handle MultiScaleImage events and use code to provide the zooming and panning functionality.

To add interactivity to a Deep Zoom image

In Visual Studio, open MainPage.xaml.

Within the Grid element, update the MultiScaleImage element with the MouseEnter and MouseLeave properties.

<MultiScaleImage x:Name="deepZoomObject" Source="source/dzc_output.xml" 
 MouseEnter="DeepZoomObject_MouseEnter"
 MouseLeave="DeepZoomObject_MouseLeave"/>

Open MainPage.xaml.vb or MainPage.xaml.cs.

Add the following code add interactivity to the Deep Zoom image.

Private Sub DeepZoomObject_MouseEnter(ByVal sender As Object, ByVal e As MouseEventArgs)
    ' The ZoomAboutLogicalPoint method allows you to zoom and pan
    ' in the same step. The first parameter is the zoom (3x) and the
    ' third and fourth parameters are the respective x and y coordinates
    ' of the logical point to zoom around.
    Me.deepZoomObject.ZoomAboutLogicalPoint(3, 0.5, 0.5)
End Sub

Private Sub DeepZoomObject_MouseLeave(ByVal sender As Object, ByVal e As MouseEventArgs)
    Dim zoom As Double = 1
    zoom = (zoom / 3)
    ' This time the zoom is reversed (1/3) although the pan 
    ' remains the same - zoom back out from the middle.
    Me.deepZoomObject.ZoomAboutLogicalPoint(zoom, 0.5, 0.5)
End Sub

private void DeepZoomObject_MouseEnter(object sender, MouseEventArgs e)
{

    // The ZoomAboutLogicalPoint method allows you to zoom and pan
    // in the same step. The first parameter is the zoom (3x) and the
    // third and fourth parameters are the respective x and y coordinates
    // of the logical point to zoom around.
    this.deepZoomObject.ZoomAboutLogicalPoint(3, .5, .5);
}

private void DeepZoomObject_MouseLeave(object sender, MouseEventArgs e)
{
    double zoom = 1;
    zoom = zoom / 3;
    // This time the zoom is reversed (1/3) although the pan 
    // remains the same - zoom back out from the middle.
    this.deepZoomObject.ZoomAboutLogicalPoint(zoom, .5, .5);
}

Build and run the application.

You should see Deep Zoom image fill the entire browser window.
Move the mouse pointer over the image to zoom in.
Move the mouse pointer outside the image to zoom out.