Modifying the existing Tree View control in Silverlight Part 3

In my earlier posts I described how to modify the default tree view in Expression Blend and Visual Studio. In this post we will create a working solution.

Step 1 :

First we will place one simple TextBlock control as shown below:



Step 2:

If you remember we had created this modified treeview by customizing the SampleDataSource.xaml in VisualStudio(Refer to my earlier posts). Now if you pay attention to the code you will find how the tree view loading the data dynamically. For example

<SampleData:Item Property1="/MyTreeViewItem;component/SampleData/SampleDataSource/SampleDataSource_Files/20.jpg" Property2="FOX">

Here every tree view item is described as "Item" which has two properties, one for loading the image and one for loading the text. If you understood this then easily you can make this modified tree view working.

Step 3 :

In Blend select the TreeView and navigate to "event" tab. Add one event handler to the SelectedItemChanged event. Move to the code editor and include the namespace

using Expression.Blend.SampleData.SampleDataSource;(SampleDataSource is my DataSource name)

Step 4:

We are ready to do programming now. As mentioned earlier, in sample data source everything is described as Item. So when we click any tree view node we are clicking objects of type "Item", isn't it? So we can easily write the following statement in the SelectedItemChanged event handler.

Item selectedItem=(Item)myTreeViewControl.SelectedItem;
myTextBlock.Text=selectedItem.Property2;

That's it. You got the inside property of the tree view item. Now for business purpose while creating the treeview always try to have a unique property. By this method you can easily get the property specified and based on that can fulfill your business requirement. Source code is included.Check it out!!

Cheers!!