Thursday 8 July 2010

Part 3 of 3 - Creating a Custom Silverlight Pivot View application


This series of articles cover the process from concept to release of how integrated visual search using Pivot Viewer for Silverlight:

Part 1 – What is Pivot?

Part 2 – Creating a Pivot Collection

Part 3 – Creating a custom Silverlight Pivot View application (this article)

Part 3 of 3  Pivot View Silverlight App, Deployment and Summary

Create Silverlight Pivot App

The screen shot below shows how we’ve integrated a Pivot collection based on the Silverlight Pivot Viewer Control into our site in the form of a visual search page, you can try it out here.

clip_image002 Visual Search page

The app is a simple host for the Pivot Silverlight Control, with the addition of some buttons in the top right to select the collection ( East, South East, South West England etc.) and a back button in the left hand side to enable the user to see a previous query.

When the user zooms in we’ve added two custom buttons in the top right hand corner

  • Hotel Rates & Availability – Navigate the user to hotel info web page
  • Hotels nearby – Navigate user to hotels for the given tow (Histon in this case)



Even though the app is quite basic and probably needs a few more iterations, it’s already provided useful for queries such as:

  • “Show me all the AA rated hotels that take pets and cost less than £150 in the South East of England”
  • “Show me all beach hotels group by town in Suffolk”


Future improvements:

  • Deep linking – Currently I cannot share links via social networks e.g. click here for a list of golfing hotels in Suffolk
  • Browser navigation button integration – Make use of browsers back and forward buttons to flip between filters.
  • Dynamic pivot collections to overcome regional search limitations e.g. “Show me all hotels in England with golf courses”
  • Silverlight hotel information pages, rather than navigating to a separate web page
  • Analytics
  • Improved search panel
  • Custom loading page – % loading plus some help
  • Help for first time user, online video help (would be good if Microsoft had an intro to Pivot video we could embed in the app)
  • Use of MEF for custom search / branding options

Issues: Even though the app doesn’t do a lot the Pivot control and it’s dependences (including System.Xml.Serialization) result in a 800K xap file (2.5MB unzipped!). I’m sure this could be reduced by removing the decency on the Silverlight 4 Toolkit (April 2010).




Creating the deep zoom images is very CPU/IO intensive so these tasks were performed on a local PC. The files were then zipped up and uploaded to the server and unzipped. The pivot metadata is relatively small, so could be created either locally or on the server. On IIS I made the following changes

  • Add text/xml mime types for .cxml , .dzc , .dzi
  • Add compression for .cxml , dzc , .dzi
  • Add never expires HTTP headers for deepzoom folders

Note: If you client and collections are on different domains you will need to add a clientaccesspolicy.xml file to the root directory of hosting the collection.


Creating a prototype solution was quick and simple, by refactoring the NetFlix demo code from , using basic hotel photos with some simple search criteria.

But with most things it’s the final 20% that takes the time. Creating the composite images to include the hotels location on a map, getting the balance right on image quality vs download size, to what information to display on screen, and colours all took longer than expected.

Then the design of the search panel also took some time, deciding what data to display and how to group the data. This still isn’t perfect and will probably be refined over the coming weeks.

Finally the images are currently hosted on the west coast of America, this isn’t ideal as most of my customers are in the UK, so will probably need to look into use of a CDN / UK hosting to improve download speeds, possibly hosting on multiple sub domains to increase concurrent downloads and optimisation of the DeepZoom collections to share common low res images (e.g. generic green , yellow , blue images for images less than 16 pixels would reduce the file count significantly).

The Silverlight app is very basic, providing a host for the Pivot Silverlight control and directing the user to a RoomSeeker web page. In the future would be good to extend the app to support dynamic collections based on room availability.


This is part 3 of 3:

Part 1 – What is Pivot?

Part 2 – Creating a Pivot Collection

Part 3 – Creating a custom Silverlight Pivot View application (this article)


Dave said...

Any chance you can share your code?

Unknown said...

Can you give me some tips on how to create these composite images with photo, maps, stars,colors, etc?

Will Hill said...

If the targeted visitors only for one country, it's better to use CDN or use hosting in the respective country? We use Premium CDN, is that ok?