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="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

  <SampleData:TreeViewDataSource.Collection>

     </SampleData:TreeViewDataSource.Collection>

</SampleData:TreeViewDataSource>


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">
<!--Level1-->
            <SampleData:Item.Collection>
                <SampleData:Item Property1="Java" Property2="/MyTreeView;component/SampleData/TreeViewDataSource/TreeViewDataSource_Files/Java.jpeg">
<!-- Level2 -->
                    <SampleData:Item.Collection>
                        <SampleData:Item Property1="PHP" Property2="/MyTreeView;component/SampleData/TreeViewDataSource/TreeViewDataSource_Files/PHP.jpeg"/>
                    </SampleData:Item.Collection>
                </SampleData:Item>
            </SampleData:Item.Collection>
        </SampleData:Item>

      <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.