TheDeveloperBlog.com

Home | Contact Us

C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML

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

Adjectives Ado Ai Android Angular Antonyms Apache Articles Asp Autocad Automata Aws Azure Basic Binary Bitcoin Blockchain C Cassandra Change Coa Computer Control Cpp Create Creating C-Sharp Cyber Daa Data Dbms Deletion Devops Difference Discrete Es6 Ethical Examples Features Firebase Flutter Fs Git Go Hbase History Hive Hiveql How Html Idioms Insertion Installing Ios Java Joomla Js Kafka Kali Laravel Logical Machine Matlab Matrix Mongodb Mysql One Opencv Oracle Ordering Os Pandas Php Pig Pl Postgresql Powershell Prepositions Program Python React Ruby Scala Selecting Selenium Sentence Seo Sharepoint Software Spellings Spotting Spring Sql Sqlite Sqoop Svn Swift Synonyms Talend Testng Types Uml Unity Vbnet Verbal Webdriver What Wpf