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

• Visual Studio 2010
• Silverlight 4 Tools for Visual Studio 2010
• Silverlight 4 Toolkit (released April 2010)
• PivotViewer Control

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 -

• Pivot Collection Tool for Microsoft Excel
• Pivot Collection Tools for the Command Line

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 SDKs\Silverlight\v4.0\PivotViewer\Jun10\Bin\
• 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… :)