Question

I’m trying to change the layout of a databound treeview from this:

To this:

And of course selection must works properly:

Do you have any ideas about how to do that. I’ve been trying to change the template but I can’t find out a way to have this behavior. Maybe a component already exists…

Thanks for your help !

Answer 1

I finally find a way out, but like you say Charlie, it involves creating ListBox:

• I create a new CustomControl which inherits Control (I couldn’t use neither Selector or TreeView because I wouldn’t have been able to manage the SelectedItem property from the derived class)
• In the template of this CustomControl is an ItemsControl. This ItemsControl has its ItemTemplate property set to a DataTemplate containing a ListBox.
• The CustomControl has a Depth property of type int. This property indicates the number of ListBox that should be generated.
• The CustomControl automatically databound ListBoxes together: each ListBox’s ItemsSource property is databound to the SelectedItem’s children property of the previous ListBox in the visual tree.
• The CustomControl has a SelectedItem property and a SelectionChanged event (like Selector-derived class).
• I added an IsReallySelected attached property to the ListBoxItem which are generated. This enables to databing an IsSelected property of the ViewModel class behind the control with the IsSelected of the ListBoxItem. I had to create an attached property because its value is true when the ListBoxItem is selected AND the parent ListBox has IsSelectionActive set to true.

I blogged about this solution (with source code) on my blog.