Silverlight Deep Zoom

Analogy categoryAnalogies

Deep Zoom and Multi-Scale Images

Deep Zoom, based on the Seadragon technology Microsoft acquired, lets Silverlight applications pan and zoom smoothly into extremely large images without ever downloading the full-resolution file up front. Rather than serving one massive bitmap, the source image is pre-processed into a pyramid of progressively lower-resolution versions, each sliced into small tiles, so the client only requests the tiles needed for the current viewport and zoom level.

🏏

Cricket analogy: A stadium's giant scoreboard camera feed lets a viewer zoom smoothly from the full ground down to a single fielder's boot without the image turning blocky, the same way Deep Zoom serves progressively higher-resolution tiles as you zoom into a huge image.

Creating a Deep Zoom Image Pyramid

Source images are converted into a Deep Zoom pyramid using either the Deep Zoom Composer tool or the DeepZoomTools.exe command-line utility (built on the Microsoft.DeepZoomTools library), both of which slice the image into 256x256 tiles at every power-of-two resolution level and generate a .dzi XML manifest describing the format, overlap, and tile size. This precomputation happens once at authoring time, not on every request.

🏏

Cricket analogy: Preparing a giant matchday poster by pre-cutting it into labeled tile pieces at multiple sizes so a printer can assemble only the sections needed works the same way Deep Zoom Composer or DeepZoomTools.exe slices a source image into a pyramid of 256x256 tiles described by a .dzi XML file.

xml

<!-- stadium_panorama.dzi, generated by Deep Zoom Composer -->
<Image TileSize="256" Overlap="1" Format="jpg"
       xmlns="http://schemas.microsoft.com/deepzoom/2008">
  <Size Width="12000" Height="8000" />
</Image>

DeepZoomTools.exe can be scripted as part of a build pipeline (e.g. via Microsoft.DeepZoomTools.dll called from a small console app) so that large source images dropped into a content folder are automatically re-sliced into a fresh tile pyramid whenever the source asset changes.

Working with the MultiScaleImage Control

In XAML, a MultiScaleImage control's Source property points at a .dzi file (or a collection XML), and the runtime handles requesting the correct tiles as the user pans and zooms. The ViewportWidth property controls the zoom level (a smaller value means more zoomed in), while ViewportOrigin controls which part of the image is centered; a typical mouse-wheel handler recalculates both together so zooming stays centered on the cursor.

🏏

Cricket analogy: A fan pinch-zooming into a stadium seating chart on a ticketing app sees the visible window (ViewportWidth) shrink while ViewportOrigin shifts to keep the tapped seat centered, exactly how MultiScaleImage recalculates its viewport on a Silverlight canvas.

Collections and Composition

Deep Zoom also supports collections, where many separate images are packed into a single sparse pyramid described by a collection XML that lists each image as a MultiScaleSubImage with its own position, size, and viewport bounds within the composed scene. This lets an application arrange dozens or thousands of images as a navigable wall, then animate the MultiScaleImage's viewport to a specific sub-image's Viewport as a hot-spot transition when the user clicks it.

🏏

Cricket analogy: A highlights wall showing dozens of player photos arranged in a grid that a fan can click to zoom into one player's career stats page works the same way a Deep Zoom collection XML arranges multiple MultiScaleSubImage entries that a Silverlight app can navigate between as hot spots.

csharp

private void PlayerWall_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    Point clickPoint = e.GetPosition(PlayerWall);
    int index = PlayerWall.HitTest(clickPoint);
    if (index >= 0)
    {
        MultiScaleSubImage subImage = PlayerWall.SubImages[index];
        AnimateViewportTo(subImage.ViewportOrigin, subImage.ViewportWidth);
    }
}

Deep Zoom collections built from thousands of sub-images can generate a very large sparse pyramid on disk; always validate the composed collection's total tile count and storage footprint during content pipeline testing, since a poorly composed collection can bloat hosting costs significantly.

Deep Zoom is built on Seadragon technology and streams only the tiles needed for the current view.
Source images are pre-sliced into a pyramid of 256x256 tiles described by a .dzi XML manifest.
Deep Zoom Composer or DeepZoomTools.exe generate the pyramid at authoring time, not per-request.
MultiScaleImage.Source points at a .dzi or collection file; ViewportWidth and ViewportOrigin control zoom and pan.
Collections pack many images into one sparse pyramid using MultiScaleSubImage entries.
Clicking a sub-image can animate the viewport to its bounds for a hot-spot zoom transition.
Large collections should be validated for tile count and storage footprint before deployment.