Getting Started with Silverlight PivotViewer control

Microsft LiveLabs team released very useful Silverlight “PivotViewer” control that enables you to visualize data information in a DeepZoom type experience.  In this article, I will walk you through the steps how to build simple Silverlight PivotViewer app.

You need following things to be able to build Silverlight PivotViewer application.

1) First thing we need is pivot collection source that PivotViewer control use to understand how to display data.  There are three different ways to create pivot collection source.

  • Pivot  Collection Tool for Command Line
  • Silverlight Pivot Collection Tool for Microsoft Excel
  • Create Just in Time Pivot Viewer Collection

These three different  techniques are describe in more detail here.  To make this article simple, I will use Microsoft Excel to create pivot collection source.  Microsoft Team created an Excel add-in that makes our life easy.  You can download Excel add-in from here.   Once you install this add-in, you will see new tab “Pivot Collections” added.  Click on “Pivot Collections”  tab -> “New Collection” menu.  It will create a new excel collection file.

2) You will see there are four columns created by default in new collection.  Image Collection, Preview, Name, Href, Description.  Now you can import all your images at once by clicking “Import Images” menu.

If you want to add additional columns, you can add new column and specify additional information.  In our sample example, we are going to create restaurant list so we can add additional information like  “Location”, “Rating”, “Address” for each restaurant.

3) Now we have all information ready.   Clicking on  “Publish Collection” will create a .cxml file and folder that will contains DeepZoom sliced images.  Pivot  Viewer control uses this .cxml file to understand the data.  If you want to know more about the file and schema structure, you can refer this link that will give us more detail knowledge about the cxml file structure.

Now we have .cxml file ready to use.

4) Now open Visual Studio 2010 and create a Silverlight Application.

Add “System.Windows.Pivot” dll reference in Silverlight Application.

5) Open MainPage.xaml file and add XMLNS declaration for pivot control namespace.

6) Now go to code behind file MainPage.xaml.cs.  Let’s add code to load collection (.cxml) file that we created using Excel add-in.

public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            string collection = App.Current.Host.InitParams["collection"].ToString();
            MainPivotViewer.LoadCollection(collection, string.Empty);
        }
    }

The above code will get .cxml file path from initParams parameter of embed objects.  When you created a Sliverlight Application, Visual studio also creates a web application that hosts Silverlight application.  You may have noticed two files one is .aspx and another is .html created under that web application.  Both file hosts Silverlight application.  Both has same code but one is static and another is .net page.

7) Now open SilverlightPivotViewerSampleTestPage.html (it may be different file name based on the name you have given to silverlight application project).  Add “initParams” parameter in silverilght embed object.

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
	<param name="source" value="ClientBin/MemberInteraction.xap"/>
	<param name="onError" value="onSilverlightError" />
	<param name="background" value="white" />
	<param name="minRuntimeVersion" value="4.0.50826.0" />
	<param name="autoUpgrade" value="true" />
	<!--Add following line -->
        <param name="initParams" value="collection=http://localhost:3689/ClientBin/ChicagoRestaurants.cxml" />

         <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
         <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
	</a>

</object>

Now you understand what we have done in step 6.  It will retrieve the path of .cxml file from here.  So it’s really easy to configure.  You should put the file .cxml and folder that got created when you publish collection in Excel under the same location where XAP file is and should be accessible from this web application.  I would put that .cxml file and folder under ClientBin folder but that’s up to you.  But if those files NOT under ClientBin folder, you need cross domain policy set up.

Since .cxml is a new file type, we need to set MIME type in IIS.  Add “.cxml” mime type and content type is “text/xml”.

8 ) Build entire solution and run “SilverlightPivotViewerSampleTestPage.html”.  If I have not missed something and you have followed what I described, you would see the Silverlight PivotViewer control.

You may have noticed that on left side it displays all the columns we created in Excel and underneath each section it shows data and number of items that has that value.  For example, under “Location” section you would see “Chicago” and number is 2.  That means data we have entered in Excel has two restaurant in Chicago location.

PivotViewer control is very intelligent in the sense it display proper navigation type based on the datatype.  It gives us slider control for the integer data type.  In our case we had “Rating” column and that has numberic rating value for each restaurant.  Click on “Rating” section, you will see slider control it’s easy to filter the result set.

It also gives us date picker control if column has “date” data type.  Isn’t it cool?

(In our sample code, we NOT have “date” data type but I put the screen shot from my other sample to show you how it looks.)

So data type is very important when you create .cxml file.   Play with PivotViewer control you will see how cool it is.

You can download sample code here.  Here is the link for live demo.

Leave a comment here if you have any question or have an issue running the sample code.

Posted in Microsoft Technology Tagged with: ,
2 comments on “Getting Started with Silverlight PivotViewer control
  1. electronic says:

    patelshailesh.com is super, bookmarked!

  2. sugandha says:

    hiii…..it helped me alot in making my collection…now when i have made the collection its running on local host what if i want it to be on a public site so that others can view it…

2 Pings/Trackbacks for "Getting Started with Silverlight PivotViewer control"
  1. […] If you are interested to know about Silverlight PivotViewer control, check this my other article for step by step guide how to create Silverlight PivotViewer application. […]

  2. Getting Started with Silverlight PivotViewer control | Broken Code…

    […]Microsft LiveLabs team released very useful Silverlight “PivotViewer” control that enables you to visualize data information in a DeepZoom type experience. In this article, I will walk you through the steps how to build simple …. tarun on Howto:…

Ads