Monday, August 16, 2010

Building your first PivotViewer application

by Timmy Kokke via Timmy Kokke on 8/16/2010 7:10:07 PM

PivotViewer series

1. Building your first PivotViewer application
2. Runtime PivotViewer collection creation
3. PivotViewer - Working with Facets
4. Handling PivotViewer events
5. PivotViewer - Custom actions
6. PivotViewer and MVVM
7. . . .

Intro

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 visitor of you website to search large amounts of data very easily. The control takes a lot 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 an 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 a couple of collections available on the GetPivot.com site (at the end of this tutorials I’ve added a list of these). I’ve used the AMG Movies Collection in this case.

The LoadCollection method also needs a value 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 collection 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 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 collection to try in your applications:

Dog Breeds

Sports Illustrated Covers

AMG Movies

NFL Teams & Athletes

Wikipedia Collection