Deep Zoom Sample with MouseWheel / Pan / Click-Zoom


Hi everyone,
One of the most frequent requests you all have made has been for samples that showcase taking the output from a Deep Zoom Composer project and integrating it with the MultiScaleImage control to have a cool example. We provided an example of that in the previous post. That example only included mouse wheel support but nothing else. In this post we not only incorporate mousewheel support for zooming but we also incorporate using the mouse to pan and clicking/Shift+clicking to zoom in or zoom out thanks to the nice work by Scott Hanselman.

The following example includes everything you need plus a sample Deep Zoom image containing some Vista wallpapers I arranged and exported via the Deep Zoom Composer:


slproject Download Sample

The sample solution contains both a C# Silverlight project as well as a Web Site project:

projectInfo

In your Web Site project, inside your ClientBin folder, you will see a folder called vistaWallpapers. The vistaWallpapers folder contains the images, xml, and bin files Deep Zoom Composer (DZC) output.

To reuse this sample for your own projects, delete the vistaWallpapers folder and import your own folder containing the DZC output. Once you have done that, open Page.xaml in your Silverlight project and change the source of your MultiScaleImage control to point to your new folder and its info.bin file in your Web Site project:

path

Once you have replaced your images and changed the path to the images in Page.xaml, build your project and view your DeepZoomOutput.html page in your browser. Things should just work…if they don’t, please feel free to comment below and I’ll take a look!

Cheers!
Kirupa =)

Comments (32)

  1. Hi everyone, One of the most frequent requests you all have made has been for samples that showcase taking

  2. Hi everyone, One of the most frequent requests you all have made has been for samples that showcase taking

  3. Hi everyone, One of the most frequent requests you all have made has been for samples that showcase taking

  4. SoulSolutions says:

    Thanks for the update! I’ve been working on some example code also:

    http://www.soulsolutions.com.au/Blog/tabid/73/EntryID/394/Default.aspx

    So the next sample we all want is the filtering and rearranging of the images themselves.

    I’ve been searching everywhere and can’t find anything? any tips or samples on how to do things with the collection?

    John.

  5. Kirupa (MS) says:

    John – hopefully filtering / moving things with collections will be the next one :)

  6. uba says:

    Hello everyone,

    This is the translated version of the C# Sample to VB with few additions.

    Check it out at:

    http://code.msdn.microsoft.com/VBDeepZoomSample

  7. Kirupa (MS) says:

    Thanks uba – that is really helpful!

  8. Design .Net says:

    Using MultiScaleImage control we get a vivid user friendly image manipulation experience in this quick

  9. Adam Kinney posted an aggregation of links to great SL2 postings, Celso and Kirupa posted their WPF app

  10. abakerp says:

    Hi guys.

    Great work and very easy to use. I’m wondering if there’s any constrain or issue with using your example, or modified in my own projects.

    Cheers!

  11. Mark says:

    I downloaded the DeepZoomOutput and when I try to open it in VS 2008, I get the error: The project file "<path>DeepZoomOuptut.csproj" cannot be opened. The project type is not supported by this installation.

    I was able to download and open the FurnitureShowroom project..

    Any advice is appreciated.

    Mark

  12. Mark says:

    Mark again… FYI:  I have Windows XP 2002 SP2, .Net Framework 3.5, Silverlight 2 beta, and VS 2008 Standard Edition

  13. abakerp says:

    Do you have the Silverlight tools for VS2008? You can know if you have it when creating a new project. See if in the dialog box you have the Silverlight section.

  14. I created my Star Wars Deep Zoom preview and really liked it, but then contacted the author of the site

  15. Mark says:

    Mark again… I tried installing Silverlight tools but still have the same issue. I suspect the versions of VS, Silverlight, Silverlight tools, and Silverlight SDK are out of sync. Can someone please tell me the versions and editions of each that I need to open up the DeepZoomOutput project?

    Thank you

  16. Jeff Paries says:

    When I layer a number of images, I’m getting multiple output folders in the working data folder, with multiple ".sdi" files. Each one of the subfolders has it’s own set of images and info.bin file.

    I was expecting a single info.bin file in a single sub folder.

    Any tips?

    Thanks.

  17. Kirupa (MS) says:

    Mark – the versions I am using are the ones listed for VS Tools, SL Beta 1, and Blend 2.5: http://silverlight.net/GetStarted/

    Jeff – the working data folder is used only for composing your images on the artboard. When you export your images, you will only see a tree of folders for your single SDI image, info.bin, and info.xml.

    Cheers!

    Kirupa :)

  18. Jeff Paries says:

    Kirupa –

    Sorry – my post was reflecting my confusion over the project. The working folder contains the appropriate folders, but the output folder fails to write for my project. I spent several hours the other day trying various formats, but once I got past "nesting" 3 or 4 images, the Composer just stopped outputting files when I picked Export.

    I’d be happy to share the project with you if you would like to take a look. It’s a series of photos scaled down so you start at one, and "travel" through the series.

  19. Kirupa (MS) says:

    Jeff – I’d be glad to take a look :) Feel free to zip the files, upload them to a location I can access, and e-mail me the link to it. My e-mail address is kirupac[at]microsoft.com.

    Cheers!

    Kirupa

  20. Paolo says:

    I’ve been playing around with this quite a bit but it always seems to degrade my images.  Also, why have an option to import different file formats when DZC changes then into JPGs anyway?  And surely there should be a manual compression setting?

    Cool bit of kit though…

    Any ideas for improving resolution?

  21. Kirupa (MS) says:

    Paolo – yes, we will offer better export options soon. We default to JPG with no control over the quality, but we hope to allow you to both alter the JPG quality or choose to export as PNGs instead.

    That may not be in the next release of Deep Zoom Composer, but it may find its way into a version we release quickly thereafter.

    Cheers!

    Kirupa =)

  22. Is there any way to work with (tiff) transparent images with DeepZoom/MultiScaleImage? either from command line or from GUI.

    Thanks in advance!

  23. Steven Burr says:

    Is there an API for the composition step? I can think of a number of potential uses for this as a UI but they all require the ability to programmatically create the export from a dynamic collection of loose images.

  24. A poche ore dalla conclusione dell’evento, non posso far altro che ringraziarvi personalmente… l’entusiasmo

  25. Erika Ehrli says:

    Last week I had the great opportunity to do my first experiments with Silverlight 2.0. I was truly fascinated

  26. anujesh says:

    Hi everyone, The images do move on simple mouse click events but what can be done about zooming.Is there a easier way out.Any suggestions anyone …………

  27. anujesh says:

    Hi everyone, The images do move on simple mouse click events but what can be done about zooming.Is there an easier way out.Any suggestions anyone …………

  28. Tony Springs says:

    is there a way to control the timing of the Panning.  When I mouseover, the image pans ok, but it goes pretty fast.  I am looking for a way for it to pan slowly.

    thanks

    Tony

    coralspringstony@hotmail.com

  29. sandeep says:

    Hi Kirupa,

    I am getting the following errors, when i try to build the project

    Build project: DeepZoomOutput.sln, Targets: Build

    __________________________________________________

    Project "E:DeepZoomOutputDeepZoomOutputDeepZoomOutput.sln" (Build target(s)):

    __________________________________________________

    Project "E:DeepZoomOutputDeepZoomOutputDeepZoomOutput.sln" is building "E:DeepZoomOutputDeepZoomOutputDeepZoomOutputDeepZoomOutput.csproj" (default targets):

    C:WindowsMicrosoft.NETFrameworkv3.5Microsoft.Common.targets : warning MSB3245: Could not resolve this reference. Could not locate the assembly "System.Windows.Controls.Extended". Check to make sure the assembly exists on disk. If this reference is required by your code, you may get compilation errors.

    C:WindowsMicrosoft.NETFrameworkv3.5Csc.exe /noconfig /nowarn:1701,1702 /nostdlib+ /errorreport:prompt /warn:4 /define:DEBUG;TRACE;SILVERLIGHT /reference:"C:Program FilesReference AssembliesMicrosoftFrameworkSilverlightv3.0mscorlib.dll" /reference:"C:Program FilesReference AssembliesMicrosoftFrameworkSilverlightv3.0System.Core.dll" /reference:"C:Program FilesReference AssembliesMicrosoftFrameworkSilverlightv3.0system.dll" /reference:"C:Program FilesReference AssembliesMicrosoftFrameworkSilverlightv3.0System.Windows.Browser.dll" /reference:"C:Program FilesMicrosoft SDKsSilverlightv3.0LibrariesClientSystem.Windows.Controls.dll" /reference:"C:Program FilesReference AssembliesMicrosoftFrameworkSilverlightv3.0System.Windows.dll" /reference:"C:Program FilesReference AssembliesMicrosoftFrameworkSilverlightv3.0System.Xml.dll" /debug+ /debug:full /optimize- /out:objDebugDeepZoomOutput.dll /target:library App.xaml.cs MouseWheelHelper.cs Page.xaml.cs PropertiesAssemblyInfo.cs

    App.xaml.cs(23,13): error CS0103: The name ‘InitializeComponent’ does not exist in the current context

    Page.xaml.cs(37,13): error CS0103: The name ‘InitializeComponent’ does not exist in the current context

    Page.xaml.cs(55,18): error CS1061: ‘DeepZoomOutput.Page’ does not contain a definition for ‘msi’ and no extension method ‘msi’ accepting a first argument of type ‘DeepZoomOutput.Page’ could be found (are you missing a using directive or an assembly reference?)

    Page.xaml.cs(44,56): error CS1061: ‘DeepZoomOutput.Page’ does not contain a definition for ‘msi’ and no extension method ‘msi’ accepting a first argument of type ‘DeepZoomOutput.Page’ could be found (are you missing a using directive or an assembly reference?)

    Page.xaml.cs(52,35): error CS0103: The name ‘msi’ does not exist in the current context

    Page.xaml.cs(79,72): error CS0103: The name ‘msi’ does not exist in the current context

    Page.xaml.cs(79,97): error CS0103: The name ‘msi’ does not exist in the current context

    Page.xaml.cs(79,116): error CS0103: The name ‘msi’ does not exist in the current context

    Page.xaml.cs(80,72): error CS0103: The name ‘msi’ does not exist in the current context

    Page.xaml.cs(80,97): error CS0103: The name ‘msi’ does not exist in the current context

    Page.xaml.cs(80,117): error CS0103: The name ‘msi’ does not exist in the current context

    Page.xaml.cs(81,21): error CS0103: The name ‘msi’ does not exist in the current context

    Page.xaml.cs(99,39): error CS1061: ‘DeepZoomOutput.Page’ does not contain a definition for ‘msi’ and no extension method ‘msi’ accepting a first argument of type ‘DeepZoomOutput.Page’ could be found (are you missing a using directive or an assembly reference?)

    Page.xaml.cs(100,18): error CS1061: ‘DeepZoomOutput.Page’ does not contain a definition for ‘msi’ and no extension method ‘msi’ accepting a first argument of type ‘DeepZoomOutput.Page’ could be found (are you missing a using directive or an assembly reference?)

    Done building project "DeepZoomOutput.csproj" — FAILED.

    Build failed.

    Any pointers to this?

  30. Kirupa (MS) says:

    Hi Sandeep – are you able to to create and build regular Silverlight 3 applications using Expression Blend?

    Cheers,

    Kirupa

  31. sandeep says:

    Hi Kirupa,

    Thank you for your reply.

    Yes, I was able to create regular silver light 3 applications using expression blend. I have recently started to use expression blend.. and was able to create few sample silverlight 3 apps.. to host in a website..using blend…

  32. Kirupa (MS) says:

    Ah, I just noticed what the problem may be. This particular project is very outdated and came out during the SL2 beta time frame. You should really use Deep Zoom Composer to export a project using any of the SL3 based templates (Classic + Source or Behaviors + Source).

    You can get the latest version here: http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=457b17b7-52bf-4bda-87a3-fa8a4673f8bf

    The code found in DZC is also much more up-to-date, and you will be able to use Blend on the exported project without having to do anything extra.

    Cheers!

    Kirupa