WPF TreeView Control Introduction

 in WPF  tagged node / nodes / view / control / introduction / tree / treeview / hierarchical / WPF TreeView by
This entry is part 1 of 6 in the series WPF TreeView

WPF TreeView

The TreeView is the best control for displaying hierarchical data with nodes because it has nodes that the user can expand and collapse. TreeViews items are stacked vertically, just like the Menu. The programmer will fill the Tree with TreeViewItems. TreeViewItem’s Header property contains the current item and its Items collection contains subitems, which are expected to be TreeViewItems.

Always use TreeView to explicitly wrap items in a TreeView.

Below is a screenshot of a very simple TreeView example. There are 3 identical TrreViews each in their own row of a Grid. By default the TreeView is collapsed as you see in the top one.

Below is the XAML code. There is no code-behind.

view source
print?
1<Window x:Class="TreeViewSimple.MainWindow"
2        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6        xmlns:local="clr-namespace:TreeViewSimple"
7        mc:Ignorable="d"
8        WindowStartupLocation="CenterScreen"
9        Title="TreeViewSimple" Height="250" Width="400">
10    <Grid Margin="6">
11        <Grid.RowDefinitions>
12            <RowDefinition/>
13            <RowDefinition/>
14            <RowDefinition/>
15        </Grid.RowDefinitions>
16        <TreeView Grid.Row="0">
17            <TreeViewItem Header="Desktop">
18                <TreeViewItem Header="Computer"></TreeViewItem>
19                <TreeViewItem Header="Recycle Bin"></TreeViewItem>
20                <TreeViewItem Header="Control Panel">
21                    <TreeViewItem  Header="Programs"></TreeViewItem>
22                    <TreeViewItem Header="Security"></TreeViewItem>
23                    <TreeViewItem Header="UserAccounts"></TreeViewItem>
24                </TreeViewItem>
25            </TreeViewItem>
26        </TreeView>
27        <TreeView Grid.Row="1">
28            <TreeViewItem Header="Desktop">
29                <TreeViewItem Header="Computer"></TreeViewItem>
30                <TreeViewItem Header="Recycle Bin"></TreeViewItem>
31                <TreeViewItem Header="Control Panel">
32                    <TreeViewItem  Header="Programs"></TreeViewItem>
33                    <TreeViewItem Header="Security"></TreeViewItem>
34                    <TreeViewItem Header="UserAccounts"></TreeViewItem>
35                </TreeViewItem>
36            </TreeViewItem>
37        </TreeView>
38        <TreeView Grid.Row="2">
39            <TreeViewItem Header="Desktop">
40                <TreeViewItem Header="Computer"></TreeViewItem>
41                <TreeViewItem Header="Recycle Bin"></TreeViewItem>
42                <TreeViewItem Header="Control Panel">
43                    <TreeViewItem  Header="Programs"></TreeViewItem>
44                    <TreeViewItem Header="Security"></TreeViewItem>
45                    <TreeViewItem Header="UserAccounts"></TreeViewItem>
46                </TreeViewItem>
47            </TreeViewItem>
48        </TreeView>
49    </Grid>
50</Window>

If you want a node to be expanded, you can use the IsExpanded property and set it to True. If you use the code below, the top TreeView will look like the middle TreeView in the screenshot.

view source
print?
1<TreeViewItem Header="Desktop" IsExpanded="True">
Series NavigationWPF TreeView Headers >>