Learning from the Generated Application
Silverlight's MultiScaleImage control is the display engine for Deep Zoom images. To show the image that we created in Deep Zoom Composer, we add a MultiScaleImage control in XAML and set its source to the dzc_output.xml file generated by the composer:

<MultiScaleImage Source="GeneratedImages/dzc_output.xml" x:Name="msi"/> 

You can also set the source for the MultiScaleImage in code:

msi.Source = new DeepZoomImageTileSource(
new Uri("GeneratedImages/dzc_output.xml",
UriKind.Relative)); 

In fact, this is how the generated project sets the source in the latest release, noting a current problem in Expression Blend's handling of MultiScaleImage controls with source set from XAML.

With the XAML snippet you can display the Deep Zoom image, but nothing more. To actually zoom the image you use the MultiScaleImage ZoomAboutLogicalPoint method, specifying a zoom factor and a point on which to center the zoom:

msi.ZoomAboutLogicalPoint(zoom, logicalPoint.X, logicalPoint.Y); 

You'll generally call ZoomAboutLogicalPoint in response to a keyboard or mouse event.

The application generated by Deep Zoom Composer includes these essentials, plus mouse event handlers, mouse wheel support, and panning. It also stubs in handlers for the MultiScaleImage's Loaded and ImageOpenSucceeded events. Reviewing the source output by Deep Zoom Composer is a good place to start learning how to support Deep Zoom in your own applications.

In the generated sample, there are two ways to zoom the image. You can click and shift-click to zoom in and out, or you can use the mouse wheel, rolling forward to zoom in and back for out. Click-to-zoom is implemented with this left button up event handler:

this.msi.MouseLeftButtonUp += delegate(object sender,
MouseButtonEventArgs e)
{
mouseButtonPressed = false;
if (mouseIsDragging == false)
{
bool shiftDown = (Keyboard.Modifiers &
ModifierKeys.Shift) == ModifierKeys.Shift;
ZoomFactor = 2.0;
if (shiftDown) ZoomFactor = 0.5;
Zoom(ZoomFactor, this.lastMousePos);
}
mouseIsDragging = false;
}; 

mouseIsDragging is a variable used to support panning, which we'll discuss in a minute. ZoomFactor is a property that always tracks the current zoom level. It's not used in the generated Page class, but it could be used to display the zoom level in another control. The key part of this function is the call to Zoom, which translates the clicked point into logical coordinates and then calls ZoomAboutLogicalPoint (logical coordinates represent a point within the image as a double value between 0 and 1):

public void Zoom(double zoom, Point pointToZoom)
{
Point logicalPoint =
this.msi.ElementToLogicalPoint(pointToZoom);
this.msi.ZoomAboutLogicalPoint(zoom,
logicalPoint.X, logicalPoint.Y);
} 

The Zoom method is used whether zooming by click or by mouse wheel. The mouse wheel zoom code is fairly simple:

new MouseWheelHelper(this).Moved += delegate(object
sender, MouseWheelEventArgs e)
{
e.Handled = true;
if (e.Delta > 0)
ZoomFactor = 1.2;
Else
ZoomFactor = .80;
Zoom(ZoomFactor, this.lastMousePos);
}; 

But that's because the magic is packed into the MouseWheelHelper class, created by Pete Blois and included with the generated application. MouseWheelHelper uses the Silverlight HtmlPage class to install C# handlers for mouse wheel DOM events, allowing us to get mouse wheel events in our Page class without having to write any JavaScript.

You can drag the mouse to pan the image. Panning is implemented by this code in a mouse move event handler:

if (mouseIsDragging)
{
Point newOrigin = new Point();
newOrigin.X = currentPosition.X –
(((e.GetPosition(msi).X - dragOffset.X) / msi.ActualWidth)
* msi.ViewportWidth);
newOrigin.Y = currentPosition.Y –
(((e.GetPosition(msi).Y - dragOffset.Y) / msi.ActualHeight)
* msi.ViewportWidth);
msi.ViewportOrigin = newOrigin;
} 

To pan, we change the ViewportOrigin of the MultiScaleImage control to a new point that is offset by the amount that we just dragged the mouse along each axis. The currentPosition point is the MultiScaleImage ViewportOrigin at the start of the drag. The change in position is scaled so that it is relative to the size of the viewport; dragging across 1/3 of the control causes the image to move across 1/3 of the viewport.

As with zooming, Deep Zoom itself builds in easing to make panning smoother. Simply setting the ViewportOrigin property makes the image appear to slide gently to its new location. This behavior is controlled by the UseSprings property of the MultiScaleImage, which is true by default. If you set UseSprings to false, the image jumps to its new position when you set the ViewportOrigin.

Deep Zoom Composer's starter Silverlight application isn't all the way up to Hard Rock Memorabilia on its own. To match the latter's features you would need to also add filtering and the ability to link external data to subimages. As mentioned above, you can use the Metadata.xml file generated by Deep Zoom Composer as a source of tag information to support filtering. Wilfred Pinto's blog is an excellent source of information on implementing filters.

By taking your project all the way from source image to Silverlight, Deep Zoom Composer provides a solid foundation on which to build your own applications. The tool has been improving steadily since MIX, and those working with Deep Zoom have continued to come up with new applications for the technology and to build ever more impressive demos (Tim Heuer's blog shows some examples of these). We can't wait to see what the next release will have in store.

* This article was commissioned by and prepared for Microsoft Corporation. This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.