Deep Zoom provides the ability to interactively view high-resolution images in Silverlight. You can zoom in and out of images rapidly without affecting the performance of your application. This Quickstart shows you how to create a Deep Zoom image, load a Deep Zoom image, and add interactivity.

This QuickStart contains the following sections:

Deep Zoom Example

The following example shows Deep Zoom in action. To try this example, click the plus (+) button or use the mouse wheel to zoom in. To zoom out, click the minus (-) button or use the mouse wheel. To reset the view, click the first square button. To reposition the image, drag it with the mouse.

Deep Zoom Sample Download

You can download the Deep Zoom sample from the following location.

Download this sample

Creating a Deep Zoom Image

Before you can develop a Deep Zoom application, you must create a Deep Zoom image, also called an image pyramid. A Deep Zoom image is composed of tiles of JPEG or PNG images at different resolutions. The tile size is typically 256 x 256, but this size can be modified. Each tile is stored in a separate file, and each level of the pyramid is stored in a separate folder. This enables Deep Zoom to fetch only those tiles required for the current size of the image on screen, instead of downloading the entire image. For example, if you zoom in to see only the highlighted middle part of an image, Deep Zoom loads only the highlighted tiles instead of the entire 1024 x 1024 image. The following illustration shows how the Deep Zoom image works.

Creating Deep Zoom images by hand can be tedious, so use a tool like the Deep Zoom Composer. For more information on creating a Deep Zoom Image, see How to: Use Deep Zoom in Silverlight in the Silverlight documentation on MSDN. The file format that is used to access a Deep Zoom image is based on an XML Schema. For more information about the XML Schema that is used by the Deep Zoom file format, see Deep Zoom File Format Overview in the Silverlight documentation on MSDN.

Loading a Deep Zoom Image

Deep Zoom enables smooth loading and panning by serving up multi-resolution images and by using spring animations. You can load a Deep Zoom image by using a Deep Zoom object such as MultiScaleImage. Create a new folder named Source in the \Bin\Debug folder for the Silverlight application in Windows Explorer. In the Exported Data\items\GeneratedImages folder created by Deep Zoom Composer, copy the generated items.xml file and the items_files folder to the Source folder. The following XAML shows how to create a MultiScaleImage named deepZoomObject. The Source property points to the Deep Zoom image.

XAML

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

The following example shows how to load an image. To try this example, click Refresh. When you click, notice that the image is initially blurry and then becomes sharp.

Adding Interactivity to a Deep Zoom Image

After you load a Deep Zoom image, you still cannot interact with it. To enable interaction, you must add events to the MultiScaleImage and use code to provide the zooming and panning functionality.

The following example shows how to use the MouseEnter event to zoom into the middle of the image when the mouse pointer moves over the image. The code also includes a MouseLeave event so that when the mouse pointer leaves the image, it zooms and pans back to its original perspective. To try this example, move your mouse pointer over the image and then move it outside the image.

XAML

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

C#

private void DeepZoomObject_MouseEnter(object sender, MouseEventArgs e)
{
    // If animation springs were turned off, then 
    // turn them back on
    if (deepZoomObject.UseSprings == false)
    {
        deepZoomObject.UseSprings = true;
    }

    // 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);
}

Visual Basic

Private Sub DeepZoomObject_MouseEnter(sender As Object, e As MouseEventArgs) 
    ' If animation springs were turned off, then 
    ' turn them back on 
    If deepZoomObject.UseSprings = False Then 
        deepZoomObject.UseSprings = True 
    End If 
    
    ' 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(sender As Object, 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

In this example, the ZoomAboutLogicalPoint method performs the zooming and panning. The first parameter is the zoom multiplier, which is incremented from the current zoom factor of the image. The second and third parameters of the ZoomAboutLogicalPoint method are the respective x and y coordinates of the logical point of where to zoom in on (or where to pan to). A logical point uses normalized values (0 to 1) for x and y positions within the image. Therefore, the value 0.5, 0.5 is in the middle of the image.

See Also

• Deep Zoom
• Deep Zoom Primer (Blog Post)
• Filter Example (Blog Post)
• Deep Zoom Tools