SilverlightShow: Using the TreeView control in Silverlight Comments

RE: Using the TreeView control in Silverlight

lnikolov — Wed, 22 Dec 2010 18:26:35 GMT

The article has been updated to the latest version of Silverlight and Visual Studio.

RE: Using the TreeView control in Silverlight 2

Satish Chaudhary — Sun, 20 Jun 2010 16:26:50 GMT

Great Tutorial....Thnx a lot....

I have a situation wherein items should be dropped only on the nodes....Not above or below the nodes....when I drop an item on the node, its child should be created....

what should I do for that?

Thnx in advance....

Satish Chaudhary

RE: Using the TreeView control in Silverlight 2

Yesubabu — Mon, 07 Jun 2010 16:59:00 GMT

Excellent work.This helped me to start with XML binding in treeview.

I have a requirement like, instead of simple showing the treeview like:

> Announcements

> Products

> Controls

> Tools

I wanted to show the XML nodes as it is. I mean my tree view should output like below:

Please help me in this.

RE: Using the TreeView control in Silverlight 2

sudha — Sun, 06 Jun 2010 11:32:47 GMT

Hi,

this is greate article,

I am looking for similar requirement,along with have additional requirement.

I have xml file as

As soon as i load the page..parent node should be expanded..

kindly help me how can i achive this.

thanks,

Sudha

RE: Using the TreeView control in Silverlight 2

Brandon — Fri, 04 Jun 2010 07:32:19 GMT

This is a great Tutorial, but when if I go back to my collection and I update an element, the change is not reflected in the treeview but I can definitely see it my collection at runtime.

RE: Using the TreeView control in Silverlight 2

Jerry — Sat, 24 Apr 2010 14:21:30 GMT

Excellent work....Straight to the point. I could style and populate the treeview in our application in minutes.

Thanks.

RE: Using the TreeView control in Silverlight 2

Manu — Wed, 06 Jan 2010 16:07:03 GMT

Hi,

Thank you for this tutorial.

I try to translate this in VB.net, but I have problem.

    
            Imports System  
        
            Imports System.Collections.Generic  
        
            Imports System.Linq  
        
            Imports System.Net  
        
            Imports System.Windows  
        
            Imports System.Windows.Controls  
        
            Imports System.Windows.Documents  
        
            Imports System.Windows.Input  
        
            Imports System.Windows.Media  
        
            Imports System.Windows.Media.Animation  
        
            Imports System.Windows.Shapes  
        
            Imports System.Collections.ObjectModel  
        
            Imports System.Xml.Linq  
        
            Partial Public Class MainPage  
        
                Inherits UserControl  
        
                Public Sub New()  
        
                    InitializeComponent()  
        
                End Sub 
        
                Private Sub LoadData()  
        
                    Dim categories As New List(Of Category)()  
        
                    Dim categoriesXML As XDocument = XDocument.Load("Chenets.xml")  
        
                    categories = Me.GetCategories(categoriesXML.Element("categories"))  
        
                End Sub 
        
                Private Function GetCategories(ByVal element As XElement) As List(Of Category)  
        
                    Return From category In element.Elements("category") Select New Category(Name = category.Attribute("name").Value, SubCategories = Me.GetCategories(category))  
        
                End Function 
        
            End Class 
        
            Public Class Category  
        
                Private _Name As String 
        
                Public Property Name() As String 
        
                    Get 
        
                        Return _Name  
        
                    End Get 
        
                    Set(ByVal value As String)  
        
                        _Name = value  
        
                    End Set 
        
                End Property 
        
                Private _SubCategories As List(Of Category)  
        
                Public Property SubCategories() As List(Of Category)  
        
                    Get 
        
                        Return _SubCategories  
        
                    End Get 
        
                    Set(ByVal value As List(Of Category))  
        
                        _SubCategories = value  
        
                    End Set 
        
                End Property 
        
            End Class

One Error :

Subcategories is on erreur (Erreur 1 Le nom 'SubCategories' n'est pas déclaré ou ne se trouve pas dans la portée )

Anyome, can I Help Me?

Thank You

RE: Using the TreeView control in Silverlight 2

yogesh — Fri, 11 Sep 2009 12:34:40 GMT

I have change my ItemContainerStyle style of Some Items in treeview on button click. please let me know how to refresh the trview componerts.

thanks

yogesh

RE: Using the TreeView control in Silverlight 2

umer — Thu, 14 May 2009 03:47:11 GMT

thanks for this.. it really helped !!

i have made a style for TreeViewItem by defining some static Items.. but now i want to apply that style to Items that are databound.

i am using the same code as you have given above (using HierarchicalDataTemplate) ... help please

RE: Using the TreeView control in Silverlight 2

Al Pascual — Fri, 17 Apr 2009 18:47:00 GMT

How to rebind the collection when it changes?

RE: Using the TreeView control in Silverlight 2

Enrai — Tue, 27 Jan 2009 07:40:54 GMT

Hi, hany,

yes, it's possible to change the direction of the text to "rtl". The easiest way is to do this:

char[] c = this.TextBlockControl.Text.ToCharArray();

Array.Reverse( c );

this.TextBlockControl.Text = new string( c );

This solution was made by Tamir Khason. Now there is also an additional project in CodePlex that is related to the Silverlight 2.0 support for for Hebrew and Arabic languages, again the mastermind is Tamir. And here is also one post from Tim Heuer about the "rtl" languages, probably it will be helpful too.

On the other hand if you want to change the whole design of the TreeView to right-to-left, which menas the expand-buttons to go to the right side and the alignment of the items to be right, you have to rearrange the template of the TreeView and the TreeViewItem. I don't know what exactly should be changed but I think it would be something that regards the HorizontalAlignments properties and the columns of a few grids. If you need additional help, don't hesitate to ask! ;)

Change direction of trreview

hany — Thu, 22 Jan 2009 04:31:24 GMT

how can i change direction of treeview control to "rtl" and writing arabic language element???

there any property for that purpose???

how??

RE: Using the TreeView control in Silverlight 2

Enrai — Sat, 20 Dec 2008 09:20:38 GMT

@Daniel Lyle You can design the business object however you like, as long as it provides you with a way to bind the TreeView to it. Instead of using an object class for the Name property you can do the following:

public class Category

    public T Name{ get; set; }

...

This way you can template the class and pass the type of the property through the class name.

@ AbhishekVas By default there is no drag and drop functionality in the TreeView control, but there should be no problem to implement such. The RadTreeView by Telerik for example allows dragging and dropping in the tree. Whne you implement the drag and drop functionality you should be able to raise an event when something is dropped. This event can be used to write the new data to the XML file. Good luck!

@Zain Shaikh To animate the expanding and collapsing of the nodes you should add a storyboard in the ViewStates for "Expanded" and "Collapsed" of the TreeViewItem, that will animate the container for the sub nodes. For example the Opacity of the "ItemsHost" ItemsPresenter can be easily animated, so the sub nodes will fade in and fade out.

RE: Using the TreeView control in Silverlight 2

Zain Shaikh — Fri, 19 Dec 2008 07:11:01 GMT

wow, thats really goood.

i applied style on the treeview but can you please tell me how to animate on collapsing and expanding...?

Drag and drop in Treeviews

AbhishekVas — Tue, 16 Dec 2008 06:45:18 GMT

Dear Martin,

I am interested to know whether we can drag and drop nodes from one tree view to another.

My problem is that I have two tree node which are bound to two different XML.

now if I drag and drop item from one tree node to another, I should be able to do that with corresponding changes in XMLs.

Regards

Abhishek Vashistha

RE: Using the TreeView control in Silverlight 2

Daniel Lyle — Fri, 12 Dec 2008 10:17:54 GMT

Great tutorial. I like the list of lists approach you suggest and the HierarchialDataTemplate. The list of lists approach shares in the simple beauty of Lisp style lists. The HierarchialDataTemplate reminds one of the simple beauty of the Tree controls that Java led the industry with some years ago that truly separated the model from the view.

I did have a question -- is there a way to create a more generic list than your example recursive Category class? I guess one could replace the Name string with an Object class (like a void pointer in C).

RE: Using the TreeView control in Silverlight 2

Enrai — Tue, 02 Dec 2008 08:22:38 GMT

@Austin The Category class allows me to handle unlimited levels of hierarchy, because every sub category has a collection of categories and so on and on. On the other side using the recursion with LINQ to XML there is no problem to read a XML with uknown number of levels. If you want try to add additional levels to the XML file in the source code of the example and you'll see that they are handled properly.

About your second question: If you set the ItemsSource to an XElement or XDocument (they need a cast) you will have problems defining the bindings in the XAML. For the HierarchicalDataTemplate's source you have to set the Elements("category") collection and then you have to bind the value of the TextBox to the Attribute("Name") value. The binding syntax doesn't support brackets, so it can't be done that way. Probably workarounds can be found, but I don't think there is a need. You can just create a collection, fill it with the needed information from the XML and then define the bindings in the XAML - much easier and the code stays clear and understandable. :)

RE: Using the TreeView control in Silverlight 2

austin avrashow — Mon, 01 Dec 2008 18:14:29 GMT

I should have asked 'Can you set the ItemsSource property for the TreeView to an XDocument or XElement?'

[The reason my previous question duplicated was i submitted it, then pressed F5]

RE: Using the TreeView control in Silverlight 2

austin avrashow — Mon, 01 Dec 2008 16:19:29 GMT

When you set the ItemsSource property to a collection, you defined a class with 2 levels of hierarchy.

What if I wanted to bind to an XML document that has an unknown number of levels?

RE: Using the TreeView control in Silverlight 2

Enrai — Wed, 19 Nov 2008 08:15:07 GMT

Hm, for the moment I also haven't found a way to do that, but here are my thoughts about this topic. When using databinding the Items collection of the TreeView contains the collection that I am setting as ItemsSource and there is no sign of TreeViewItem controls. On the other hand when using TreeViewItem controls the Items collection is filled with the defined controls and I can access each item in the collection and its properties. This gives me some freedom to experiment with the items and find a solution for the problem, but there are some issues that I haven't solved so far. For example this:

public Page()

    InitializeComponent();

    this.MyTreeView.Focus();

    ( ( TreeViewItem )this.MyTreeView.Items[ 1 ] ).IsSelected = true;

    ( ( TreeViewItem )this.MyTreeView.Items[ 1 ] ).Focus();

I set the IsSelected proeprty of the desired item to true. When I run the application and the TreeView appears the item is selected but it's in inactive state. If you click on another item it doesn't get unselected. I've tried to focus the TreeView control and its child but it doesn't seem to work, none of them gets focused.

Another strange thing is that when I select an item and click somewhere on the TreeView outside of the items, the first item gets selected.

If someone have any ideas, I'll be glad to share them with me. I will continue to dig in the control, so expect more articles about it.

RE: Using the TreeView control in Silverlight 2

Murtaza Ali — Wed, 19 Nov 2008 07:01:07 GMT

This is Quite Good sample

but what i am intrested is how to show a particular category in the TreeView as Selected

i am also using the same (treeview with databinding and hirarcheical Template) but i need to show the first item in the treeview as selected