One of the new features Microsoft released with the Silverlight 2.0 Beta 1 is called DeepZoom. The Hard Rock Memorabilia website is a fantastic example of this technology. I decided to take a dive into this new feature and see what it would take to get a basic demo up and running.
The Deep Zoom Composer was also released and this is where you really need to start. This tool will import your photos for you and export them in a tiled format that the control expects. This is similar to how Google Maps works. I started with the tif source of this image, added it to the composer, and exported the photo. I only used one photo for this example, but you could create a composition of hundreds of photos.
Now that I have my image in the right format, I need to start my Silverlight control. I created the control using Expression Blend. Since Deep Zoom is just a XAML control, this is relatively simple. Here is what it looks like:
<UserControl x:Class="DeepZoom.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
KeyDown="deepZoom_KeyDown">
<StackPanel Background="LightGray">
<MultiScaleImage Source="nw/info.bin" x:Name="deepZoom" ViewportWidth="1.0" />
</StackPanel>
</UserControl>
I have bolded the attribute that points to the exported image. This is how we tell the control where our exported image composition is on the server.
Next, I need to open the control's C# codebehind to support the mouse and keyboard events so users can interact with the image. I will spare you the C# code for now, but here is the result:
- Click on the image to zoom.
- Shift-Click to zoom out.
- I will zoom in
- O will zoom out
- Click and drag to slide the image around
See if you can find the metal 9 on the jeans.
Subscribe