Join Walt Ritscher for an in-depth discussion in this video Analyzing your data with the PivotViewer, part of Silverlight 4 New Features.
One of the most exciting controls to come out of the Silverlight 4 release cycle is the PivotViewer control. This visualization tool gives users a compelling way to look at datasets, both large and small. Now, Pivot is a Live Labs Project, comes out of Microsoft. Their goal was to create a way to interact with large amounts of data, and as you'll see in a few minutes, it uses this very intuitive, fluent, animated UI. You can learn more at getpivot.com. Internally, it uses another fascinating technology called Deep Zoom.
What Deep Zoom allows you to do is take lots of photos and build them into a zoomable photo set. The key for us is to use the PivotViewer. PivotViewer is a Silverlight user control, and we put that on our page, and it allows us to interact with these pivot collections. To use a PivotViewer, all you need to do is add it to a Silverlight page and point it to a special XML file, and then it will render the pivot data within your page. In order to use this SDK, you are going to have to install a few things.
You're first going to have to install the SDK itself, which contains something called the PivotCollection viewer. You need to install the PivotViewer control, and before you do that, you should also install the Silverlight toolkit. Then lastly, you need to generate some sort of pivot collection. There are a variety of ways to doing this; the simplest is to use an add-in for Excel 2010. Let's switch to Excel 2010. When you installed the add-in, it adds this new tab across the top of your Excel workspace.
This is a pivot collection that I have already created. Notice that I've added pictures. Now, that's one of the key things about pivot; it all depends on a picture. You have to generate a picture that represents your data, and then you create metadata that's affiliated with that picture. In my case, I have decided to show you all the wallpapers inside the Windows 7 Wallpaper folder. So what I did is I went on and imported these photos, I get a preview here, and over in these columns, I can give metadata about this picture. Its name is Sandstone.
It's of the Category Landscape. This is the primary color I see in the photo, and this is the mood that it invokes. These are all custom columns, and you can create any column that you want; it's your metadata. All you need to do to generate one of these is to click on the New Collection button. Then you need to add a picture, so I'll come to where it says Import Images, point it at a folder that contains pictures you want. I am going to use a picture from our lynda catalog, and then I come over here and I add a column, and then I'll give this column a title, like, say, TechTopic.
Then my metadata down here would be something like Silverlight, and that becomes one of the pieces of data that's affiliated with this picture. Now, rather than go through all the process here, I am going to go back to the spreadsheet I already had opened. As you can see, I've got a number of pictures here. Next thing you want to do is take a look at it. Before we take a look at it, let me show you a tool that you can install in your computer to browse through lots of sample collections. I am going to go up and choose Pivot.
Type in "pivot," and you'll see I have this Microsoft Live Labs Pivot. This is a Windows-based application that lets me peruse collections. I am going to come down here and click on the Discover More Collections, and then these are some samples that Microsoft is showcasing here. There's a lot of good information here, and some of my favorites are the National Parks, the Hard Rock Memorabilia catalog. The one we are going to look at today is one here called New Cars. Just to review, this tool is installed when you go to the getpivot web site. Now, what do I see here? I see my metadata.
Remember, they're all about pictures. So here is pictures of Luxury cars, here is pictures of Hybrid cars. When I click on this column, it's going to zoom in and show me those pictures. There is metadata affiliated with these, remember. So if I click on say this one here for this first one up here, it's going to zoom in on the picture. I can zoom in and out of that, and over here, the metadata shows up in this area of the screen. If I'm interested in the Cadillac and learning more about other Cadillacs, I can click here, and it'll zoom out and then pull in the other Cadillac cars that are in this collection.
Here's each of those columns in the spreadsheet becomes one of these items over here: Average Miles per Gallon, Fuel, Experts' Rating and so on. I can choose to Sort by those; I can go from the Card view to back to the Column view if I want. Then I'll clear all my criteria, so I get the columns back. It's interesting to look at other people's collections, but I just built that wallpaper collection. Let's see how we would add that to my application. So we go back to the Excel spreadsheet. There is two buttons here for publishing.
There is the Quick Preview, which is used when you don't have the 30 or 40 seconds to actually generate real collection class. You can click on this to get kind of a Quick Preview of the data. I have the tiles, but they don't actually contain the pictures. You can see there is my Category, and my Colors, and my Mood. Once I'm satisfied that all my categories and filterings are working the way I want, then I can come back here and click on Publish. On my machine, it takes about 40 seconds to publish this collection.
It will then generate this folder called WallpaperCollection_files. If you look inside here, you'll find there are hundreds, if not thousands of pictures in here. I'll scroll back, and here's that special XML file I mentioned. It ends with an extension CXML. So these are the two things I need to bring in to my web site. So let's show you how to do that. I'll switch over to Visual Studio. I have a Silverlight project open in here that also has a companion ASP.NET web site. What I did is I copied that WallpaperCollection_files folder into here.
I also copied this WallpaperCollection.cxml file into here. I then went to my Silverlight project up here, and I added a reference to the System.Windows.Pivot. This is inside the SDK folder, added a reference to the pivot, DLL, then I brought it into scope in my XML, like so, and then I added it to my main grid. Now, I have to write one line of code to load the collection. So I am going to go look at my code behind, and here is that line of code.
I am calling it LoadCollection, and I'm passing it the URL, where to find the CXML file. If you're following along on your computer, this port may not match what you have on your computer. If you're using the developer server, when you press F5 on your computer, it may assign a different port number. So you might need to modify this URL slightly. I think I'm ready to take a look at this Pivot Collection. So I am going to press F5, and now my pivot collection is loaded. There are all the wallpapers of my Windows 7 Hard Drive.
You see my Category, and my Colors, and my Mood settings. There is like Calm, so if I click on this, it will filter my collection down to the calm photos. If I click here, it will filter those down to only the green ones that match that. So I've got two filters turned on. I can turn off the filters at anytime by clicking on the Clear All, I can put them in columns by clicking on this button here, and at anytime I can use my mouse wheel to scroll in or out on the collection. That's the Deep Zoom technology piece here at work. It's very nice.
If I click on this picture of the cactus over here in my Metadata view, I see that this belongs to the Nature category. It's part of the colors Green, and is part of the Calm mood. So if I click on Green here, it will then filter my data back down to only the green pictures. As you can probably tell, I'm really excited about this technology. I can't wait to see what you can create with the pivot API.
Recommended prerequisite: Silverlight 3 Essential Training.
- Alerting users with the Notifications window
- Creating elevated trust applications
- Signing with XAP
- Simplifying binding with the property marker
- Analyzing data with PivotViewer
- Localizing content
- Working with design-time data in Expression Blend
- Adding interactivity with Behaviors