Written by:
Microsoft
Microsoft
Deep Zoom
Mar 05, 2009
Login to Rate
:( Error
0
0
Summary
Describes how to create a Deep Zoom image, load a Deep Zoom image, and add interactivity.
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:
For a complete description of Deep Zoom, see Deep Zoom in the Silverlight documentation on MSDN.
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.
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. 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. 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.bin"
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
Send Feedback