Friday 27 April 2012

Silverlight Deep Zooming

The idea behind Deep Zoom is to present a “zoom-able” interface for huge images. The typical Deep Zoom image is far too large to be shown on screen at once at its native resolution.

It’s easy to create a Silverlight application that uses Deep Zoom, provided you have the  right tools. The most important is the free Deep Zoom Composer tool. The Deep Zoom Composer allows you to convert a large image into the tiled groups of images that Deep Zoom needs for its zooming interface. It also lets youtile together smaller images to create a large image that’s suitable for Deep Zoom, and it can even stitch overlapping images together automatically.

To get started, load Deep Zoom Composer, and click New Project. You’ll need to choose a project name and a project location.One folder, named Source Images, holds the original versions of all the pictures you import. The second folder, named Working Data, holds the dozens of image files that are generated when you lay these pictures out into a Deep Zoom image set.

Note : Deep Zoom project can only be opened in Deep Zoom composer. You must export the image set to generate a Silverlight project.

1.To get the pictures you want, click the Import button in the panel at right, browse to the correct file, and click OK. Importing large pictures can be slow, so be prepared to wait.

2.until you’ve imported all the pictures you need.

3.Click the Compose button. and lay out your pictures.
 
4.To add, drag picture  from the panel at the bottom.
 
5.Click the Export button. Deep Zoom Composer gives several export options The two most useful are to export your image set to DeepZoomPix or to create a Silverlight project.

6.To create a Silverlight project, click the Custom tab in the panel at the right. In the“Output type” box, choose Silverlight Deep Zoom

7. In the Name text box, enter a name for your project. If you want to export the project to a different folder, change the path in the Location text box.

8.Choose “Export as a collection” to create a Deep Zoom image set.
 
9.In the “Image settings” box , choose either PNG or JPEG.
 
10.Click Export to create the image set and Silverlight project.

Showing a Deep Zoom image in a Silverlight application is fairly easy. In fact, all you need is the MultiScaleImage element, as shown here:

<MultiScaleImage x:Name="msi" Height="600" Width="800"/>

No comments:

Post a Comment