Click here to Skip to main content
13,259,539 members (53,743 online)
Click here to Skip to main content
Add your own
alternative version


16 bookmarked
Posted 18 Aug 2010

Runtime PivotViewer Collection Creation

, 18 Aug 2010
Rate this:
Please Sign up or sign in to vote.
Tutorial on how to create a PivotViewer collection


Today, I would like to show you how you can consume web services in the PivotViewer control for Silverlight and build a collection at runtime. This tutorial is based on examples found on and the getting started tutorial I posted earlier this week. This tutorial used the previous as a starting point, so if you haven't read that, you probably want to do that first. The only difference is that I named the project PivotViewerDynamic this time.

The PivotViewer control loads a collection by reading an .CXML file. To get the PivotViewer to load a generated collection, HTTP handlers are used to redirect the request for an .CXML file to custom code. This code, the Collection Factory, returns the collection in .CXML format. Requests for the DeepZoom images used in the collection are also redirected to custom code capable of generating images on the fly or loading them from the web.

Building a Factory

The factory class that will be building the collection is based on a class that can be found in one of the examples on You can download this example here. Add the PivotServerTools project from this example to the project created in the Getting Started tutorial. And add a reference to the PivotServerTools project from the Web project. It is also included in the sample code for this tutorial.

To be able to use the factory, a custom HTTP handler needs to be built. This sounds more complex than it is.

Start by adding a new class to the Web project and name this class CxmlHandler. Make this class implement the IHttpHandler interface. This will give you one method, ProcessRequest, and one property, IsReusable. Add one line of code to the ProcessRequest method as shown below. The PivotHttpHandlers.ServceCxml method will look for factories and returns the collection in .CXML format. Don't forget to resolve a using to the PivotServerTools namespace.

public class CxmlHandler : IHttpHandler
  public void ProcessRequest(HttpContext context)
  public bool IsReusable
    get { return true; }

To get the HTTP handler to work, it has to be configured in Web.Config. To do this, add the code below:

    <add name="CXML" path="*.cxml" verb="GET" 


It also has to be defined in the system.web section of the config file. Add the code below to the system.web section.

  <add path="*.cxml" verb="GET" type="PivotViewerDynamic.Web.CxmlHandler"/>

This makes sure that every request for a .CXML file is redirected to the PivotViewerDynamic.Web.CxmlHandler class.

It’s time to add the actual factory class now. Add a new class to the Web project and name this DemoCollectionFactory. Make this class implement the base class CollectionFactoryBase and make sure you resolve the PivotServerTools namespace. Only the MakeCollection method is overridden from the base class. We'll add the functionality of this method later.

Add a constructor to this class to set the name of the factory. This name is going to correspond with the name of the .CXML file requested. The constructor will look something like this now:

public DemoCollectionFactory()
  this.Name = "Demo";

The collection factory is ready to use now. Let's load it from the Silverlight part of the application.

The PivotViewer control should already be there if you're using the code from the first tutorial. If not, add the control like below:

<UserControl x:Class="PivotViewerDynamic.MainPage"



  <Grid x:Name="LayoutRoot" Background="White">
    <Pivot:PivotViewer x:Name="Pivot"/>

Add or change the Pivot.LoadCollection method in the code behind MainPage.xaml.cs to:


This example assumes the Web project is running on port 49000. If not, go to the Project properties and on the Web tab, set Specific Port, in this case 49000.


Add a breakpoint to the MakeCollection method in the factory to make sure it works. Now hit F5 to compile and run.

Filling the Collection

If all went well, you should have got the application running, although it doesn’t do much yet. Let us fill the collection.

To fill the collection, an .XML file is downloaded from the server and fed to the collection.

public override Collection MakeCollection(
                             CollectionRequestContext context)
  string data;
  using (var web = new WebClient())
    data = web.DownloadString(

Next, a string reader is created, which in turn is passed to the XElement.Load method which parses the XML.

var reader = new StringReader(data);
XElement root = XElement.Load(reader);

A collection has to be instantiated before it can be filled with data. For each DemoData element in the parsed XML, the MakeItem method is called. This method is described a little later. It fills the collection with data from the XML entries. Before the collection will be returned, its name is set.

  var collection = new Collection();
  foreach (XElement entry in root.Elements("DemoData"))
    MakeItem(collection, entry);
  collection.Name = "Demo Collection";
  return collection;

The MakeItem method takes the instance of the collection and an entry from the XML data. It extracts three values, Id, Value1 and Description. These are passed into the AddItem method. This method takes 5 parameters. The first is the Name of the item. The second is for a URL. The third is a description of the item. The fourth an image. If the image is omitted, an image will be generated. The last parameter is a collection of Facets. Facets are the properties of the collection. You filter and sort the collection by facets. The PivotViewer control decides the best way to show them in the filter section. There a five types of facets: String, LongString, Number, DateTime and Link. In this case, we let the control figure out what type to use.


private void MakeItem(Collection collection, XElement entry)
  int id= int.Parse(entry.Element("Id").Value);
  double value = double.Parse(entry.Element("Value1").Value);
  string description = entry.Element("Description").Value;
    new Facet("Value",value));

To get the runtime generated collection to show the right images, HTTP handlers have to be added for the DeepZoom images.

Add empty .cs file named DeepZoomHandlers.cs and place the four handlers below in there: DeepZoomCollection(.DZC), DeepZoomImage(.DZI) and two paths to images to handle the loading of images by code. All these handlers call methods in the PivotServerTools in the same way the CxmlHandler does.

using System.Web;
using PivotServerTools;

namespace PivotViewerDynamic.Web
  public class DzcHandler : IHttpHandler
    public void ProcessRequest(HttpContext context)
    public bool IsReusable
      get { return true; }
  public class ImageTileHandler : IHttpHandler
    public void ProcessRequest(HttpContext context)
    public bool IsReusable
      get { return true; }
  public class DziHandler : IHttpHandler
    public void ProcessRequest(HttpContext context)
    public bool IsReusable
      get { return true; }
  public class DeepZoomImageHandler : IHttpHandler
    public void ProcessRequest(HttpContext context)
    public bool IsReusable
      get { return true; }

Add these handlers to the web.config too. Add the lines below to the HttpHandler section in system.web.

<add path="*.dzc" verb="GET" 

<add path="*.dzi" verb="GET" 

<add path="*/dzi/*_files/*/*_*.jpg" verb="GET" 

<add path="*_files/*/*_*.jpg" verb="GET" 


Add the lines below to the Handlers section in System.WebServer:

<add name="DZC" path="*.dzc" verb="GET" 

<add name="DZI" path="*.dzi" verb="GET" 

<add name="DeepZoomImage" path="*/dzi/*_files/*/*_*.jpg" 

     verb="GET" type="PivotViewerDynamic.Web.DeepZoomImageHandler"/>
<add name="ImageTile" path="*_files/*/*_*.jpg" 

     verb="GET" type="PivotViewerDynamic.Web.ImageTileHandler"/>

You should be able to run the application now.



In this example, I used a very simple .XML file. It won't be hard to change the code to consume external web services. As long as there are items return that can contain sets of data it can be shown in the PivotViewer, like RSS feeds, Twitter and even OData.


  • 18th August, 2010: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Timmy Kokke
Software Developer (Senior) Centric Netherlands B.V.
Netherlands Netherlands
Microsoft MVP Client Dev . Founder of, the Dutch Windows Store apps and Windows Phone apps usergroup. XAML / HTML5 developer. Writer. Composer. Musician.


Awards / Honers
• October 2010,2011,2012,2013: Awarded Microsoft Expression Blend MVP
• June 2009: Second Place in the WinPHP challenge
• February 2009: Runner-up in de Mix09 10k Challenge
• June 2008: Winner of the Microsoft expression development contest at

I started programming around 1992, when my father had bought our first home computer. I used GWBasic at that time. After using QBasic and Pascal for a few years I started to learn C/C++ in 1996. I went to the ICT Academy in 1997 and finnished it in 2002. Until December 2007 I worked as a 3D specialist. Besides modelling I worked on different development projects like a 3D based Scheduler and different simultion tools in C# and Java. Though out the years I've gained much experience with ASP.NET, Silverlight, Windows Phone and WinRT.

You may also be interested in...

Comments and Discussions

Questionimages Pin
Frederic Chopin26-Oct-12 21:18
memberFrederic Chopin26-Oct-12 21:18 
QuestionCould you please let me what goes into WriteToFolder method? Pin
naresh.kalp12-Sep-11 22:00
membernaresh.kalp12-Sep-11 22:00 
GeneralElement is already the child of another element - FIX Pin
Josip Jaic28-Feb-11 7:04
memberJosip Jaic28-Feb-11 7:04 
QuestionVery Nice Article Pin
Ntr2ntr_kiran6-Oct-10 4:16
memberNtr2ntr_kiran6-Oct-10 4:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.171114.1 | Last Updated 18 Aug 2010
Article Copyright 2010 by Timmy Kokke
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid