The new Silverlight PivotViewer control provides a cool and powerful way to visualize and filter data straight out of the box. If you have some data with a few dozen records or more and have images associated with each record, I urge you to give it a spin and build a quick Silverlight PivotViewer app to show off and enable users to search and filter that data. The whole affair won’t take you more than an hour or two and in the end you’ll have a great looking, fun and powerful window into our data.
All you need to do is generate some special files that contain the data you want to show, create a Silverlight app that hosts the new Silverlight PivotViewer control, and point it at your data.
Here is a proof of concept that I built using data from PuzzleTouch, my online jigsaw puzzles application, that shows off all the stock puzzles available and allows them to be filtered by category, popularity, and difficulty (based on user stats).
Here’s a quick walk-through demonstrating how to build your very own PivotViewer app…
Step 1: Generate the data. This is where most of the work is (but that isn’t saying much). In the end you will end up with a number of Xml and deep zoom image files. Depending on the data, the easiest way may be to use the Pivot Collection Tool for Microsoft Excel. This is an Excel Addin that allows you to toss all your data in a spreadsheet and the addin will generate the Pivot data files from it. However, because I was gathering my data from a handful of different sources and because I find programmatically generating the data to be more interesting, I decided to forego Excel and generate it from code using the Pivot Collection Tool (a.k.a. Pauthor) open source C# library. This library provides an extremely simple API that has everything you need to easily generate all the data that the Silverlight Pivot control needs. All you need to do is add the PauthorLib project to your solution and away you go…
PivotCollection items = new PivotCollection(); items.Name = "Online Jigsaw Puzzles by PuzzleTouch"; items.BrandImage = new PivotImage("http://puzzletouch.com/logo.png"); items.Icon = new PivotImage("http://puzzletouch.com/favicon.ico"); items.FacetCategories.Add(new PivotFacetCategory("Category", PivotFacetType.String)); items.FacetCategories.Add(new PivotFacetCategory("Difficulty", PivotFacetType.Number)); items.FacetCategories.Add(new PivotFacetCategory("Popularity", PivotFacetType.Number)); foreach (var puzzle in StockPuzzles) { PivotItem item = new PivotItem(puzzle.PuzzleId, items); item.Description = puzzle.Description; item.Name = StripExtension(puzzle.Filename); item.Href = string.Format("http://puzzletouch.com/?puzzle={0}", puzzle.PuzzleId); item.Image = new PivotImage (string.Format("C:\\PuzzleTouch\\Images\\{0}.png", puzzle.PuzzleId)); item.AddFacetValues("Category", puzzle.Category.ToString()); item.AddFacetValues("Difficulty", puzzle.Difficulty); item.AddFacetValues("Popularity", puzzle.Popularity); items.Items.Add(item); } PivotCollectionBuffer source = new PivotCollectionBuffer(items); LocalCxmlCollectionTarget target = new LocalCxmlCollectionTarget( "C:\\PuzzleTouch\\PivotData\\puzzles.cxml"); DeepZoomTargetFilter targetFilter = new DeepZoomTargetFilter(target); targetFilter.Write(source);
Here I am creating a PivotCollection object to store my data. I tell it which fields I want to support filtering by (called a FacetCategory), and then I loop through my records and create a new PivotItem for each. Each PivotItem needs a name, href, and image, as well as a value for each FacetCategory.
Once I’m done populating my PivotCollection object, I export it to the file system (which produces all the files required for the pivot control to function). There are other formats you can export to and from, but for my purposes I just wanted to generate from code and produce a local copy of the Pivot data all ready to go. Note: The coolest part here is that all the deep zoom images will be created automatically from the source images! No separate tools or typing in command lines are necessary!
Please refer to the Pauthor documentation for more details on the Pauthor library.
Step 2: Upload. Once you have the pivot data files created, upload them. I chose to upload my data to Amazon S3 because it is cheap and scalable but you could easily put it in any HTTP accessible location. Just remember to drop a clientaccesspolicy.xml file in the root of the domain if the data is hosted somewhere other than where you will be hosting your Silverlight app from.
Step 3: Create your Silverlight app. This is almost too easy…
- Download the Silverlight PivotViewer control.
- Add a reference to System.Windows.Pivot and System.Windows.Pivot.SharedUI
- Insert the following xaml into your main page:
xmlns:pivot="clr-namespace:System.Windows.Pivot; assembly=System.Windows.Pivot"
<pivot:PivotViewer x:Name=“PivotViewer” />
- In the code behind, load the PivotViewer control with the url of the .cxml file that you uploaded to your web site:
PivotViewer.LoadCollection("http://puzzletouch.s3.amazonaws.com/ puzzles.cxml", string.Empty);
That’s it!!! You now have an application that can view your pivot data collection in all it’s glory. Deep zooming, filtering, searching…etc is all built in and working.
From there, you can go forth and customize the experience all you want but with very little work you’ll have a fully functional Pivot viewing application that will give your users a lot of powerful abilities straight out of the box.
Pardon me, but your article does not cover even 10% of the topic (Silverlight PivotViewer app from start to finish ). I mean Linked Collections, Dynamic Collections, open issues etc.
Thanks for the comment Max. Fair enough; I can see how the title could be read to mean ‘top to bottom’. My intent was certainly not to cover all the ins and outs of pivot data or the pivot viewer control but rather try to demonstrate one way to create pivot data and an app that can consume it to get a functioning pivot viewer app (start to finish). Hopefully it will inspire others to take it to the next level and dive into using it with more complex or dynamic data sets.
Thanks Tim for this great, quick run down on getting started with Pivot. I found it really helpful in doing my first Pivot demo.
[…] file in the domain’s root and build a 3 minute Silverlight PivotViewer app to view them. Read my earlier blog post for more details. The only down-side: if you thought it took a long time to generate the files, […]
Great for a quickstart – maybe you can fill in a couple of blanks for me:
1. How did you get the overlay on the top right of the pictures saying “click here to play”?
2. I can’t get the BrandImage to work – does it have to be exactly a certain size and a png?
This quicky helped me a lot.
I am receiving error that says it could not find the file, and the file is the Item image Name.dzi. Not sure what I am doing wrong. Can youpoit me in the right direction. Thank You.
Hi,
has the Pauthor open source C# library been removed from CodePlex? All I can see is the command line tool or is the api part of that download?
How to load any pivot collection from user defined XElement in the slandered of cxml?
How to load any pivot collection from user defined XElement in the stander of cxml?
HOW TO INSERT DATA FROM ANY FORM(EX: REGISTRATION FORM ) TO PIVOT VIEWER AT RUN TIME .PLEASE DO REPLY!!!!
Can you share me the file : Pivot Collection Tool for Microsoft Office Excel.
I can’t download it from the link above!
My email: tranminhtienufo@live.com
Thank you!
I am creating pivot viewer in my application that shows various file.How to specify different option for different types of files?
This site was… how do you say it? Relevant!! Finally I have found something that
helped me. Cheers!
Nonetheless, if another King was exhibiting in the community cards, it drastically lessens
his odds of getting journey Nobleman and enhanced chances
he’s a three eliminate, and your Queens remain excellent.