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 - https://i.sstatic.net/VwmVK.png

enter image description here

  • 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
    Commented Dec 13, 2012 at 12:15
  • I think it's a bit like this - a tree view in a drop down
    – jfrej
    Commented Dec 13, 2012 at 13:29
  • I have posted the screenshot. Have a look.
    – Mayank
    Commented Dec 13, 2012 at 15:30

3 Answers 3


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

  • 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
    Commented Dec 13, 2012 at 10:36

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.


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

  • 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
    Commented Dec 14, 2012 at 4:15
  • @Mayank: Ah, I missed that in your question. Sorry!
    – Kit Grose
    Commented Dec 14, 2012 at 4:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.