WPF TreeView control in XAML

This article defines the hierarchical or parent/child relationship view of data in TreeView control .

TreeView control

The tree view provides an object oriented hierarchical or parent/child relationship view of data and meta-data. The most common example of a tree view is Windows Explorer's directory structure where disk drives contain folders, folders contain sub-folders and folders contain files. 

Creating TreeView in XAML

<TreeView Height="200" HorizontalAlignment="Left" Margin="100,83,0,0" Name="TreeView1" VerticalAlignment="Top" Width="120" />

The width property represent the width of the TreeView. The Height property represents the height of the TreeView and Name attribute represents the name of the control.

Item Property

Items Property - Initial collection of the nodes for the tree.

Foreground and Background property

The Background and Foreground attributes set the background and foreground colors of TreeView.

For Example

The below code defines the TreeView Control.

XAML code

<TreeView Height="287" HorizontalAlignment="Left" Margin="21,12,0,0" Name="TreeView1" VerticalAlignment="Top" Width="452" Foreground="Brown">

            <TreeViewItem Header="c-sharp" Name="TreeViewItem1" Foreground="DarkRed">

                <TreeViewItem Header="Basic language" Foreground="Red">

                    <TreeViewItem Header="Operator" />

                    <TreeViewItem Header="class" />

                    <TreeViewItem Header="Data type" />

                </TreeViewItem>

                <TreeViewItem Header="Window application">

                    <TreeViewItem Header="control">

                        <TreeViewItem Header="button control" />

                        <TreeViewItem Header="textBox control" />

                        <TreeViewItem Header="Image control" />

                        <TreeViewItem Header="ListBox control" />

                    </TreeViewItem>

                    <TreeViewItem Header="style">

                        <TreeViewItem Header="Inline css" />

                        <TreeViewItem Header="Internal css" />

                        <TreeViewItem Header="External css" />

                    </TreeViewItem>

                    <TreeViewItem />

                </TreeViewItem>

                <TreeViewItem Header="Web application">

                    <TreeViewItem Header="controls">

                        <TreeViewItem Header="Button control" />

                        <TreeViewItem Header="CheckBox control" />

                        <TreeViewItem Header="Label control" />

                    </TreeViewItem>

                </TreeViewItem>

            </TreeViewItem>

        </TreeView>

Now run the application and test it.

Figure1.gif

Now expand it.

Figure2.gif