Defining properties in the new PivotViewer is rather straight forward, but I was recently asked about defining a multi-valued property. In the original PivotViewer, the CXML item would simply contain multiple entries for a given property and the PivotViewer would do the rest. Fortunately, PivotViewer still handles most of the details for us, with a minor catch.
For the past year, the Microsoft MVP Program has been holding Twitter chats. The idea is that for a given date/time (usually a 1-2 hr window), you could be involved in a group conversation by following the #mvpchat hash tag. During the first conversation, as I watched the feed blow by at amazing speed, I realized that PivotViewer would offer a unique look into this type of data. So within a couple of weeks of the first event, MVPChat (http://mvpchat.net) was born.
Well we are coming to the end of the PivotViewer Basics series. To round it out, I thought I would continue on with the last post which discussed Basic Item Adorners. In that post we looked at implementing the custom actions that you found in the first PivotViewer. This post will look at taking it one step further and look at what it takes to build our own item adorners.
After a break to review some of my favorite Silverlight 5 features in the 12 Days of Silverlight series, it’s time to get back to some PivotViewer action. This is the 4th post in the PivotViewer Basics series focused on some of the basics of the Silverlight 5 PivotViewer. In this post we will look at item adorners, what they are and how to use them.
This has been the longest series that I have done and I’ve really had a lot of fun doing it. If you have missed any of them, you can catch the whole series here: 12 Days of Silverlight. It’s really nice to see the level of interest in Silverlight 5. Make sure to drop me a note if you have anything specific you would like to see more about. I’m always looking for more topics to write about. So, for the grand finale…
On the twelfth day of Silverlight the team delivered to me… PivotViewer.
This is going to be a quick post on using the PivotViewer (both the v1 and the SL5 version). Every once and a while you realize that you do something out of habit and forget to mention it to anyone, and that was the case here.
One of the features that prevented many projects from using the original PivotViewer was the static nature of the collection. Once a collection was loaded it was not possible to modify any of the trading cards within that collection. This limited the potential workflows that PivotViewer could be used to implement. The Silverlight 5 PivotViewer changes all of that. PivotViewer now responds to changes within the collection as well as changes to the individual objects themselves. The best thing about this new feature is that we don’t have to make any changes to the PivotViewer to take advantage of this.
Continuing with the series on PivotViewer, the next new feature to look at is the concept of semantic zoom. “So what is semantic zoom” you ask? Semantic zoom is showing different visual information at different zoom levels. In the case of PivotViewer, the trading card image will change based on how large the trading card is on the screen.
I have had several people ask me why you would want to change the trading card as the size changed. If you think of the normal PivotViewer interaction, you begin with seeing a lot of items on the screen at a relatively small size. The amount of information that you can provide at that level is very small. In fact, typically you are only able to provide one or possibly two pieces of information effectively (where most of the time it is just one). Once you start filtering the data, the number of visible cards gets smaller and, as a result, the size of each card gets larger. This gives you the opportunity to effectively display more information to the user. Once the user selects a trading card then majority of the PivotViewer screen real estate is filled with the selected item. This gives you the best chance of displaying detail information to the user. As you can begin to see, as the user gets closer to the individual trading card, you can effectively show them more information. This is semantic zoom.
With the release of Silverlight 5 just around the corner, I thought I would start a series on the new PivotViewer and how to get up and running with it. We will start the series off by exploring how to create a client side collection.
One of the most anticipated features of the new PivotViewer is the ability to create client-side collections. PivotViewer accomplishes this by utilizing the traditional ItemsSource property for data and a form of XAML data templates to define the trading card. It is interesting to note that the fundamental core of PivotViewer is still using the DeepZoom technology. If you are thinking that DeepZoom only handles images and not XAML, you would be correct. Under the hood, PivotViewer is rendering the data templates to images and then adding those images to DeepZoom. Remembering that little tidbit will help later down the road.
One of the added API features of the new Silverlight 5 PivotViewer is the ability to define a custom detail pane. It is rather simple to replace the style with your own, however, then you are left with the task of implementing several features that you most likely want to keep (like when to show and hide your detail pane). There are also a few other states and navigation features that would also be nice to keep. We will look at how you can replace the default implementation with the smallest amount of code and keep the functionality that you will want to keep. If you are a bit more hard core and want to know about all of the in’s and out’s of creating your own implementation from scratch, I will address that in a future PivotViewer post.
(Note: This article is based on the Silverlight 5 RC. If you are still using the original Silverlight 4 PivotViewer, you can take a look at the PivotViewer Lessons site on CodePlex.)