Build Your Silverlight Pivot Viewer

By | May 8, 2011

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… 🙂

6 thoughts on “Build Your Silverlight Pivot Viewer

  1. Micki Brumlow

    I simply want to say I am just newbie to blogging and site-building and absolutely liked this web-site. Most likely I’m likely to bookmark your website . You certainly come with really good posts. Bless you for sharing your website page.

    Reply
  2. Adam

    Hi

    I am trying to build a pivotviewer collection and have all the necessary tools, however I am having some difficulty despite following all your steps and those of others on the internet! Could you possibly help me?

    Thanks

    Reply
    1. Adam

      I have a couple of problems. First, Lots of the images aren’t being published correctly, they show a grey box with an x in the corner. It happens with the same images every time I try and publish them.

      I also have a problem compiling the code, but I can’t remember what it was at the moment, but until I resolve the images not showing up problem, the code issue is irrelavent as I don’t have any images for the collection at the moment.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *