Building Your First PivotViewer Application

Introduction

If you haven't had a chance to look at the new PivotViewer control for Silverlight, have a look here or here. The PivotViewer enables visitors of your website to search large amounts of data very easily. The control takes a lot of work out of your hands. Basically, you tell it to load a collection and the PivotViewer takes care of everything else. Like adding controls to enter search and sort criteria. It uses DeepZoom to show large amounts of images and animate between states.

Getting Started

Before you can start coding, you have download the control itself. The Silverlight control can be downloaded from the PivotViewer section on Silverlight.net. You also need the Silverlight Toolkit which can be found here.

Your First PivotViewer

To get your first PivotViewer control up and running, create a new Silverlight project in Visual Studio and add references to all 5 PivotViewer assemblies to the Silverlight project. These assemblies can be found in C:\Program Files\Microsoft SDKs\Silverlight\v4.0\PivotViewer\Jun10\Bin or C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\PivotViewer\Jun10\Bin on 64bit system.

In MainPage.xaml, add an XML namespace definition for the System.Windows.Pivot namespace and add the control to the LayoutRoot grid.

<UserControl x:Class="PivotViewerGettingStarted.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:Pivot="clr-namespace:System.Windows.Pivot;assembly=System.Windows.Pivot">
  <Grid x:Name="LayoutRoot" Background="White">
    <Pivot:PivotViewer x:Name="Pivot"/>
  </Grid>
</UserControl> 

Getting data in the PivotViewer control has to be done in CodeBehind. The PivotViewer contains a method LoadCollection which takes a URL to a .CXML file. This file can be stored anywhere on the web and can be accessed as log as there is a valid ClientAccessPolicy.xml file available. For demonstration purposes, there are a couple of collections available on the GetPivot.com site (at the end of this tutorial, I’ve added a list of these). I’ve used the AMG Movies Collection in this case.

The LoadCollection method also needs a value for the state. Often this value is set to string.Empty.

public MainPage(){
  InitializeComponent();
  Pivot.LoadCollection(
    "http://content.getpivot.com/collections/amg/Top_Movies.cxml"
    ,string.Empty);
}

Take a look at the control running here.

What’s Next

While using the collection on GetPivot.com can be vary useful for demonstrations or learning how to develop with the PivotViewer, you won't use these collections in a real application. You will have to create a collection of your own. Have a look at this section of GetPivot.com about the Excel extension to create a collection.

Another way to create a collection is to let your program take control and build collection runtime. I will explain this in my next tutorial.

If you can’t wait and want to learn more, read the developer section on www.getpivot.com.

Other Example Sources

On the GetPivot.com site, there are a few more .CXML collections to try in your applications:

• Dog Breeds
• Sports Illustrated Covers
• AMG Movies
• NFL Teams & Athletes
• Wikipedia Collection