WPF - TreeView Example: TreeViewItem

TreeView, WPF. This control supports a hierarchy of items. We use it to contain TreeViewItem elements. We can add these TreeViewItem objects in a C# event handler.

Getting started. On your TreeView control, add the "Loaded" and "SelectedItemChanged" attributes. Press tab and they will be added automatically by Visual Studio.

Example code. In TreeView_Loaded, we create 2 instances of TreeViewItem objects. For each item, we set the Header, and use a string array for the sub-items.

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.

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

Some notes. 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. This avoids any exceptions due to incorrect types.

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. We use TreeViewItems to support nested items, and we detect the currently-selected element with SelectedItemChanged.