My last post was on using Deep Zoom Composer.
Notice that now I have selected "Export Images and Silverlight Project". You get
When "View Project Folder" is clicked,
Deep Zoom Composer generates code for the Deep Zoom Collection. It adds Web for hosting the Silverlight control. The ClientBin folder now has the Deep Zoom generated images and the SparseImageSceneGraph.xml file.
The Deep Zoom Image can be accessed using MultiScaleImage control in Silverlight. It is accessed in XAML as
<MultiScaleImage Source="GeneratedImages/dzc_output/items.bin" Height="440" x:Name="msi" />
The Deep Zoom Composer adds a button named "Randomize". This is used to randomly arrange the images in a grid. Notice that there is no dependence on Javascript code here. All the events are in managed code. The MouseWheelHelper class had methods to handle MouseWheel event for the MultiScaleImage. Zooming is provided based on the movement of the mouse wheel direction. The Mouse Wheel event is called by the browser and not by Silverlight. The Worker method initialises a new instance that listens to the mouse wheel events fired by the HTML document.
The MouseMove event saves the current position and pans to the new position when mouse is dragged. The MouseLeftButtonDown saves the inital dragOffset and currentPosition in case the user pans. It is the MouseLeftButtonUp that zooms into the image in case the user is not completing a pan. It also resets the mouse. MouseWheelHelper(msi).Moved zooms in or out depending on the mouse wheel direction.
ArrangeIntoGrid method arranges the images into a grid provided they are all of same size. It gets a randomised list of images and arranges them into a grid of 4 columns. The number of rows is calculated based on number of images in the collection. Hit on F5 and you should see a grid of images into which you can zoom in and out. You can pan the images as well. In addition, you can hit on Randomize button to rearrange the images in a different fashion.
There! This should get one started on programming more functionality using this wonderful technology.
Have fun coding! :-)
No comments:
Post a Comment