Modifying the existing Tree View control in Silverlight

In this article we will see how we can modify the default tree view control in Silverlight 3.

Step 1:

Create a Silverlight project


Step 2:

Open MainPage.xaml in Expression blend. Go to the new 'data' tab in blend and select 'Define New Samle Data'. Name the datasource as TreeViewDataSource.


Step 3:

In the Collection property of the datasource you can change the default properties as you wish. For this tutorial, I will use image and string.

You can add more properties by clicking the '+' sign on the left side of the 'Collection' property.


Step 4:

Now click the '+' button and select 'Convert to hierarchical collection'


Step 5:

Now drag and drop the Collection on to your design palette and see the magic.
Now Test the project.


Step 6:

Now to customize this datasource open the project in Visual Studio. You will see a new folder is added to your solution called 'Sample Data'. Open it.
You will see a new xaml is created called TreeViewDataSource.xaml. Open it. Now you can understand the logic behind that magic in this line

<SampleData:Item Property1="A. Datum Corporation" Property2="/MyTreeView;component/SampleData/TreeViewDataSource/TreeViewDataSource_Files/image01.png"/>

The pictures are available in TreeViewDataSource_Files folder.

Step 7:

Now we will create our own TreeView with our pictures and Text. First you need to remove all the pictures from the TreeViewDataSource_Files folder and include our own files.Then open the TreeViewDataSouce.xaml , clear it and paste the following lines of code:

<SampleData:TreeViewDataSource xmlns:SampleData="clr-namespace:Expression.Blend.SampleData.TreeViewDataSource" xmlns="">




Step 8:

Now if you have C#.jpeg,Java.jpeg,PHP.jpeg and C.jpeg in your folder,then to create a sample tree view you can try this:

<SampleData:Item Property1="C sharp" Property2="/MyTreeView;component/SampleData/TreeViewDataSource/TreeViewDataSource_Files/C#.jpeg">
                <SampleData:Item Property1="Java" Property2="/MyTreeView;component/SampleData/TreeViewDataSource/TreeViewDataSource_Files/Java.jpeg">
<!-- Level2 -->
                        <SampleData:Item Property1="PHP" Property2="/MyTreeView;component/SampleData/TreeViewDataSource/TreeViewDataSource_Files/PHP.jpeg"/>

      <SampleData:Item Property1="C" Property2="/MyTreeView;component/SampleData/TreeViewDataSource/TreeViewDataSource_Files/C.jpeg"/>

The output will be like this:


Cheers!!! In the next article we will see how to modify this in the design view.

Similar Articles