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