A tree view displays the hierarchical relationships of objects.


  • Use a tree control when the hierarchical relationship between objects is important and the set of children objects is small.  For a large object set, consider a master/detail view, which allows for filtering and sorting of the objects.
  • Don't use a tree when the the set of objects are under a single node. Use a list box instead.
  • Choose the root node carefully. Give users enough context to understand what they are looking at, but don't make them go through unnecessary levels to get to where they want.
  • If the leaf nodes represents objects that have associated icons, use the icons in the tree.
  • By default, expose all nodes of interest to the user's workflow.  For example, expand the parent nodes of an object that is pre-selected (by either the system or a previous user choice).
  • Remember the user's last selected state for expanding or collapsing a branch node.
  • Place a tree inside a datagrid when you want to show data supplemental to identifying the leaf nodes.  Include the tree control in the first column and ensure that the remaining columns apply across the items in the tree.  When sorting, keep the items in the context of their parent nodes. See the datagrid standard for more information.

  • If multiple selection of nodes is part of the workflow, consider using a tri-state check box in conjunction with the tree.

    This example shows a tree control in which users can select permissions one at a time, or by container.  If the user selects only some of the permissions, the check box for that container is indeterminate.

Visual Specification

Related Topics

Average (0 Votes)