Deep Zoom

Deep Zoom Examples

The following sample 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.

Run this sample

Download this sample

For an example of a Web site that uses Deep Zoom, see Deep Zoom example. To zoom in and out, use the mouse wheel. To reposition the image, drag it with the mouse.

Deep Zoom Scenarios

Deep Zoom can be used in many different areas, but there are three key scenarios where Deep Zoom is particularly useful.

• Exploration of Very Large or High Resolution Images: A classic example of this would be zooming in on parts of a large map to see different levels of detail and then, using the mouse, moving your view around the map surface. As the user moves their view, animations are used to give the user the impression that they are "moving" from one place to the other on the image. Another example would be exploring a professional photo composition made up of high-resolution pictures.

• 3-D Photography: Take pictures of a room, one after the other, creating a collection of photos that make up a 360 degree picture of the room. Now the user can pan around the room with each photo blending into the other.

• Advertisements: You could create a relatively low-resolution image to represent the overall theme of the ad, and then have progressively higher resolution images containing more impressions and data about the product. When the page the ad is embedded in first loads, the ad smoothly sharpens and draws the attention of the reader by loading subsequently higher resolution images. Since the ad progressively loads, it does not significantly impact the user's overall experience of the site. In addition, if the user's mouse enters the ad, different parts of the ad can zoom in.

Deep Zoom Features

Deep Zoom uses multi-resolution images to achieve a high frame-rate and fast open experience for even very large images. On load, only a small amount of data is needed to quickly show something on screen. The initial load experience is to show a low resolution version of the image, and blend in higher resolutions as they become available. This is the reason for the blurry-to-sharp experience in Deep Zoom. It is also the reason that Deep Zoom is able to seemingly open images immediately without much wait time to load image data, regardless of the size of the image. Besides initial loading, this same behavior is experienced as the user interacts with the application (for example, zooming and panning).

Deep Zoom uses spring animations, which gives users the impression of a smooth movement (pan or zoom) around image. These springs animate from an initial to final state, where the gradient relative to time decays exponentially towards 1. The spring destination value is immediately updated in response to a user zoom/pan action. When the developer changes the display viewport, the transition to fit the content into the new viewport also happens using springs to ensure smoothness and visual continuity.

Deep Zoom now supports full hardware acceleration. For more information see, Silverlight Hardware Acceleration topic.

Creating a Deep Zoom Image

Before you can create an application that uses Deep Zoom, you must create 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 tile size is typically 256x256, 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 1024x1024 image.

Note:
Deep Zoom images only support the image files supported by the BitmapImage class.

The following illustration shows how the Deep Zoom image works. The image itself is available in full resolution at the bottom of the pyramid, and lower resolution versions down to 4x4 pixels are stored alongside the full resolution image. The images at each level of the pyramid are stored in 256x256 pixel tiles (indicated by the white lines in the images).

Creating these pyramids by hand can be tedious, so using a tool to convert your images into an image pyramid is recommended. The best way to create Deep Zoom images is to use a tool like Deep Zoom Composer. Using this tool, you can create an image pyramid out of a single image or multiple images arranged in a panorama. The file format used to access the image pyramid uses an XML schema. Again, you can generate this file format using Deep Zoom Composer, but you may want to exert more precise control over your file format by creating the XML by hand or by manually making changes to the generated file. To learn more about the XML schema used by the Deep Zoom file format, see Deep Zoom File Format Overview.

Note:

Photosynth is a tool that uses the same format as Deep Zoom composer making it well suited for Deep Zoom applications. Photosynth was designed for creating three-dimensional, 360-degree models. For example, you could take a series of digital photos of a place you have visited and load the images into Photosynth. Photosynth analyzes each photo for similarities that it uses to build a model of where the photos were taken (stitches them together).

Loading a Deep Zoom Image

Once you have a Deep Zoom image, you need a Deep Zoom object such as MultiScaleImage to load it. The following shows how to create a MultiScaleImage in XAML.

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

The following show how to create a MultiScaleImage in code.

Dim myDeepZoomObject As MultiScaleImage = New MultiScaleImage
myDeepZoomObject.Source = New Uri("source/items.dzi")

MultiScaleImage myDeepZoomObject = new MultiScaleImage();
myDeepZoomObject.Source = new Uri("source/items.dzi");

Note that the Source property points to the Deep Zoom image. When the Web page opens, the image is initially blurry and then becomes 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.

The following example uses the MouseEnter event to zoom into the middle of the image when the mouse pointer moves over the image.

Run this sample

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

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

In the preceding example, the ZoomAboutLogicalPoint method is what does the zooming and panning. The first parameter is the zoom multiplier, which is incremented from the current zoom factor of the image. For example, in this example the default zoom is 1, so the value 3 means that it is zoomed in 3 times. If you were to zoom again using the same value, you would be zoomed in at 3*3 which is 9 times from the original size.

The second and third parameters of the ZoomAboutLogicalPoint method are the respective x and y coordinates of the logical point of where to zoom around (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 because 0.5 is in the middle of 0 and 1. If you specified a coordinate value less than or equal to 0 or greater than or equal to 1, the image would pan completely out of view.

The area of the image the user views at any given time is called the viewport area. The following illustration shows what the viewport area looks like conceptually.

Working with Collections of Images

If you want to work with a set of individual multi-resolution images, for example, programmatically move individual multi-resolution images around the screen or filter your images, you will want to use a collection of images rather than a single high-resolution image. There are two basic things you need to do to work with a collection of images:

1. Export your images as a collection rather than as a single image.

   You can do this in Deep Zoom Composer. Just make sure to select the Export as a collection (multiple images) option when you export your composition. Images within the collection you export are called sub images and each one has its own image pyramid.

2. Access the sub images in the MultiScaleImage (individual MultiScaleSubImage objects) by using the SubImages property.

   The following example shows how to get a list of sub images in a MultiScaleSubImage.

   Private Function RandomizedListOfImages() As List
     Dim imageList As List = New List
     Dim ranNum As Random = New Random
     ' Store List of sub images.
     For Each subImage As MultiScaleSubImage In myMultiScaleImage.SubImages
       imageList.Add(subImage)
     Next
     Return imageList
   End Function
   

   private List<MultiScaleSubImage> RandomizedListOfImages()
   {
     List<MultiScaleSubImage> imageList = new List<MultiScaleSubImage>();
     Random ranNum = new Random();
   
     // Store List of sub images.
     foreach (MultiScaleSubImage subImage in myMultiScaleImage.SubImages)
     {
       imageList.Add(subImage);
     }
   
     return imageList;
   }
   

The following sample allows you to rearrange images in a grid pattern by manipulating all the MultiScaleSubImage objects in the collection. Click the Randomize Images button to see the effect.

Run this sample

Download this sample

See Also

Tasks

Concepts

Other Resources