WPF TreeView Example: TreeViewItem

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"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="MainWindow" Height="350" Width="525">
    <Grid>
	<TreeView
	    HorizontalAlignment="Left"
	    Height="200"
	    Margin="10,10,0,0"
	    VerticalAlignment="Top"
	    Width="300"
	    Loaded="TreeView_Loaded"
	    SelectedItemChanged="TreeView_SelectedItemChanged"
	    Background="AliceBlue"/>
    </Grid>
</Window>

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()
	{
	    InitializeComponent();
	}

	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;
	    tree.Items.Add(item);
	    tree.Items.Add(item2);
	}

	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.

Is

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.

Window

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.

Related Links