In the recent past, I worked quite a bit on a new Samples Browser application for the Infragistics Silverlight Data Visualization product. This post is not intended to be a plug for the product, but I want to point out the application’s UI navigation design. I can’t take credit for dreaming this one up (props to Grant for that), but I implemented most of it and added some goodness to the design along the way. Naturally, I didn’t do any of the visual design work — which should be obvious, considering how good this thing looks! 😀
When you first load the application up, it looks like this (click on the following images to see them at full size):
This screen allows you to either check out some “showcase samples” or to view demos for each of the four controls in the product, which are represented by “boxes” toward the bottom. Also notice the start of a breadcrumb trail toward the top, which currently only has an item in it for “Home.” Now suppose you were to click on the XamWebMap box down below. An animated transition would bring you to this screen…
Each item in the list represents a sample for the XamWebMap control, and even has a thumbnail image next to it. Since there are currently ten samples available for XamWebMap, and this view only shows eight items at a time, you can click the arrow button on the right side to slide the other samples into view…
Notice that the breadcrumb trail above now contains the selected control as the next item in the list, in this case “XamWebMap.” If we were to select one of the map samples, the breadcrumb trail would then contain the selected sample in view, like this…
Now here’s where it gets really cool. The breadcrumb trail also provides dropdown lists to make it easier to jump to the exact content you are interested in, if sliding from sample to sample isn’t what you want to do. Here’s what happens when you click on the breadcrumb item for the selected sample…
You could also click on the middle breadcrumb item’s dropdown indicator to get a list of the available controls, and then see a tiled view of that control’s samples. Pretty slick, eh?! As you can probably tell, I’m really proud of how this app turned out. 8)
One more point of interest is that you can view the XAML and C# code for each sample. When you’re viewing a sample, click on the “CODE” icon in the top right corner of the sample and the sample will perform a 3D flip to reveal the XAML/Code view…
While this wasn’t a trivial user interface to implement with Silverlight 2, it wasn’t that hard. I think it provides an excellent user experience, especially because of the smooth transitions from content to content, and the ability to either browse or navigate directly to something.
If you want to check this application out, here’s the link:
http://labs.infragistics.com/silverlightdv/2009.1/
Posted by Josh Smith 
Josh Smith on WPF 
