TreeView

Hierarchical data display with expand/collapse navigation.

Overview

TreeView extends Control and displays hierarchical data as an expandable and collapsible tree structure. Each node is a TreeViewItem that can contain child TreeViewItem elements. Nodes with children show an expand/collapse indicator: ▼ when expanded and ▶ when collapsed. Each nesting level is indented by 2 characters. The currently selected node is highlighted with configurable SelectedBackground and SelectedForeground colors.

Basic Example

<TreeView>
  <TreeViewItem Header="Documents" IsExpanded="True">
    <TreeViewItem Header="Work">
      <TreeViewItem Header="report.pdf" />
      <TreeViewItem Header="notes.txt" />
    </TreeViewItem>
    <TreeViewItem Header="Personal">
      <TreeViewItem Header="photo.jpg" />
    </TreeViewItem>
  </TreeViewItem>
  <TreeViewItem Header="Downloads">
    <TreeViewItem Header="setup.exe" />
  </TreeViewItem>
</TreeView>

Properties

Property	Type	Default	Description
SelectedItem	TreeViewItem	null	The currently selected tree node.
SelectedBackground	Color	Blue	Background color of the selected node.
SelectedForeground	Color	White	Foreground color of the selected node.

TreeViewItem Properties

Property	Type	Default	Description
Header	object	null	The text or content displayed for this node.
IsExpanded	bool	false	Whether this node's children are visible.
Items	IList<TreeViewItem>	empty	Child nodes of this tree item.

Creating Items

Nested TreeViewItem Elements

<TreeView>
  <TreeViewItem Header="Root">
    <TreeViewItem Header="Child 1" />
    <TreeViewItem Header="Child 2">
      <TreeViewItem Header="Grandchild 1" />
      <TreeViewItem Header="Grandchild 2" />
    </TreeViewItem>
  </TreeViewItem>
</TreeView>

Pre-Expanded Nodes

<TreeView>
  <TreeViewItem Header="src" IsExpanded="True">
    <TreeViewItem Header="Controls" IsExpanded="True">
      <TreeViewItem Header="Button.cs" />
      <TreeViewItem Header="TextBlock.cs" />
      <TreeViewItem Header="TreeView.cs" />
    </TreeViewItem>
    <TreeViewItem Header="App.cs" />
  </TreeViewItem>
  <TreeViewItem Header="tests">
    <TreeViewItem Header="ButtonTests.cs" />
  </TreeViewItem>
</TreeView>

Examples

File Explorer Style

<TreeView SelectedBackground="DarkCyan" SelectedForeground="White">
  <TreeViewItem Header="C:" IsExpanded="True">
    <TreeViewItem Header="Program Files">
      <TreeViewItem Header="TerminalNinja" />
      <TreeViewItem Header="dotnet" />
    </TreeViewItem>
    <TreeViewItem Header="Users">
      <TreeViewItem Header="Admin" />
      <TreeViewItem Header="Guest" />
    </TreeViewItem>
    <TreeViewItem Header="Windows" />
  </TreeViewItem>
</TreeView>

Configuration Tree

<TreeView>
  <TreeViewItem Header="Application Settings" IsExpanded="True">
    <TreeViewItem Header="General">
      <TreeViewItem Header="Language: English" />
      <TreeViewItem Header="Theme: Dark" />
    </TreeViewItem>
    <TreeViewItem Header="Network">
      <TreeViewItem Header="Proxy: None" />
      <TreeViewItem Header="Timeout: 30s" />
    </TreeViewItem>
  </TreeViewItem>
</TreeView>

Keyboard Shortcuts

Key	Action
Up Arrow	Move selection to the previous visible node.
Down Arrow	Move selection to the next visible node.
Left Arrow	Collapse the current node, or move to parent if already collapsed or a leaf.
Right Arrow	Expand the current node, or move to first child if already expanded.
Enter	Toggle expand/collapse of the current node.
Space	Toggle expand/collapse of the current node.
Home	Move selection to the first visible node.
End	Move selection to the last visible node.

Key Concepts

TreeView extends Control and manages a collection of root-level TreeViewItem nodes.
Each TreeViewItem can contain nested child items, forming a hierarchical tree structure.
Expand/collapse indicators use ▼ (expanded) and ▶ (collapsed); leaf nodes show no indicator.
Each nesting level is indented by 2 characters for clear visual hierarchy.
The IsExpanded property on TreeViewItem controls whether children are visible; set it to True in XAML to pre-expand nodes.
SelectedItem tracks the currently focused node and is updated via keyboard navigation or mouse click.
Left arrow on a collapsed or leaf node navigates to the parent node; Right arrow on an expanded node navigates to the first child.