Take the 2-minute tour ×

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

enter image description here

share|improve this question
What are "Bug details in TFS"? You might want to link to some screenshots showing the applications you are referencing, otherwise people might find it difficult to relate to what you are talking about. –  kontur Dec 13 '12 at 12:15
I think it's a bit like this - a tree view in a drop down –  jfrej Dec 13 '12 at 13:29
I have posted the screenshot. Have a look. –  Mayank Dec 13 '12 at 15:30
add comment

3 Answers

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

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

share|improve this answer
This is useful when we have standalone entities like in your example above. Let me elaborate more on my scenario. Let's say you have a table like Bug details in TFS. It has a field called "Iteration Path" which is a TreeView from where you select a node. What is the best control in that scenario? –  Mayank Dec 13 '12 at 10:36
add comment

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.

share|improve this answer
miller columns en.m.wikipedia.org/wiki/Miller_columns –  FrankL Dec 13 '12 at 19:48
add comment

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:

Windows 8 Mail app sidebar showing folders and subfolders

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:

The hierarchical design model in Windows 8

The Windows 8 file picker

share|improve this answer
Like I wrote in the question, Mail app was the best example that I could find too. Looks like I will have to design something similar. –  Mayank Dec 14 '12 at 4:15
@Mayank: Ah, I missed that in your question. Sorry! –  Kit Grose Dec 14 '12 at 4:42
add comment

Your Answer


