Thu, March 6, 2008, 07:13 AM under
Silverlight
One of the demos that captures people's attention with some Silverlight 2 demos is the
Seadragon-based technology that in Silverlight is called "DeepZoom". To see a good example of that in action look at the
Hard Rock Memorabilia site or visit the
Vertigo site (the guys that built the HR experience). The control behind all that is the
MultiScaleImage control. You need to point the
Source property of that to the output you get when you use the
DeepZoomComposer tool. The tool basically takes an image and chops it up to more download-friendly bits that it distributes to folders.
My colleague MikeT had a play with it all and has a
quickstart on his blog. One of the downsides of that approach is that it uses the keyboard for panning around and zooming. I thought I'd take that and try to offer navigation (left/up/right/down) via dragging the mouse and also zooming in by clicking the mouse. To zoom out, I had to keep with using the keyboard (Spacebar was my choice). Assuming that you have the Silverlight 2 runtime installed, the
results are here. The source is work in progress but should anyone care about it too much I can share.
It was actually more work than I anticipated. Detecting mouse movement is easy, but making it scroll half-sensibly dependent on how zoomed in or out it is, and also to vary the drag speed dependent on how aggressively the mouse is moved was not as straightforward (to me). My example also doesn't really make as a good sample because I used an image that isn't sufficiently large or deep. To truly experience the beauty of the control, please visit the links at the top.
If you visit the links at the top you will also find that scrolling is much more natural because in addition to mouse clicking for zooming in, the mouse wheel is also used. Mouse wheel events are not directly supported in managed code and require javascript assistance. There is a sample that shows you how to do that on
mharsh's blog (but it doesn't include the panning and zooming on click).
So if you aggregate all the sources of information I list above, you can come up with the complete sample ;-).