HomeSearch

WPF TreeView Example: TreeViewItem

Use the WPF TreeView control by adding TreeViewItem instances to the Items collection.

TreeView.

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 (Loaded). The tree structure can be expanded and collaped.

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.

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.

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.

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.
Home
Dot Net Perls
© 2007-2019 Sam Allen. All rights reserved. Written by Sam Allen, info@dotnetperls.com.