Seadragon Developer: Silverlight Deep Zoom
Silverlight's implementation of Seadragon, called Deep Zoom, is the fastest, smoothest, zooming technology on the web, able to handle thousands of gigapixel images with high frame rate. The Silverlight plugin is available on all the major browsers and operating systems. To see it in action, check out Hard Rock's memorabilia site, or some of the other Silverlight projects on our showcase page.
Getting Started
First, you'll need to get set up for Silverlight development. Once you've done that, the easiest way to start a project and build content is to use Deep Zoom Composer. You can learn more about the Deep Zoom API at MSDN and there are several Deep Zoom projects on Codeplex for you to learn from, including HD View SL, DeepEarth, and Eventr. Jaime Rodriguez wrote a nice primer as well.
Collections and Images
Silverlight Deep Zoom supports both individual images and collections of images. Single images can be panned & zoomed, while collections of images can also be rearranged. Seadragon.com is a good example of single images, while Hard Rock shows the advantages of collections. Deep Zoom Composer can build either type of project.
Custom Tile Sources
MultiScaleImage supports custom tile sources for images, allowing it to view images arranged differently than the Deep Zoom format. This is useful for map tiles such as Bing Maps and also for content built for other zooming technologies.
Coordinate System
MultiScaleImage works as though you are looking through a camera (viewport) at the image being viewed. You set the origin and width of that camera in terms of the image being viewed. Since images may be arbitrarily large, it is assumed that the width of an image is always 1. To view half an image, use a ViewportWidth of 0.5. Additionally, this coordinate system is also applied to placing the images in a collection relative to each other. In this case, the coordinates tell where the overall page should look at each image. Learn more about the coordinate system on the Deep Zoom blog.
Moving Images in a Collection
Individual images in a collection can be moved around by setting the ViewportWidth and ViewportOrigin on the subimage. The opacity can be changed as well. To make the animation smooth, use a Silverlight storyboard.
Other Silverlight Elements
As part of Silverlight, all other Silverlight elements can be drawn in front of or behind MultiScaleImages. This makes it possible to overlay video, make clickable links, or place buttons on Deep Zoom Images.
