Silverlight Pivot Viewer by Anton

August 24, 2010 Anton Silverlight 0

Pivot Logo

Internet is a great opportunity to show your products to the end customers, but sometimes quantity of those products is too large. New Silverlight control called PivotViwer helps in such scenarios.

PivotViewer is Silverlight version of Pivot Browser presented by Microsoft Live Labs. Pivot Browser makes it easier to interact with massive amounts of data in ways that are powerful, informative, and fun. Its free to use, but no sources available. You can get more info from official site. This non-web browser will helps us to check our data further.

Lets get back to Silverlight.

Where can we use this control?

In:

  • Business Intelligence
  • Intranet Navigation
  • Living Info Graphics
  • Academic Research
  • Retail
  • Image Galleries
  • And others…

Pivot (Browser and Silverlight control) provides a filtering and showing techniques to fully represent your data. A lot of relative information will be shown (properties, related collections of items) to select and find everything you need.

What kind of data?
Currently, PivotViewer works with 2 formats CXML and DZC.

  1. CXML – Collection XML. Its a marked up file based on XML file format.
  2. DZC – The images in the collection are described in Deep Zoom format.

 

View

 

Creating a collection has four distinct steps:

  1. Pick your data – First, pick a set of data to turn into a collection and decide how you want to present it.
  2. Create XML and images – Once you have your data sources, you’ll need to describe it in Collection XML (CXML) and transform your images to the Deep Zoom format. Microsoft has build a variety of tools from an Excel plug-in to an open-source software library, or you could build your own.
  3. Host it – To share your collection with others, host it on a web server.
  4. Share it – View it with PivotViewer control on your website.

How is it working?

Conceptually, a collection is just like any other web content. When the user browses the collection from a web page, the PivotViewer will use the Silverlight Control to display the files. Architecture

Collection creation tips:

  1. The fastest way to create it is using Excel plugin. I’ve used MS Office 2010 Beta and it all worked fine. You need to open Excel and in top menu bar you will see Pivot Collection tab. Press New Collection. You will see 5 columns Image Location, Preview, Name, Href and Description. At the bottom there is CollectionProperties tab where you can set Title, Icon, Brand Image, Additional Search Text and Copyright. For faster image importing you can use Import Images button from top menu.
  2. Quick Preview will work only if you have Pivot Browser installed. Remember! You can check your created collection locally by using Pivot Browser. Pivotviewer control works only with web-hosted collections.
  3. You can a console version. Read more here.

Deployment tips:

  1. PivotViewer is provided by DLLs. We cant change some methods and behavior. But if we will create inherited class from PivotViewer that will allow us to override some methods.
  2. Don’t forget to permit in clientaccesspolicy.xml to download files for Silverlight applications.
  3. If you want to navigate to Href link directly from item – it is hard. Control allows only double-click or CustomActionButton hyperlink on the right top corner of image. With fixed font and background. Andrew Cox (one of the Microsoft Developers) says that in the next version it will be fixed.
  4. Every Popup containing a PivotViewer needs to be parented by some other element in the visual tree. If a popup containing a PivotViewer is not parented, there will be input problems when the browser zoom level is not 100%.
  5. For security reasons alpha-numeric keys are disabled in full screen mode in Silverlight.
  6. Exceptions are not contain full information about the problem. It’s a problem.

Examples of Pivot Collections:

Visual Studio 2010 Example: you can use this sources to work with collections. In this project there is custom control inherited from PivotViewer with overriden methods and default events.

public class CustomPivotViewer : PivotViewer
{
public CustomPivotViewer()
{
ItemActionExecuted += new EventHandler(NetflixPivotViewer_ItemActionExecuted);
ItemDoubleClicked += new EventHandler(NetflixPivotViewer_ItemDoubleClicked);
}
private void BrowseTo(string itemId)
{
HtmlPage.Window.Navigate(new Uri(GetItem(itemId).Href));
}
private void NetflixPivotViewer_ItemDoubleClicked(object sender, ItemEventArgs e)
{
//page address
BrowseTo("about:blank");
}
private void NetflixPivotViewer_ItemActionExecuted(object sender, ItemActionEventArgs e)
{
//page address
BrowseTo("about:blank");
}
protected override List GetCustomActionsForItem(string itemId)
{
var list = new List();
list.Add(new CustomAction("Back to the main page", null, "Back to the main page", "view"));
return list;
}
}

Documentation:

Official site
Silverlight.Net
MSDN like help

Sample Download for Pivot Viewer

Sample available for download at Download pivot sample.