Adventures with PivotViewer Part 9: Multi-Layered Trading Cards

Silverlight PivotViewer Layered Trading Cards

Silverlight PivotViewer Layered Trading Cards - click to view video

Introduction
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 collection

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 Images

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 Images

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

PivotViewer Trading Card Hi-Res from XAML

 
Further things to do
Conclusion
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.
Advertisements

4 responses to “Adventures with PivotViewer Part 9: Multi-Layered Trading Cards

  1. Pingback: Adventures with PivotViewer – Part 1 | Xpert360 Ltd Development Blog

  2. Pingback: Adventures with PivotViewer Part 8: Filter pane tooltips | Xpert360 Ltd Development Blog

  3. Pingback: Dew Drop – May 11, 2011 | Alvin Ashcraft's Morning Dew

  4. Pingback: Xpert360 PivotViewer Blog Article Index | Xpert360 Ltd Development Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s