×

First time here?

You are looking at the most recent posts. You may also want to check out older archives. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS or email. Thank you for visiting!

Last week or so the PivotViewer control was released, which is from the Microsoft LiveLabs team.  It’s a Silverlight control that enables you to visualize data information in a DeepZoom type experience.  Be sure to check out the PivotViewer learning section for some initial information if you haven’t seen any demonstrations.

I received an email a few days back hoping for a more quick “how to” on using this control.  After all, it is a control for Silverlight and requires some implementation.  Honestly, I hadn’t even used it myself until I got that note.  I thought I’d jot down my notes in creating and consuming the simplest form of data and display using PivotViewer.  I say “simple” because you can get much more complex, but I wanted to simply show the quick steps.

Understand first that Pivot collections are a combinations of imagery and metadata that describe that imagery.  If you’ve ever seen the Hard Rock Memorabilia site that was done in early Silverlight days, this is the similar concept.

Step 1 – Get PivotViewer

The first thing you need to do is get the bits.  I’m going to assume you already have Visual Studio 2010 and Silverlight 4 Tools installed.  You can get the PivotViewer SDK at the PivotViewer learning section of the Silverlight community site.  Once you run the installer, the SDK will be installed to %ProgramFiles%\Microsoft SDKs\Silverlight\v4.0\PivotViewer\<RELEASE>.  There is a sample folder with source for an implementation as well if you want to look at it, but it has custom actions and things that you may not need.  My steps below are the “PivotViewer 101” steps to get a simple collection.  The sample provides more sample code to do other things with PivotViewer.

Step 2 – Get Pivot collection building tools

In order to use the control, you must have a Pivot collection source.  This is a specific data format in XML that the PivotViewer (and Pivot full client) use to understand the data.  The XML schema is documented here: PivotViewer Collection XML Schema.  As you can see it is fairly simple.  You could certainly build this by hand, but why would you when there are a few tools to help you!

There are 3 primary methods to create collection sources the way I see it: command-line, code library, and Excel.  The first two are most likely what any dynamic collection source will want to use.  These would be code-based approaches to looking at various types of data sources, appending metadata, and creating dynamically created collection sources or JIT-created ones as well.

The latter, using Excel, is the simplest.  The LiveLabs team created an Excel add-in to create the collection data using a familiar interface without having to really wrestle with the collection schema.  Once installed you have a new tab in Excel:

Excel PivotViewer collection tool

When you click the New Collection button on this tab, you’ll get a simple spreadsheet to start building your collection source.

Step 3 – Begin to build your collection data

For my sample, I’m going to use Bing’s wallpaper images from their last “Bing’s Best” Windows 7 themes.  Having my Excel sheet opened and already clicking on the New Collection function, I can now use the Import Images function to do this in bulk.  Now I don’t have to do this.  In fact, I can do one-by-one using the Choose Image function and select individual items.

I then wanted to provide a category column to enable my user to filter based on categories.  I used the Insert Column feature and gave it the title of Category.  These columns translate to Facets and if you see the schema definition diagram you will see that those visually translate to filters in the control.

Building collection data

Add your data until you are satisfied that you have all your data and metadata represented in this spreadsheet.  I only added one column but you could add more.  I am now complete and can choose to Publish my collection.

The result of the Publish function is that it will produce a file (CXML) and a folder of your DeepZoom-sliced images.  Remember this location of your data.

Step 4 – Build a Silverlight application implementing PivotViewer

Assuming you have the SDK installed, start a new Silverlight project in Visual Studio.  After that here were my simple steps:

Add reference to System.Windows.Pivot – add a reference to this assembly as this is where the PivotViewer control resides.

In my MainPage.xaml I then add an XMLNS declaration for the namespace and implement the control:

   1: <UserControl x:Class="SilverlightApplication164.MainPage"
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   6:              xmlns:pivot="clr-namespace:System.Windows.Pivot;assembly=System.Windows.Pivot"
   7:     mc:Ignorable="d"
   8:     d:DesignHeight="300" d:DesignWidth="400">
   9:  
  10:     <Grid x:Name="LayoutRoot" Background="White">
  11:         <pivot:PivotViewer x:Name="MainPivotViewer" />
  12:     </Grid>
  13: </UserControl>

That’s it for my simple scenario on the UI front.  I’m taking the approach that my app *is* the entire PivotViewer experience.

The next thing I wanted to do was make my simple viewer dynamic.  I wanted this same XAP to be used for any collection.  In my MainPage.xaml.cs code in the Loaded event I use the PivotViewer API and call the LoadCollection function:

   1: public MainPage()
   2: {
   3:     InitializeComponent();
   4:     Loaded += new RoutedEventHandler(MainPage_Loaded);
   5: }
   6:  
   7: void MainPage_Loaded(object sender, RoutedEventArgs e)
   8: {
   9:     string collection = App.Current.Host.InitParams["collection"].ToString();
  10:  
  11:     MainPivotViewer.LoadCollection(collection, string.Empty);
  12: }

You’ll notice that I’m getting a value from Silverlight’s InitParams model.  This enables me to send in the URL of the collection dynamically in my HTML hosting page:

   1: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
   2:   <param name="source" value="ClientBin/SilverlightApplication164.xap"/>
   3:   <param name="onError" value="onSilverlightError" />
   4:   <param name="background" value="white" />
   5:   <param name="minRuntimeVersion" value="4.0.50424.0" />
   6:   <param name="autoUpgrade" value="true" />
   7:   <param name="initParams" value="collection=URL_TO_CXML" />
   8:   <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50424.0" style="text-decoration:none">
   9:        <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
  10:   </a>
  11: </object>

So I can re-use this XAP in many places and just change the initParams value in the <object> tag.  I build the XAP and now I can place it anywhere.

Step 5- Publish the result

The final step is to publish everything.  Remember the CXML file and the folder of images?  They need to reside somewhere.  Here are two critical things to note:

  • If they (collection CXML file and images) are not residing in the same location as the XAP implementing the PivotViewer control, it must have cross-domain policies (clientaccesspolicy.xml) in place persuant to the rules of Silverlight and cross-domain.  Otherwise it won’t work.  PivotViewer makes network requests and this policy is required by Silverlight in cross-domain situations.
  • You may need to add a MIME type mapping on your server in order to serve the CXML file.  I did (on Windows 2003).  I simply added a MIME type mapping for .cxml and gave it the content type of text/xml and it worked.

Once I have all that published, I can deploy my HTML page hosting the XAP and pointing to my collection source.  As an example, here is my final result for this: Bing’s Best Pivot Collection.  Notice how the Category column now shows as a filter source on the left.  Had I made more columns, there would be more filter options.  I also could have made more metadata and populated the HREF attribute of the data to actually link to something.

The cool thing as well is that any collection that works with the Pivot schema works.  You can find some samples at the GetPivot Developer site:

Using the project the way I created it, I can just input these URLs in my initParams to change the collection I want it to view.  I was also able to use the Microsoft Organization Pivot Collection that LiveSide created directly in this without modification as well: MSFT Organization Pivot in Silverlight.

Summary

After spending a few minutes with the control, the simplest display scenario is very simple.  In fact, creating the collection source I think will be the most challenging…to determine what is the appropriate metadata that you need and want to display to your users to interact with in your application.

You can download my sample project here: PivotViewerSimpleSample.zip

Hope this helps!


This work is licensed under a Creative Commons Attribution By license.


Gravatar
7/10/2010 7:01 PM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
Tim,
The PivotViewer is cool.

Not sure if this is the right place to ask this, but I am perplexed by this issue (could be a bug in Silverlight). I was trying to databind the IsEnabled property of a Silverlight TextBox using the following:

<TextBox IsEnabled="{Binding Path=SomeDateProperty.HasValue}" Text="{Binding SomeDateProperty, Mode=TwoWay}" x:Name="DateTextBox" />

where SomeDateProperty is a property of type "DateTime?"

Any ideas as to why the TextBox does not get disabled using Databinding in Silverlight if SomeDateProperty.HasValue is false? If the same thing is done in code-behind as follows then it works!

DateTextBox.IsEnabled = MyObject.SomeDateProperty.HasValue;
Gravatar
7/10/2010 7:39 PM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
If it helps - and just to clarify - "MyObject" has INotifyPropertyChanged implemented and all the usual stuff for databinding is taken care of.
7/11/2010 3:24 PM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
Great! I've been waiting on this control for weeks. Thanks for the update.

I have not had time to play around with the new SL Pivot control and not sure if announced during this release, but I wanted to know if there are any new tools on how to create collections ( both data and images )?

The Excel tool is nice, but seems there are better ways to do this programmatically for nightly collection builds and publishing to server. Also, some of the Pivot guys from videos and Mix session mentioned there was a Photo Shop tool ( tab delimited file ) to create the images. I hope they are going to release a better tool to integrate within Expression suite and/or DeepZoom Composer. I don't have Adobe tools and don't plan on it, so all my collection images are blank until then:(

Thanks again. Can't wait to use control and read Jesse's tutorials.
7/12/2010 8:40 AM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
I have issues with opening your sample page for the Bing best. You have a minruntimeversion set with a build of 50424 - did you mean to put 50524?

Your sample page sends me to the autoupdate page where I am assured that I have the latest version:
The version of Silverlight installed is:
Silverlight 4 (4.0.50524.0)

I've cleaned my temp folder several times, but I can't access your sample page. Any ideas?
7/12/2010 11:14 AM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
shaggygi - actually there is links I put up there to the SDK talking about how you would do dynamic collections programmatically, etc.

ShawnF - thanks for pointing out my bug...fixing now!
7/12/2010 12:23 PM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
ShawnF - Version 50524 is higher than 50424. Shouldn't it run anyway?
Or didn't I get the meaning of "MinRuntimeVersion" ?
7/12/2010 3:14 PM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
I'm sorry I didn't elaborate - I have the higher version and I don't think that there was a version 50424 anyway. I posted because I keep getting sent to the Autoupdate page.
It's likely just something weird with my connection at work, but since I'm new at this I thought I would ask.
7/12/2010 7:32 PM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
I have the same problem as shawnF. I was redirected to the installation page, but my installation information is:
The version of Silverlight installed is:
Silverlight 4 (4.0.50524.0)
Gravatar
7/17/2010 10:40 AM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
You are giving silverlight a bad reputation with those bad implemented samples... people enter here, click on your sample and are asked to update SL, even when using the latest version.
7/17/2010 10:57 PM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
Ric - I doubt I'm giving Silverlight a bad reputation. I had thought I uploaded the right version, but just fixed it. Sorry about that. I am actually working with daily builds and neglected to remember that.

Peter - true, this is just *my* adaptation and doesn't account for anything but an absolute URI. VERY easy to change that of course, but this was just sample code.
7/18/2010 7:26 PM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
Thanks. It works now.
7/29/2010 9:28 AM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
How would one go about having Pivot not just display an image but a rather something like a tile that displayed an image as well as some of the data being pulled in. I would love to use this within the application we are building and use it almost like a record search, but in order to do this I could not just display an image but also data. And this is data that is constantly changing so the tiles would have to be created dynamically when the pivot control is loaded.
7/29/2010 5:27 PM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
Jim - PivotViewer requires some type of image as the focal point. The meta-data can be displayed for that image like it is above when an image is selected. You could also dynamically generate PivotViewer data on the fly (look at their samples to see how to do that).
Gravatar
8/5/2010 10:20 AM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
My question is about this line in the HTML file

<param name="initParams" value="collection=URL_TO_CXML" />

I want to set the URL_TO_CXML to a relative URI but I keep getting errors that it is unable to resolve the URI.

ie set it to
<param name="initParams" value="collection=Collection/Sample.cxml" />
rather than my working version
<param name="initParams" value="collection=Http://localhost/Collection/Sample.cxml" />
8/5/2010 12:27 PM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
Jef - in order to do that your XAP has to be at the same relative root level. Relative paths in Silverlight are relative *to the XAP* only. So if you move the XAP to the root (at the same place where the Collection folder is located) then your relative path should work.
8/9/2010 2:22 PM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
thanks for the article.
Very very helpful.
8/17/2010 10:10 AM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
Do you need Visual Studio 2010 to use the PivotViewer and Silverlight or can it be done using Visual Web Developer Express 2010?
8/17/2010 11:37 AM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
Dorothy - this should all work with VWD Express -- but you will need the Silverlight tools (which are free and can be installed on VWD Express)
9/4/2010 12:39 PM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
I'm getting the error:

Microsoft JScript runtime error: Unhandled Error in Silverlight Application
Code: 4004
Category: ManagedRuntimeError
Message: System.Windows.Markup.XamlParseException: [Line: 0 Position: 0] ---> System.Windows.Markup.XamlParseException: AG_E_PARSER_BAD_PROPERTY_VALUE [Line: 37 Position: 30]
at System.Windows.Application.LoadComponent(Object component, Uri resourceLocator)
etc.....

from this code... I used all the default setting in MS Visual Web Developer 2010.

There are no compile errors. Only this cryptic message. It seems to be saying from what I can gather that there is some problem with my .xaml but I can't seem to be able to find any typos or anything...

Any ideas?

Thanks!

Frank
9/4/2010 2:44 PM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
A sanity check, please: Do the images in this sample scale as the browser window becomes smaller? I'm finding that the images in http://timheuer.com/silverlight/bingbest/ fade instead of displaying their smaller DeepZoom sizes. In fact, in an 800x800 IE8 window, the images are invisible until I select a category to reduce the image count. Same in Firefox 3.6.3, Chrome 5, Opera 10.6.1, Safari 5. Interestingly, the images' boundaries are there and highlight as I pass over them, and they can be clicked, which selects the image and zooms it into visibility.

On the other hand, the other sample, http://timheuer.com/silverlight/msorgpivot/, uses DeepZoom completely, as do cxmls for dog breeds, sports illustrated, and nfl teams using your sample project. All of these tests were done on (and the sample project built on) Windows XP Professional SP3. I also tried the bingbest & msorgpivot sites on a Windows 7 Ultimate with the same no DeepZoom / yes DeepZoom results.

I created two image collections on my own server and used your sample project as well as another sample project. No DeepZoom for either collection, even though I can see the full hierarchy of zooms created by the Excel pivot tool.

Looking at the served cxmls, I noticed that the ones that support DeepZoom all have a Server header value of "Microsoft-IIS/7.0", and the three that do not either do not have a Server header value (e.g., bestbing) or show an older IIS (e.g., "Microsoft-IIS/5.1" for my server). (All cxmls have a Content-Type header of "text/xml".) Is there a quiet IIS requirement for Deep Zoom?

Hence the sanity question. I wouldn't be surprised that there's something wrong with my projects or image collections or server. But I am stumped why I get different DeepZoom experiences with bestbing and msorgpivot off the same site--is it just me?

Thanks!
9/8/2010 4:27 PM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
OK, if I removed the embedded period in the name generated by the Excel Pivot Tool for the pyramid, i.e., change, e.g., "ftnsqzue.lng.xml" to "ftnsqzuelng.xml" in the .cxml file and rename the ftnsqzuelng.xml file and its ftnsqzuelng_files folder, my PivotViewer handles all zooming with no other change to IIS.

Since both http://timheuer.com/silverlight/bingbest/ and http://timheuer.com/silverlight/msorgpivot/ have .cxml files with an embedded period, but the first doesn't seem to use the pyramids while the second does, is it possible that one needs IIS 7 to handle these names? (bingbest doesn't report its server; I'm using IIS 5.1; msorgpivot reports its server as IIS 7)

Tim, does bingbest zoom without fading? If it doesn't, does this simple renaming make a difference?
10/4/2010 9:32 AM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
Hi Tim,

I found your guide very helpful. I am having a problem where the thing just does not work though, on any browser. I am using VS2010.

Hate to dump this error stack here, but it is out of sheer desperation! I get no build errors, but it just does not work in the browser. However, when I swap in your .xap file, it works fine. Clearly some kind of compile error that is not picked up by VS 2010.

Error details from MSIE may be useful:

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MDDR; InfoPath.2; .NET4.0C; .NET4.0E)
Timestamp: Mon, 4 Oct 2010 16:15:51 UTC


Message: Unhandled Error in Silverlight Application Set property 'System.Windows.FrameworkElement.Style' threw an exception. [Line: 11 Position: 35] at System.Windows.Application.LoadComponent(Object component, Uri resourceLocator)
at Yaz_01.MainPage.InitializeComponent()
at Yaz_01.MainPage..ctor()
at Yaz_01.App.Application_Startup(Object sender, StartupEventArgs e)
at MS.Internal.CoreInvokeHandler.InvokeEventHandler(Int32 typeIndex, Delegate handlerDelegate, Object sender, Object args)
at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, Int32 actualArgsTypeIndex, String eventName)
Line: 1
Char: 1
Code: 0
URI: http://10.5.0.52/pivot/beastquest/
-----------------------------------------------------------

I can't imagine what is wrong. Perhaps it is compiling in the wrong libraries or something. I am new to VS so i can't diagnose it further, but it appears as though others have had the same issue(
10/5/2010 2:31 AM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
How do you make the images that pivot displays into clickable links, that take you to a relevant page. In the CXML file, there is a URI field. I would have expected that this would be default behaviour for the Silverlight Pivot Control.
10/5/2010 1:50 PM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
Problem Solved: www.silverlight.net/.../#Prerequisites

But still don't know how to make those links work!

Thanks, D.
10/5/2010 3:35 PM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
Above link Problem now solved:

See: blog.timmykokke.com/.../...pivotviewer-events.aspx
10/6/2010 12:34 PM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
Tim,
Few files are missing from the sample zip

Thanks,
ravi
10/9/2010 10:16 AM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
Hi Tim,

The pivotviewer is could but I have a question. How do I bring data since Entity Framework to PivotViewer?. I don't want working with images. I just want working with data and columns of a SQL table.

Thanks,

Alvaro
12/7/2010 5:24 AM | # Images not showting in pivot viewer: Quick Steps to displaying data using PivotViewer and Silverlight
I have created a collection that works in pivot labs viewer app, yet in my applicatino it show the component without pictures. (Same thing happens with all collections I have tested, taken from around).
I am loading the collection in Loaded event of the pivot, and I have placed the pivot inside a Grid->ScrollViewer->StackPanel. It is not working directly in grid as well. (I have published on IIS, add mime, have reference for pivot dll and xaml, and I have done all things written in here, and took some knowledge from other parts as well, like removing, rebooting, reinstalling).
In case you are interested to help me and you need more information, I can send by email code, and link for application. (collection can be browsed here: 91.216.145.19/Clientbin/PivotCollection.cxml)
12/7/2010 6:20 AM | # Images not showing in pivot viewer: Quick Steps to displaying data using PivotViewer and Silverlight
Hello Tim,

I have managed to pass over it. My pivotviewer was in a stackpanel, which is not good. When I tested it in the grid, I should have tested it better.
Just a piece of advice for others: don't put your pivotviewer in StackPanel.
1/14/2011 1:56 PM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
Thanks for this example. I tried to implement it and keep getting a KeyNotFoundException error for the following line:

string collection = App.Current.Host.InitParams["collection"].ToString();

Please help!
1/26/2011 3:19 AM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
Thanks a LOT for the help and short and sweet tutorial.

I AM ABLE TO GET THE PIVOT VIEWER working on my first try itself running through VS 2010.

3/12/2011 5:39 AM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
Another good one is Hotel Sierra, it's a relatively new location (within the past year or so). 642-515 test I'd put it on the level of the Heathman in terms of rooms and service, though I think Trellis (the restaurant at 642-262 test the Heathman) is probably one of the best in the general area. Hotel Sierra is also within walking distance of Redmond Town Center. They have a courtesty driver as well, 642-374 test though I'm not sure about daily driving to the conference.156-215-70 test Worth asking though. 5 - 10 minutes to Campus without traffic.
Gravatar
3/24/2011 6:02 AM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
Hi,

The downloaded sample is not working because following files are missing:
bing.html
clientaccesspolicy.xml
SilverlightApplication164TestPage.aspx
Web.config

Can someone send these files?

Thanks in advance
Ara
6/13/2011 10:31 AM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
Same issues identified by Ara. The sample seems to be incomplete. It'd be great to have a working example to compare.

Thanks!
Gravatar
8/17/2011 5:30 AM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
Hi, I am using Pivotviewer to display Images in SharePoint 2010, its working fine in local machine but not working on production machine, I am getting blank page.. with the status counting 0 to 100%.. what could be the reason. I am using Sharepoint list to store the images & giving the same in the Pivotviewer as a source
9/3/2012 10:03 PM | # Running Pivot Viewer Out Of Browser
i have developed Silverlight application running out of browser and having pivot viewer taking collection from Sql Server. But it is not working out browser Setting... Please tell me the way to make it working?
7/10/2013 6:09 AM | # re: Quick Steps to displaying data using PivotViewer and Silverlight
How to display data from sql database to Pivot-Viewer ???

 
Please add 1 and 8 and type the answer here:

DISCLAIMER:

The opinions/content expressed on this blog are provided "ASIS" with no warranties and are my own personal opinions/content (unless otherwise noted) and do not represent my employer's view in any way.