A complete WPF TreeListView control

Yes, I know, there already is a TreeListView control in the SDK, but it's simple and it isn't complete, so I developed a my custom control working on .NET Fx 3.0/3.5. It supports template, binding, scrolling and themes (classic, aero, luna). It's quite simple to use:

<r:TreeListView ItemsSource="{Binding Source={StaticResource data},XPath=/opml/body/outline/outline}" ItemTemplate="{StaticResource dt}">
    <r:TreeListView.Columns>
        <GridViewColumn Header="Title" DisplayMemberBinding="{Binding XPath=@title}" Width="150" />
        <GridViewColumn Header="Childs" DisplayMemberBinding="{Binding XPath=@count}" Width="100" />
        <GridViewColumn Header="Url" DisplayMemberBinding="{Binding XPath=@xmlUrl}" Width="200" />
    </r:TreeListView.Columns>
</r:TreeListView>

And below a screenshot of the control in action:

The control inherits from TreeView and TreeViewItem classes and uses a custom converter to indent items. The most of work is into the xaml files, built copying markup from original TreeView and ListView styles.
I used this control into my project PaperBoy.

I hope you find useful :-). Download full source control.

Published 22 March 2008 02:42 PM by RiccioloCristian
Filed under: , ,

Comments

# Hai said on 30 November, 2008 11:18 AM

Nice control...

Have tryed to migrate it to Silverlight.. without success....

Any chance that you will make a control like this in silverlight ?

Anyway, thank for that :-}

# RiccioloCristian said on 01 December, 2008 02:35 PM

Thanks, happy to know it :-)

There is few that I can reuse for a Silverlight porting. It's more simple to rewrite it, but it's a nice idea so I hope to get more time to work on it

# Hai said on 02 December, 2008 11:34 AM

Hi RiccioloCristian...

This will be a great contribution to the silverlight community

I've been working with ASP for a few years now and I DON'T LIKE IT !!!

XAML is a great technology from my POV and Compare to ASP Silverlight is much more... everything... :-}

May the force be with you...

Hai

# grhn said on 23 December, 2008 12:35 PM

Hi Ricci,

First, great work on the control. But i was wondering as how can i give it 2 datatables which are related column and it will display as a treeview. As i think that is generally the case when people r looking for hierarchical list views. Please let us know.

thanks

# Dylan said on 30 January, 2009 04:00 PM

Thanks for the control, it works great in Windows apps, but doesn't fair as well in XBAP due to the Reflection Permission restriction on "ActualIndex" and "DesiredWidth".

Any chance you could point me in the right direction to get it working in Partial-Trust?

# fred said on 02 February, 2009 09:02 AM

can I add item dynamically ?

Does it work in mode unbound ?

Thanks

Fred

# RiccioloCristian said on 04 February, 2009 02:47 PM

Dylan: sorry but I used this trick because some base members aren't public and I don't know any other method to know that values :-(

Fred: yes you can using the same way of a TreeView. However I suggest you to bind a list and a resursive sub list even if you don't remove or add item after. It's enough an Array, you can create it also using XAML markup.

# london said on 08 March, 2009 06:33 AM

Hi,

thanks for developping this treelistview, which is much easier to deal with than the one comes out of the box.  Can you show me how to support sorting?  I tried regular sorting, but due to grouping, it didn't work properly.  I wanted to sort within each grouping...

# RiccioloCristian said on 08 March, 2009 10:00 AM

Hi,

it isn't a TreeListView issue, but this is due to the view that control use for each level. The first level has a view, the second level has a view for the subitems for the first level item inner list ecc. So you have to work on view using CollectionViewSource.GetDefaultView and change sorting for each ItemsSource of all ItemTemplate.

# Ciaran said on 13 March, 2009 07:35 AM

Hi,

thanks for the great work.

Just wondering is anyone managed to get this working so that some UIElement (like a tick box) could be used in one of the columns.

I've had no luck trying.

Thanks.

# RiccioloCristian said on 14 March, 2009 01:17 PM

Hi,

there shouldn't be any kind of problems if you use a DataTemplate for the column. You can insert any UIElement

# Ciaran said on 16 March, 2009 08:14 AM

Thanks, I got it working.

I had inadvertently added a 'DisplayMemberBinding' setting that was overriding the DataTemplate.

Works great now!

# Ciaran said on 16 March, 2009 08:17 AM

I forgot to mention one problem I found.

This line:

uiColumn.Arrange(new Rect(current + indent, 0, w - indent, arrangeSize.Height));

throws an ArgumentException 'Width and Height must be non-negative.' when the column is resized to zero.

# Jesse said on 25 March, 2009 01:23 PM

Very nice.  Had a question about this control.  How can I modify the style template to specify which column the expander should reside in?  Currently, it is always the first element.  I'd like to put one column before the expander.  Is it possible with this style?  I can be done with the MSDN TreeListView, but that one isn't as nice as this one in terms of clean markup.

# RiccioloCristian said on 28 March, 2009 10:28 AM

Hi,

yes, you can but not using a property. You have to customize the TreeGridViewRowPresenter at this row:

if (expander != null)

{

  expander.Arrange(new Rect(this.FirstColumnIndent, 0, expander.DesiredSize.Width, expander.DesiredSize.Height));

}

Set X position basing it on other columns size and the column index.

# smitha said on 07 April, 2009 03:08 PM

How should we add a datasource other than xml and bind it to this?

# Christian said on 07 April, 2009 05:09 PM

Thanx 4 the gr8 work !

I got an new requirement :) I need to add long line of text which should overwrite multiple columns (ignore the column boundarys) In addition, the text must start in the 2nd column. I tryed to add a TextBox within the ControlTemplate but can't set the margin to the 2nd column.

# RiccioloCristian said on 08 April, 2009 03:27 PM

@smitha: it's an ItemsControl features. Read here msdn.microsoft.com/.../system.windows.controls.itemscontrol.itemssource.aspx You can bind any kind of source.

@Christian: it's a strange request :-)

However in the TreeGridViewRowPresenter the method ArrangeOverride arranges columns from left to right so right column covers the left column. You can use Panel.ZIndex on your UIElement and consider this property into the ArrangeOverride method ;-)

# KJ said on 18 April, 2009 07:57 AM

Hi,

It is really cool. but, how to bind a dataset to it.?

# RiccioloCristian said on 18 April, 2009 10:49 AM

Hi, read the before comment:

You can bind any kind of source.

msdn.microsoft.com/system.windows.controls.itemscontrol.itemssource.aspx

# Enrique said on 12 June, 2009 12:52 PM

how can i align the contents inside the cells of a column

# toto said on 17 June, 2009 05:19 PM

Hello, nice job. Thank you for the sample, it is much nicer than the one in the msdn... But I'm trying to improve the lisibilty of the listTreeView by alternating rows. I've tried to use this blogs.msdn.com/.../wpf-3-5-sp1-feature-alternating-rows.aspx

but it doesn't work well for a treeView with hyerarchical data, the index alternate diferently on each level, furthermore, expand/collapse nodes and the rows are no longer alternated correctly . Do you know a workaround?

# zhoujg said on 21 July, 2009 02:11 AM

how can i edit each item

# Bong said on 24 September, 2009 11:04 PM

Hi Cristian,

Is it possible to implement multiselection for same level items?

# Juergen said on 16 October, 2009 02:42 PM

hi christian,

hi guys,

could somebody post here this TreeListView with a working sorting?

thank you for the post and this great control!

greeting from germany,

juergen

# Vinyutimi said on 13 December, 2009 09:08 PM

What's up everyone, I'm modish to the forum and just wanted to impart hey. hi devotion manipulate to recollect unusual pepole and slice stuff with them

contain a contented year

# RiccioloCristian said on 31 December, 2009 05:15 AM

Hi guys,

the control works as any other selection control. For sorting, filtering and so on you have to work with CollectionView and automatically the data will change on the control.

The single selection is due to TreeView base class. To change this behavior, you have to override the IsSelectedProperty on TreeViewItem and not notify the control owner when a selection is done. Then, to get the selected items, you have to enumerate all items and read the IsSelected prperty

# RiccioloCristian said on 31 December, 2009 05:16 AM

Hi guys,

the control works as any other selection control. For sorting, filtering and so on you have to work with CollectionView and automatically the data will change on the control.

The single selection is due to TreeView base class. To change this behavior, you have to override the IsSelectedProperty on TreeViewItem and not notify the control owner when a selection is done. Then, to get the selected items, you have to enumerate all items and read the IsSelected property

# Kristof Verbiest said on 02 February, 2010 09:02 AM

Fantastic work! I tried several other TreeListViews before encountering this one, but this one seems to be the most feature-complete. I love the way that scrolling is implemented - the header always remains visible. Good job.

Leave a Comment

(required) 
(required) 
(optional)
(required) 

Search

Go

This Blog

Sponsors





advertise here

Syndication