Home | Contact Us

CSharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript

WPF TreeView Example: TreeViewItem

This WPF example uses the TreeView control. It adds TreeViewItem instances to the Items collection. A screenshot is provided.

TreeView supports a hierarchy of items.

We use the TreeView control to contain TreeViewItem elements. We can add these TreeViewItem objects in a C# event handler (Loaded). The tree structure can be expanded and collaped.

Example. Please begin by dragging a TreeView control to the WPF window. Next, add the "Loaded" and "SelectedItemChanged" attributes to the TreeView element. Press tab and they will be added automatically by Visual Studio.

In TreeView_Loaded, we need to initialize the items within the control. We create two instances of TreeViewItem objects. For each item, we set the Header, and use a string array for the sub-items.

String Array

Note: The sub-items could themselves be TreeViewItems, not just strings. The TreeView supports many levels of nesting.

Then: We add both TreeViewItems to the TreeView. We call Items.Add twice—this is an alternative to using ItemsSource.

Based on:

.NET 4.5

Example markup: XAML

<Window x:Class="WpfApplication20.MainWindow"
	Title="MainWindow" Height="350" Width="525">

Example code: C#

using System.Windows;
using System.Windows.Controls;

namespace WpfApplication20
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
	public MainWindow()

	private void TreeView_Loaded(object sender, RoutedEventArgs e)
	    // ... Create a TreeViewItem.
	    TreeViewItem item = new TreeViewItem();
	    item.Header = "Computer";
	    item.ItemsSource = new string[] { "Monitor", "CPU", "Mouse" };

	    // ... Create a second TreeViewItem.
	    TreeViewItem item2 = new TreeViewItem();
	    item2.Header = "Outfit";
	    item2.ItemsSource = new string[] { "Pants", "Shirt", "Hat", "Socks" };

	    // ... Get TreeView reference and add both items.
	    var tree = sender as TreeView;

	private void TreeView_SelectedItemChanged(object sender,
	    RoutedPropertyChangedEventArgs<object> e)
	    var tree = sender as TreeView;

	    // ... Determine type of SelectedItem.
	    if (tree.SelectedItem is TreeViewItem)
		// ... Handle a TreeViewItem.
		var item = tree.SelectedItem as TreeViewItem;
		this.Title = "Selected header: " + item.Header.ToString();
	    else if (tree.SelectedItem is string)
		// ... Handle a string.
		this.Title = "Selected: " + tree.SelectedItem.ToString();

In TreeView_SelectedItemChanged, we detect each time the user clicks on (or moves to) an item. First we cast the sender object to the TreeView type. Then we use the is-cast to detect the type of the SelectedItem.


Finally: We set the Title of the Window to the string representation of the current item. This code depends on the type of the item.


Summary. A TreeView supports a nested, hierarchical display of items. Elements can be dynamically added. We use TreeViewItems to support sub-items in the tree structure. And we detect the currently-selected element with SelectedItemChanged.