WPF TreeView Example: TreeViewItem

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

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. 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.

The Dev Codes

.Net

.NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

Java

Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

TheDeveloperBlog.com

WPF TreeView Example: TreeViewItem

Related Links:

.Net

Java

Related Links