Intro to Silverlight 2 Video Tutorial: DeepZoom for Dummies!


As promised, I’ve just completed a 15-minute video tutorial that shows you how to create a Silverlight 2.0 application using DeepZoom. Even if you are unfamiliar with DeepZoom and just want to learn how to build a cool Silverlight application, this is the tutorial for you!

The tutorial covers project setup as well, which I think is quite valuable if you’re new to the whole Blend / VS 2008 / Silverlight gig.

What am I building?

This. Click to focus the control, press W to zoom in, press S to zoom out.

What you need

  • Visual Studio 2008 (if you’re a student, you can always get it from DreamSpark or your university’s MSDN AA account)
  • The stuff from the Silverlight.net GetStarted site: http://www.silverlight.net/GetStarted
  • Some photographs!
  • A working knowledge of C#

This is loosely based on Scott Hanselman’s early work following the announcement at MIX 2008. If you are interested in doing more with the mouse, such as dragging and the mouse wheel, check out his article.

The Video!

Watch it here, or download it full-resolution at the bottom of this article.

The Code

Here’s a snapshot of the code in Page.xaml.cs that handles the primitive zooming. Note: The variable ‘dzo’ is a reference to the MultiScaleImage control in my project, short for "DeepZoomObject."

   1: namespace DeepZoomFrog 
   2: { 
   3:     public partial class Page : UserControl 
   4:     { 
   5:         Point _currentMousePosition = new Point(); 
   6:  
   7:         public Page() 
   8:         { 
   9:             InitializeComponent(); 
  10:             InitializeEvents(); 
  11:         } 
  12:  
  13:         private void InitializeEvents() 
  14:         { 
  15:             this.MouseMove += new MouseEventHandler(Page_MouseMove); 
  16:             this.KeyDown += new KeyEventHandler(Page_KeyDown); 
  17:         } 
  18:  
  19:         void Page_KeyDown(object sender, KeyEventArgs e) 
  20:         { 
  21:             if (e.Key == Key.W) // zoom in 
  22:                 Zoom(1.2f, _currentMousePosition); 
  23:  
  24:             if (e.Key == Key.S) // zoom out 
  25:                 Zoom(0.8f, _currentMousePosition); 
  26:         } 
  27:  
  28:         void Page_MouseMove(object sender, MouseEventArgs e) 
  29:         { 
  30:             _currentMousePosition = e.GetPosition(this); 
  31:         } 
  32:  
  33:         private void Zoom(double zoomFactor, Point pointToZoom) 
  34:         { 
  35:             Point logicalPoint = dzo.ElementToLogicalPoint(pointToZoom); 
  36:             dzo.ZoomAboutLogicalPoint(zoomFactor, logicalPoint.X, logicalPoint.Y); 
  37:         } 
  38:     } 
  39: }

Other Resources

  • Download the source code (with images)

  • Download the video in .wmv format:

Note you will need a Windows Live ID to access my public SkyDrive folder

Enjoy!


Comments (7)

  1. Victor says:

    How i can programatically create/prepare deepzoom pictures for example on the server side?

  2. Game Theory says:

    Last week, I showed you how to build a DeepZoom application with Silverlight 2 in fifteen minutes . I

  3. aqui está: Game Theory : Intro to Silverlight 2 Video Tutorial: DeepZoom for Dummies!

  4. DeepZoom es una de las tecnologías más impresionantes del nuevo Silverlight 2.0 para tus fotografías…

  5. The BBC have used Silverlight DeepZoom to create a fun site/experience of Radio 1’s Big Weekend – even

  6. Dan –

    Great video tutorial! It looks like the latest drop of DeepZoom Composer has a couple more options that the version that you created this video with. (Export As Composition/Collection and Export Images/Image and Silverlight Project)

    It also seems that the Silverlight / DeepZoom project has a slightly different file structure: There is an info.bin per image (not per project) and the Info.bin files stay in the "working data" folder and never make it out to the Export folder.

    Are these changes permanent? Can you address which info.bin to point to and how we should deal with this *slightly* different file structure?

    Thanks! – Keep up the great SL work!

  7. Silverlight Deepzoom has come up in a number of ISV meetings through June – and it is sparking new thinking.

Skip to main content