Build Your Silverlight Pivot Viewer

Silverlight PivotViewer?

Pivot is research of Microsoft live labs, pivot makes things easy to interact with massive amount of data, it makes the data appear in an interactive manner. The traditional structure of web is that it has media files and html pages, a request is sent from the html page and the media files are invoked on a web page. Silverlight uses DeepZoom technology to make complex things easier and better to understand. The collection used in Silverlight PivotViewer is CXML (Collection extended Markup Language) file.

Prerequisites for developing your first PivotViewer

I will move further in various steps, lets start.

Step 1 – Creating a Collection

Collection used in PivotViewer comprises of two parts

  1. XML – The items in the collection are described in XML, in a “.cxml” file.
  2. Images – The images in the collection are described in Deep Zoom format.

To create collection we have two most effective tools -

Further in this blog i will use Excel Tool for creating my collection, so after you have downloaded Excel Tool open Excel and open the new “Pivot Collections” tab and click “New Collection”

You will see there are four columns created by default in new collection.  Image Location, Preview, Name, Href, Description.  Now you can import all your images at once by clicking “Import Images” menu or one by one using the button choose image. You can add more columns also and add specific details accordingly. You can add multiple values to a column, to put multiply values in the same category, you can Separate the values with ‘||’.Once you are done with all this you can publish your collection with the Publish Collection button.

Step 2 – Adding Pivot Viewer to Silverlight application

  • Create a new Silverlight Application.
  • Add a reference to “System.Windows.Pivot.dll” located under
    C:Program Files (x86)Microsoft SDKsSilverlightv4.0PivotViewerJun10Bin
  • Add Pivot namespace to your XAML file –>
    xmlns:pivot="clr-namespace:System.Windows.Pivot;assembly=System.Windows.Pivot"
  • Add Pivot Viewer Control.

  • Add collection .cxml file and the files folder to your ClientBin (or if you want, you can upload all under hosting service).
  • Load collection using this method – PivotViewerControl.LoadCollection(YourCollectionUri,"");
  • You’re done!

I came to know about PivotViewer in my MSP Open days since then i was trying to learn about it and finally am here with my own blog.. feels great… :)

Build Your Deep Zoom Mosaic

Deep Zoom ??

Deep Zoom originally known as SeaDragon is now a Microsoft Presentation. Deep Zoom allows users to interact with high resolution images in a very interactive manner. It allows the user to zoom into a image upto a larger extent, it enables smooth loading and panning by serving up multi-resolution images and using spring animations.
Deep Zoom is a layered format of images, when a single image or multiple images are converted to a deep zoom format it contains the tiles in every possible resolution and stores that image in different folders according to their resolution. The image below will make it more clear to you:

Before creating a Deep Zoom application you need to convert your images to deep zoom formats (.dzc deep zoom collection and .dzi deep zoom image ).  Once you have created a deep zoom pyramid the file format used to access image pyramid is XML. So our primary task is to create a image pyramid (deep zoom collection), for doing this we need some tools the tool provided by Microsoft is Deep Zoom Composer you can simply add images to Deep Zoom Composer and create your own mosaic.

There are two techniques to create your mosaic, you can either create a large image using any tool or create your tiles in deep zoom composer, i used the first option i created a large file using Andrea Mosaic tool, Andreas Mosaic can create a file upto 210 MegaPixels. (tips to use Andrea Mosaic will be with the software itself or if u guys feel any problem using it write it i will post a blog on how to use Andrea Mosaic).

Once you have created you high resolution image import it into Deep Zoom Composer, it will convert it into pyramid form deep zoom format and then preview or export your mosaic… you are done… !!!

Hope you enjoy making your mosaic…..
(Make necessary setting you need according to your mosaic)