Build Your Silverlight Pivot Viewer

Silverlight PivotViewer?

Pivot is software from Microsoft Research, initially developed by Microsoft Live Labs. Pivot makes it easier to interact with massive amounts of data, and it allows interactive viewing and manipulation of the data. The traditional structure of the web is that it consists of 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 the Silverlight PivotViewer is a 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; let's start.

Step 1: Creating a Collection

A Collection used in a PivotViewer consists 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 a collection we have two most effective tools:

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

Later in this article I will use the Excel Tool for creating my collection, so after you have downloaded the 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 the new collection. The Image Location, Preview, Name, Href and Description. Now you can import all your images at once by clicking the "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 multiple values in the same category, you can separate the values with '||'. Once you have 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 the Pivot namespace to your XAML file:
  
  xmlns:pivot="clr-namespace:System.Windows.Pivot;assembly=System.Windows.Pivot"
   
• Add the Pivot Viewer Control:
  
  
  
• Add the collection .cxml file and the files folder to your ClientBin (or if you want, you can upload all under hosting service).
• Load the collection using this method - PivotViewerControl.LoadCollection(YourCollectionUri,"");
  
  
  
• You're done!

I became familiar with the PivotViewer in my MSP Open days and since then I was attempted to learn about it and finally I am here with my own article. It feels great.