Silverlight TreeView control in VB.NET

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

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.

tr1.gif
 

Figure 1.

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

tr2.gif
 

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.

tr3.gif
 

Figure 3.

For example

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

tr4.gif
 

Figure 4.

Foreground and Background property

Now using background and foreground property of the TreeView control.

tr5.gif
 

Figure 5.

The form looks like this.

tr6.gif
 

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.


 

tr7.gif
 

Figure 7.
 

 

Now Expand all node. Then form looks like this.


 

tr8.gif
 

Figure 8.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.