Silverlight PivotViewer Layered Trading Cards - click to view video
Adding multi-layered trading cards is a feature enabled by the XAML data template trading card support for the version of the Silverlight PivotViewer control that will be distributed in the Silverlight 5 SDK. This article shows you how to implement a similar effect in the previous version of the control.
If you are new to our blog then you may care to take the time to work through the other posts in this series and build up you portfolio of PivotViewer customization skills.
Deep Zoom Collections and Images
Silverlight PivotViewer Product Catalogue basic collection images
The easiest way to achieve this effect is to generate a full set of deep zoom collection imagery for each desired layer. Also generate full sets of deep zoom images for the desired layers of the trading cards.
Simply merge together the folders of the image layers according to your trading cards layer designs. By default the layers 0 to 7, equating to deep zoom folders 0 to 7, are used for the deep zoom collection imagery for the lower resolutions. Only the layers 8 and above are used at runtime by PivotViewer for the individual deep zoom images: folders 7 and below can be deleted and do not need deploying.
PivotViewer Low-Res Trading Card Image transition
It is important that all source images for a trading card are the same height and width. The PivotViewer Excel tool is useful for trying this as you can simply copy the Excel spreadsheet and replace the trading card images.
I would suggest that you use common low resolution images for the zoomed out top layers of the deep zoom pyramid. For the primary theme choose a facet category with fewest values that can be represented by color. Choose images that represent a secondary attribute such as a category-type facet. By following this approach the users can quickly and easily work with the collection trading cards at low resolutions by visual association of color and category icon.
PivotViewer Hi-Res Trading Card Image Transitions
At the other end of the scale with the highest resolution images you probably will want more information, mini-graphs, etc. These images can be captured from a simple custom tool that uses a XAML data template bound to the collection data. If you do this you ought to be able to reuse your code with the vNext version of PivotViewer.
PivotViewer Trading Card Hi-Res from XAML
Further things to do
This article is just a brief run through that introduces multi-layered visualization of Silverlight PivotViewer control trading cards. It targets the developer who has already started customizing the Silverlight PivotViewer control in preparation for the next version scheduled to be distributed with the Silverlight 5 SDK. Any comments or request for future topics are welcome.