HowTo: use PivotViewer in WPF

PivotViewer is an impressive Silverlight control (see my usage at http://gallery.clipflair.net), however Microsoft never released it for WPF.

One could work arround this by embedding Silverlight in their WPF app using the WebBrowser control and talking to it via the JavaScript Bridge of Silverlight, however they could also embed one of those HTML5 PivotViewer-compatible controls that have surfaced in recent years.

Apart from LobsterPot’s HTML5 PivotViewer and its older free version, for another HTML5 PivotViewer (and also a DeepZoom implementation for HTML5) you could host that comes from former SeaDragon team members at Microsoft and seems to work very well see:

http://seajax.github.io/

https://github.com/seajax/seajax/tree/master/v2/app/pivot

https://github.com/seajax/seajax/blob/master/v2/app/pivot/quickstart.html

https://github.com/seajax/seajax

Note that the WebBrowser control uses IE7 or something as HTML engine by default and you need some meta markup at the top of your HTML to tell it to use Edge mode – the latest IE engine that is installed)

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Nice DeepZoom image samples via ClipFlair Studio’s Image component

Here are some DeepZoom image samples to enjoy via ClipFlair‘s Image component, in our ClipFlair Studio app (Silverlight-based):

• http://studio.clipflair.net/?image=http://static.seadragon.com/content/misc/blue-marble.dzi
• http://studio.clipflair.net/?image=http://static.seadragon.com/content/misc/earths-city-lights.dzi
• http://studio.clipflair.net/?image=http://static.seadragon.com/content/misc/carina-nebula.dzi
• http://studio.clipflair.net/?image=http://static.seadragon.com/content/misc/orion-nebula.dzi
• http://studio.clipflair.net/?image=http://static.seadragon.com/content/misc/contoso-fixster.dzi
• http://studio.clipflair.net/?image=http://static.seadragon.com/content/misc/milwaukee.dzi (hand-drawn pano, 1898)
• http://studio.clipflair.net/?image=http://static.seadragon.com/content/misc/last-fm.dzi
• http://studio.clipflair.net/?image=http://static.seadragon.com/content/misc/yosemite-panorama.dzi  (try zooming onto the waterfall)
• http://studio.clipflair.net/?image=http://static.seadragon.com/content/misc/angkor-wat.dzi
• http://studio.clipflair.net/?image=http://static.seadragon.com/content/misc/color-flower.dzi

Another impressive one is this Mandelbrot fractal, a dynamically generated DeepZoom image from Google AppEngine SDK demos:

http://studio.clipflair.net/?image=http://mattjmandelbrot.appspot.com/mandelbrot256.dzi

You can point the mouse and scroll the mouse wheel or double click to zoom in where you want.

One can make DeepZoom tiled images and DeepZoom image collections (can read more at http://msdn.microsoft.com/en-us/library/cc645050%28VS.95%29.aspx) with various authoring tools, including DeepZoom Composer (can read more about that tool at http://msdn.microsoft.com/en-us/library/dd409068%28loband%29.aspx)

However, the easiest way is to use ZoomIt service (http://zoom.it/pages/create/) to make a DeepZoom image wrapper (hosted at that site) for any big image on the web (giving it the original image URL). e.g. http://zoom.it/wR4i is a ClipFlair Poster (the respective DZI image is at http://cache.zoom.it/content/wR4i.dzi – internally ClipFlair’s image component converts zoom.it URLs to get the real .DZI image and show it)