What is the best replacement for Tree View control in Windows 8 app?

Question

I was looking for the best replacement for Tree View control to show hierarchical data in Windows 8 app.

Let's say you have a screen like Bug details in TFS. It has a field called "Iteration Path" which is like a Tree View from where you select a node to populate the field.

The best replacement that I found was the folder structure in Mail app. Anyone have other ideas/suggestions on how to show multi-level hierarchical data for Modern UI?

Here's what the Bug details screen looks like. The Iteration Path is only 2 levels deep here but it may be more. Full-res picture link - http://i.stack.imgur.com/VwmVK.png

Answer 1

Microsoft have left the TreeView display in mind when they introduced Windows 8. Now you move down the hierarchy by clicking items (categories) and using the back button to brows back. This is the default style of hierarchical navigation on Windows 8.

So a TreeView control in the style of Windows 7 and previous Windows versions does not apply. Take the Skydrive App, as one example:

Skydrive Root

Skydrive Root > Utbildning, with the back button on the top left corner

Answer 2

Have you had a look at Miller Columns? I'm currently building a web-app and have had the exact same issue with the existing treeview control that was in place which had over 700 nodes spread over about 8 layers. There was the potential to end up with a completely unnavigable vertical list. Using something like Miller Columns allows the user to still see the hierarchical path and go back reasonably easily although there's the issue of clickable areas in the sense that if a node has children, and is still a clickable link, then you have to introduce a second clickable entity to the node to toggle display of the children. This is obviously not a problem in, for example, Mac Finder which has a Miller Column view, which only deals with folder entities as nodes and thus do not have a secondary navigation/link. Not sure about developing a windows 8 app, but it would be pretty easy to code up a suitable interface in JavaScript/jQuery to sift trough a load of nested lists.

Answer 3

You're allowed to build a (simple) in-place tree view in Windows 8 for things like this.

The best example is the Mail app:

Top-level groupings (like "Google") work as an accordion; I have "Google", "Exchange", "Hotmail" up there. Beneath that, they've put a hierarchical list.

You are able to implement a similar behaviour in a conventional combo box by simply prefixing child elements with an indentation.

If your tree is more (or arbitrarily) complex, you can take some guidance from the hierarchical model documentation on Microsoft's website, or from the Windows 8 file picker: