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: https://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!