TreeView control in Silverlight using VB.NET

In this article we will learn how to use TreeView control in Silvelight 4.

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.

Property - Figure1 defines the property window.

Figure 1.

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

Figure 2.

Now click on the Items property from the property window. This is the property window for the parent node. For child node click again Items property of collection editor window.

Figure 3.

For example

Drag and drop a Treeview control on the form and set items collection property. The form looks like this.

Figure 4.

Foreground and Background property

Now using background and foreground property of the TreeView control.

Figure 5.

The form looks like this.

Figure 6.

XAML code

<UserControl x:Class="SilverlightApplication46.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    d:DesignHeight="404" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

    <Grid x:Name="LayoutRoot" Background="White" Height="412">

        <sdk:TreeView Height="400" HorizontalAlignment="Left" Margin="30,9,0,0" Name="TreeView1" VerticalAlignment="Top" Width="318" Background="SpringGreen">

            <sdk:TreeViewItem Header="Item1" Name="TreeViewItem2" Foreground="Blue" Background="Aqua">

                <sdk:TreeViewItem Header="Sub Item1" Foreground="Brown" Background="Tan">

                    <sdk:TreeViewItem Header="Example1" Foreground="DarkRed" Background="Teal" />

                </sdk:TreeViewItem>

            </sdk:TreeViewItem>

            <sdk:TreeViewItem Header="Item2" Background="SteelBlue">

                <sdk:TreeViewItem Header="Sub Item1" Background="Yellow">

                    <sdk:TreeViewItem Header="Example1" Background="Yellow" />

                </sdk:TreeViewItem>

                <sdk:TreeViewItem Header="Sub Item2" Background="Crimson">

                    <sdk:TreeViewItem Header="Example1" Background="Teal" />

                    <sdk:TreeViewItem Header="Example2" Background="Plum" />

                </sdk:TreeViewItem>

            </sdk:TreeViewItem>

            <sdk:TreeViewItem Header="Item3" Background="Wheat" Foreground="Brown">

                <sdk:TreeViewItem Header="Sub Item1" Background="YellowGreen">

                    <sdk:TreeViewItem Header="Example1" Background="Magenta" />

                </sdk:TreeViewItem>

                <sdk:TreeViewItem Header="Sub Item2" Name="TreeViewItem1" Background="Red">

                    <sdk:TreeViewItem Header="Example1" Background="Purple" />

                    <sdk:TreeViewItem Header="Example2" Background="CadetBlue" Foreground="Blue" />

                </sdk:TreeViewItem>

                <sdk:TreeViewItem Header="Sub Item3" Name="TreeViewItem3" Background="Yellow" Foreground="DarkGreen">

                    <sdk:TreeViewItem Header="Example1" Background="Indigo" Foreground="DarkRed" />

                    <sdk:TreeViewItem Header="Example2" Background="Lime" />

                    <sdk:TreeViewItem Header="Example3" Background="DarkBlue" />

                </sdk:TreeViewItem>

            </sdk:TreeViewItem>

        </sdk:TreeView>

    </Grid>

</UserControl>

Now save and run the application.

Figure 7.

Now Expand all node. Then form looks like this.

Figure 8.