Deep Zoom is a feature of Silverlight. It is used for partitioning and, zoom images smoothly and with better performance, but the Deep Zoom feature is not yet available for WPF, we can use it with Deep Zoom composer and with control: MultiScaleImage.
In this blog, we will discuss the Deep Zoom feature briefly. Deep Zoom provides the ability to view high-resolution images interactively. We can zoom in and out images without affecting the performance of the application. It enables smooth loading and panning by providing multi-resolution images and by using spring animation.
Deep Zoom uses multi-resolution images to achieve high- frame and fast open experience for all large images. Only a small amount of data is needed on load to quickly show something on the screen. Initially, it will load low-resolution images and then blend in higher resolution as images become available. This is the reason for the blurry to the sharp experience of the image in Deep Zoom.
It is also the reason that Deep Zoom can open images quickly without taking much time to load image data, besides initial loading, this kind of behavior is experienced as a user interacts with the application. It is uses spring animation, which gives smooth movement (pan or zoom) around the image to the users.
We can use Deep Zoom in multiple scenarios but these are three scenarios where it is useful practically.
- Exploration of high-resolution images: Example of this scenario would be zooming on parts of the large map and to see different levels of details and using a mouse to moving around the map surface.
Read More: What Is Treeview In Wpf?
- 3-D photography: Taking pictures of the room one after another and making a collection of photos and create a 360-degree picture.
- Advertisement: We can create a low-resolution image and represent it to the overall theme of the advertisement and then have a progressively high-resolution image that is containing more impression and data about the product. When the ad is loaded first time on the page it will draw the attention of the reader because the ad will smoothly sharpen and then it will load high-resolution images and also if reader's mouse enters in an ad, various parts of ad can zoom in.
Deep Zoom Composer: Deep Zoom composer is a tool that is available for Silverlight developers to compose and export multiple images with functionalities like Zoom and Pan. We can download and install Deep Zoom composer from here: Deep Zoom Composer
As we discuss earlier Deep Zoom allows us to Zoom and Pan high-resolution images without affecting the performance. Now we will see how to use Deep Zoom along with the Silverlight application.
Deep Zoom is a collection of tiles of JPEG and PNG images with different resolutions images that make an image pyramid. The size of the tile is by default 256x256, we can modify the size of tiles.
Every tile is stored in a separate file and the same for the pyramid. For the pyramid, each level of the pyramid is stored in a separate folder. This enables Deep Zoom to fetch the required size for the current size of the image on the screen, instead of downloading the whole image.
For example, if you zoom in to see highlighted part of an image, Deep Zoom will load only highlighted tile of the image instead of loading the whole image. We can create Deep Zoom images using the Deep Zoom Composer tool.
Steps for creating Deep Zoom image:
- First of all, we have to download and install Deep Zoom Composer.
- Start Deep Zoom Composer and create a new project, after that Import workspace and then click on Add image and add a high-resolution image to created project.
- Now, click on the compose workspace, on the images tab drag image onto the artboard.
- Give needed size to an image, click on Export workspace and then click the custom button.
- After that select Silverlight Deep Zoom from the output type section, and then give name and location. Select Export as a Composition from Image setting.
- Click on the export button to export the Deep Zoom images file.
After creating a Deep Zoom image, to load it we can use MultiScaleImage control. By using MultiScaleImage class we can open multi-resolution images, which can be Zoomed in / out and panned. We cannot zoom in or pan across the image which is loaded by the MultiScaleImage, but it includes various methods to zoom and pan that we can use. By default, the image is loaded by MultiScaleImage Zooms onto the page when the page is loaded first. We can disable this by setting the property UseSprings to false, but we have to set this property to true when users are interacting with the images. MultiScaleImage control only supports Deep Zoom images with no support for Deep Zoom Collection. We have to add a reference of DeepZoom.dll to the XAML file to use MutliScaleImage control.
One Stop Solution for WPF Application Development - Contact us now.
<window title="MainWindow" x:class="DeepZoom.Application.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:dz="clr-namespace:DeepZoom.Controls;assembly=DeepZoom" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<border background="Blue">
<dz:multiscaleimage source="http://static.seadragon.com/content/misc/color-flower.dzi">
</dz:multiscaleimage></border>
</window>
After loading Deep Zoom image, we cannot interact with the image yet, to interact with image we have to handle MultiScaleImage events and to provide Zoom and Pan functionality we have to code.
Conclusion
Deep Zoom is a magical feature of Silverlight, it is used to zoom and partitioning high-resolution images with better performance. Deep Zoom is used in different areas like 3-D photography, Advertisement, etc. This feature of Silverlight is yet not available in WPF. We can use Deep Zoom in WPF by using Deep Zoom Composer and MultiScaleImage control.
In this blog, we have discussed how to use Deep Zoom with Deep Zoom Composer and MutliScaleImage. Deep Zoom Composer is a tool that is available for Silverlight, by using Deep Zoom composer we have also seen how to create Deep Zoom images. MultiScaleImage is the control of Silverlight which is used to Zoom in and pan around the image, to use this control we have to add a reference of DeepZoom.dll to our XAML file.
Top comments (0)