Create a Deep Zoom Application
This section walks through creating a very simple Deep Zoom application. The steps are as follows:
1. Create an image pyramid.
2. Add a Deep Zoom object like MultiScaleImage or MultiScaleSubImage to your application.
3. Hook up events to add interactivity (zoom and panning) to your Deep Zoom object(s).
Create an Image Pyramid
As mentioned above, the best way to create an image pyramid 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.
Add a Deep Zoom object
Once you have a Deep Zoom pyramid, also known simply as a Deep Zoom image, you need a Deep Zoom object like MultiScaleImage to load it. You can create a MultiScaleImage in XAML as in the following example.
<MultiScaleImage x:Name="deepZoomObject" Source="source/items.dzi" />
Or you can create a MultiScaleImage in procedural code as in the following example.
MultiScaleImage myDeepZoomObject = new MultiScaleImage();
myDeepZoomObject.Source = new Uri("source/items.dzi");
Dim myDeepZoomObject As MultiScaleImage = New MultiScaleImage
myDeepZoomObject.Source = New Uri("source/items.dzi")
Note that the Source property points to the Deep Zoom image you created in the first step. At this point, when the Web page opens, the image zooms onto the screen, while going from blurry to crisp resolution.
Hook up Events
At this point, the user cannot interact with the image yet. To enable interaction, you need to hook events to the MultiScaleImage and use procedural code to provide the zooming and panning functionality.
In this simple example, the MouseEnter event is used to zoom into the middle of the image when the mouse pointer moves over the image.
<MultiScaleImage x:Name="deepZoomObject" Source="source/dzc_output.xml"
MouseEnter="DeepZoomObject_MouseEnter" />
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 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
Run this sample
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 <= 0 or >=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.
.png)
Below is the complete code for this simple "mouse-over/mouse-off" zoom. This code includes a MouseLeave event so that when the mouse pointer leaves the image, it zooms and pans back to its original perspective.
<MultiScaleImage x:Name="deepZoomObject" Source="source/dzc_output.xml"
MouseEnter="DeepZoomObject_MouseEnter"
MouseLeave="DeepZoomObject_MouseLeave"/>
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);
}
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
Run this sample