Silverlight Tree View Control Example: Part 2

In this article we will be seeing how to create Silverlight TreeView control and add the tree view items using C#.

Xaml:

<sdk:TreeView/>

Steps Involved:

Creating a Silverlight Application:

• Open Visual Studio 2010.

• Go to File => New => Project.

• Select Silverlight from the Installed templates and choose the Silverlight Application template.

• Enter the Name and choose the location.

• Click OK.

• In the New Silverlight Application wizard check the "Host the Silverlight Application in a new Web site".

• Click OK.

Creating the UI:

Open MainPage.xaml file and replace the code with the following one.

1. <UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 

2. x:Class="TreeViewControl.MainPage" 

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

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

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

6. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">

7. <Grid x:Name="LayoutRoot" Background="Gray">

8. <sdk:TreeView  x:Name="Menu" Height="250" Width="250">

9. </sdk:TreeView>

10. </Grid>

11. </UserControl>
    

Using C# add the tree view items:

Open MainPage.xaml.cs file and replace the code with the following code.

1. public partial class MainPage : UserControl   

2. {

3. public MainPage()       

4. {           

5. InitializeComponent();

6. TreeViewItem item = new TreeViewItem();           

7. item.Header = "Menu";           

8. item.Items.Add(new TreeViewItem() { Header="Item1"});           

9. item.Items.Add(new TreeViewItem() { Header = "Item2" });           

10. item.Items.Add(new TreeViewItem() { Header = "Item3" });           

11. item.Items.Add(new TreeViewItem() { Header = "Item4" });           

12. Menu.Items.Add(item);       

13. }   

14. }
    

Hit F5.

Output: