Modifying the existing Tree View control in Silverlight

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

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.