This is the 3rd and final part of my three-part tutorial on visualizing O'Reilly with Silverlight Deep Zoom. In the first part we looked at how to download hundreds of O'Reilly book covers using C#. In the second part, we saw how to stitch those images together into something a little more friendly for Deep Zoom Composer. In this part, we're going to create a Deep Zoom Composer project, export the final images, and build the finished Silverlight application.
In order to build Deep Zoom applications, you're going to need to download Microsoft's Deep Zoom Composer. Everything else you should already have - especially if you're building Silverlight applications. In case you haven't checked out the previous tutorials yet, below is the application we'll be building today.
Step 1 - Import the Images
Deep Zoom Composer is separated into three parts: Import, Compose, and Export. The first thing we're going to need to do is import all of the O'Reilly book covers.
Using the application that we created in part 2 of this tutorial, my O'Reilly book covers have been combined into 21 rows each containing 38 images. Each row is 19,000 pixels wide and around 1,000 pixels tall. The reason I didn't import each image separately is that Deep Zoom Composer eventually used up a ton of memory and crashed when I attempted to do so. I have not re-tried that option using the latest version, however at the time, there seemed to be a maximum number of images it could handle.
Simply click the "Add Image" button on the right side of the screen and select your images. Once complete, you should have something similar to the image below.
Step 1 - Compose the Images
Once we've got the images imported, it's time to compose them into what the final application will look like. Click the compose tab at the top of the page to enter the composition area. Once in there, simply select all the images using the list view at the bottom and drag and drop them onto the canvas.
As you can see, Deep Zoom Composer staggered the images by default, which is not what we want. Fortunately, it's got some nifty tools for arranging images. With all the images selected, right-click one of them to bring up the "Arrange into Grid" dialog.
Since I have 21 rows of images, I set the "Constrain by" option to Rows, the "Number of Rows" option to 21, and the "Padding" to 0 (since I don't want any space between my rows).
Once you click OK on that dialog, Deep Zoom Composer will arrange the images exactly like they're supposed to be.
Step 3 - Export Deep Zoom Project
Now that the image are composed how we want, it's time to export them from Deep Zoom Composer to something that can be used by our Silverlight application.
Simply go to the "Custom" tab, set the "Output type" to "Silverlight Deep Zoom", give it a name, choose a location, then hit "Export". All the other default options will work fine for us. The export process will take several minutes, depending on how large your project is.
What Deep Zoom Composer generates for you is a couple of different things. First it will create a folder called "GeneratedImages". This folder contains hundreds of images that Silverlight will request and combine when a user is using the Deep Zoom application. Inside this folder is also a file called "dzc_output.xml". This file will be the actual source of the MultiScaleImage object that will be used when building our app.
Step 4 - Build the Silverlight App
Now we're down to the good stuff - actually building up the final application. Once you've got a new Silverlight application ready, the first thing you're going to need to do is get the GeneratedImages folder into your project. I copied and added it the ClientBin folder of the ASP project.
The first piece of code we need to write will create the multiscale image object and set it's source to our Deep Zoom Composer output.
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="600" Height="400" Background="Black">
<Grid x:Name="LayoutRoot" Background="White">
<MultiScaleImage x:Name="msi" Source="../GeneratedImages/dzc_output.xml"/>
</Grid>
</UserControl>
If you were to actually run this right now, you'd see what looked like a finished, working, application. However, you'll find out quickly that none of the nice mouse gestures work. Unfortunately, these aren't built into the MultiScaleImage object, but Microsoft did provide source code to hook it up. The code-behind for this app looks like this:
using System.Windows.Controls;
using System.Windows.Input;
namespace OReillyDeepZoom
{
public partial class Page : UserControl
{
//
// Based on prior work done by Lutz Gerhard, Peter Blois, and Scott Hanselman
//
double zoom = 1;
bool duringDrag = false;
bool mouseDown = false;
Point lastMouseDownPos = new Point();
Point lastMousePos = new Point();
Point lastMouseViewPort = new Point();
public double ZoomFactor
{
get { return zoom; }
set { zoom = value; }
}
public Page()
{
InitializeComponent();
//
// Handling all of the mouse and keyboard functionality
//
this.MouseLeftButtonDown +=
delegate(object sender, MouseButtonEventArgs e)
{
lastMouseDownPos = e.GetPosition(msi);
lastMouseViewPort = msi.ViewportOrigin;
mouseDown = true;
msi.CaptureMouse();
};
this.MouseLeftButtonUp += delegate(object sender, MouseButtonEventArgs e)
{
if (!duringDrag)
{
bool shiftDown =
(Keyboard.Modifiers & ModifierKeys.Shift) == ModifierKeys.Shift;
double newzoom = zoom;
if (shiftDown)
{
newzoom /= 2;
}
else
{
newzoom *= 2;
}
Zoom(newzoom, msi.ElementToLogicalPoint(this.lastMousePos));
}
duringDrag = false;
mouseDown = false;
msi.ReleaseMouseCapture();
};
this.MouseMove += delegate(object sender, MouseEventArgs e)
{
lastMousePos = e.GetPosition(msi);
if (mouseDown && !duringDrag)
{
duringDrag = true;
double w = msi.ViewportWidth;
Point o = new Point(msi.ViewportOrigin.X, msi.ViewportOrigin.Y);
msi.UseSprings = false;
msi.ViewportOrigin = new Point(o.X, o.Y);
msi.ViewportWidth = w;
zoom = 1 / w;
msi.UseSprings = true;
}
if (duringDrag)
{
Point newPoint = lastMouseViewPort;
newPoint.X += (lastMouseDownPos.X - lastMousePos.X) /
msi.ActualWidth * msi.ViewportWidth;
newPoint.Y += (lastMouseDownPos.Y - lastMousePos.Y) /
msi.ActualWidth * msi.ViewportWidth;
msi.ViewportOrigin = newPoint;
}
};
new MouseWheelHelper(this).Moved +=
delegate(object sender, MouseWheelEventArgs e)
{
e.Handled = true;
double newzoom = zoom;
if (e.Delta < 0)
newzoom /= 1.3;
else
newzoom *= 1.3;
Zoom(newzoom, msi.ElementToLogicalPoint(this.lastMousePos));
msi.CaptureMouse();
};
}
private void Zoom(double newzoom, Point p)
{
if (newzoom < 0.5)
{
newzoom = 0.5;
}
msi.ZoomAboutLogicalPoint(newzoom / zoom, p.X, p.Y);
zoom = newzoom;
}
}
}
Since I didn't write the code, I'm not going to explain it. You'll just have to copy and paste it into your project. The MouseWheelHelper object comes from a file provided by Microsoft called MouseWheelHelper.cs. You can download this class from the files attached to this tutorial.
If you run the application now, you'll see that all the mouse clicks, drags, and wheel clicks do exactly what they're supposed to. In fact, we have a fully functional Deep Zoom application that matches the example at the beginning of the tutorial.
And that does it for this post. You can download a Visual Studio 2008 project for the example application below (everything except the images). If you've got any questions or comments, simply leave them below.
08/01/2009 - 17:37
Thank you for this post.
You saved me a lot of time and research.
01/29/2010 - 00:44
THanks a lot... IT WORKED !
MSDN code didnt work . But yours did !
:)
01/31/2010 - 07:33
i m constantly getting an error:
Error 1 The name 'msi' does not exist in the current context C:\Users\Harsh\Documents\Visual Studio 2008\Projects\SilverlightApplication1\SilverlightApplication1\MainPage.xaml.cs 46 52 SilverlightApplication1
this error occurs at 21 places
kindly help
02/01/2010 - 10:08
The msi name is set in the XAML.
02/02/2010 - 02:23
Im getting the same error too. I have set x:Name = "msi" in the XAML. Still get the error when I compile the project. Does anything need to be changed to make the code work for SilverLight 3??
Thanks a lot.
Great example btw.. Helped me understand DeepZoom composer real quick. Thanks for your effort.
06/01/2010 - 11:12
Hi thanx for the wonderful post. is it possible to set tooltip and provide a label next to each image so as the user can identify the image?? can we give the label to each image separately in silverlight 3 after creating the image zoomer in Deep Zoom Composer???
07/19/2010 - 12:40
Hi,
Just a question, I have an error with this code below:
'DeniseSilverlightDeepZoom.MouseWheelHelper.MouseWheelHelper.worker' is inaccessible due to its protection level
How do I get it to be accessible?
07/19/2010 - 12:46
The MouseWheelHelper class could be marked private or the field/property "worker" could be marked private. Look in the source and change the level to "public".
07/19/2010 - 16:24
thanks for the help. But I have one question, I noticed that when I load the page I don't see my pictures. So what's the problem?
07/19/2010 - 16:29
Are you running the page in a local test server? I noticed sometimes that images won't load when the app is run outside of a webserver. Check out this forum post.
07/19/2010 - 17:39
yes I'm running the page in my local test server. How would I go about running the app outside of the server?
I totally new in Silverlight programming.
07/19/2010 - 20:25
Since Silverlight is entirely client-side, all you have to do is find the output HTML file and open it directly in a web browser (file://...). Most of the time this is a very quick way to test the app - it's just that Silverlight's security prevents some things from working when the page is loaded from the hard drive like this.
Other than that, I can't think of any reasons why the images wouldn't be loading. Double-check that the path you've specified is correct and the images are there.
07/20/2010 - 12:18
okay thanks. I'll double check my program.
07/20/2010 - 17:43
Thank you for helping me out. :) My Deep Zoom project finally worked.
08/02/2010 - 05:48
Anonymous............Anonymous
01/13/2011 - 04:05
Hi,
Its nice!
Do you sample just like memorabilia wherein you can insert text on it? thank you