Click here to Skip to main content
15,867,453 members
Articles / Desktop Programming / WPF
Article

TreeListView

Rate me:
Please Sign up or sign in to vote.
4.85/5 (23 votes)
6 Apr 2008CPOL1 min read 197.8K   9.8K   59   33
TreeView with multiple columns
treelistview.jpg

Introduction

This control is supposed to display hierarchical data in a TreeView while providing the possibility to append additional information to each item.

Background

I needed to present data in a hierarchical structure but it was required to display additional information for each item. At first, I appended all this information to the TreeNodeItem's text which was quite unclear for the user.

Using the Code

To use the multi column TreeView in your own application, declare the control in any of your windows or controls. TreeListView exposes all properties of ListView plus AllowsColumnReorder and Columns.

XML
<local:TreeListView AllowsColumnReorder="True">
    <local:TreeListView.Columns>
        ...
    </local:TreeListView.Columns>
    ...
</local:TreeListView>

Both properties correlate with the AllowsColumnReorder and Columns properties of GridView which is documented here.

Hierarchical Data Template

In order to provide the tree with a way to retrieve child nodes, you must either declare a HierarchicalDataTemplate or a DataTemplateSelector.

TreeListView is only going to use the ItemsSource property of the HierarchicalDataTemplate or DataTemplateSelector because all information is visualized in the same manner (in rows). Therefore, a declaration as follows is sufficient:

XML
<local:TreeListView.ItemTemplate>
    <HierarchicalDataTemplate ItemsSource="{Binding Children}"/>
</local:TreeListView.ItemTemplate>

Columns

It is vital to declare at least one column which the TreeListView is going to use to visualize the data. MSDN provides sufficient information about declaring GridViewColumns so I am not going to go into any details.

The only new thing about declaring GridViewColumns is that at least one column must contain a TreeListViewExpander which is a ToggleButton that can expand its row and indents all contents in its column.

XML
<GridViewColumn>
    <GridViewColumn.CellTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <!--The Expander Button (can be used in any column 
                (typically the first one))-->
                <local:TreeListViewExpander/>
                <!--The data to display in this column-->
                <TextBlock Text="{Binding}"/>
            </StackPanel>
        </DataTemplate>
    </GridViewColumn.CellTemplate>
</GridViewColumn>

And that's it!

Points of Interest

It would probably be a good idea to implement all features of GridView. Unfortunately I do not have the time to do that right now.

History

  • 6th April, 2008
    • First release
    • Fixed file download

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionChange IsExpanded Property of TreeListViewExpander Pin
Member 1404920011-Apr-19 3:28
Member 1404920011-Apr-19 3:28 
QuestionHow to bind TreeViewItem? Pin
FurqanSafdar13-Dec-16 23:17
professionalFurqanSafdar13-Dec-16 23:17 
QuestionCannot Turn on Virtualizing Pin
STRICQ6-Feb-16 13:46
STRICQ6-Feb-16 13:46 
QuestionDatabinding to 'IsSelected' and 'IsExpanded' properties of view model Pin
HollyVi8-Sep-13 6:08
HollyVi8-Sep-13 6:08 
AnswerRe: Databinding to 'IsSelected' and 'IsExpanded' properties of view model Pin
Hanvyj1-Aug-18 5:14
Hanvyj1-Aug-18 5:14 
QuestionKeyboard navigation and .NET 4.5 Pin
jenschrrh17-May-13 11:28
jenschrrh17-May-13 11:28 
AnswerRe: Keyboard navigation and .NET 4.5 Pin
jenschrrh17-May-13 12:40
jenschrrh17-May-13 12:40 
GeneralMy vote of 5 Pin
STRICQ12-May-13 9:41
STRICQ12-May-13 9:41 
QuestionFrozenColumnCount Pin
edmolko27-Nov-12 5:38
edmolko27-Nov-12 5:38 
QuestionHierarchicalDataTemplate Pin
Member 144952325-Jul-12 4:22
Member 144952325-Jul-12 4:22 
Questionhow binding with use entity framework Pin
urmcoder13-Dec-11 13:17
urmcoder13-Dec-11 13:17 
QuestionDifferent display for nodes in main (=first) column Pin
paolo appiani2-Sep-11 7:20
paolo appiani2-Sep-11 7:20 
QuestionFix Columns? Pin
klgott21-Mar-11 4:20
klgott21-Mar-11 4:20 
AnswerRe: Fix Columns? Pin
Zoot18-Jul-11 8:39
Zoot18-Jul-11 8:39 
GeneralRe: Fix Columns? Pin
edmolko27-Nov-12 1:45
edmolko27-Nov-12 1:45 
GeneralRe: Fix Columns? Pin
abhijeetsi14-Jul-15 2:22
abhijeetsi14-Jul-15 2:22 
GeneralRe: Fix Columns? Pin
ydude5-Dec-16 1:58
ydude5-Dec-16 1:58 
GeneralItemsSource binding to List<> [modified] Pin
msabatini9-Sep-10 22:08
msabatini9-Sep-10 22:08 
GeneralRe: ItemsSource binding to List Pin
msabatini12-Sep-10 22:42
msabatini12-Sep-10 22:42 
GeneralRe: ItemsSource binding to List Pin
msabatini12-Sep-10 23:45
msabatini12-Sep-10 23:45 
GeneralMy vote of 5 Pin
ilke can22-Jul-10 21:46
ilke can22-Jul-10 21:46 
Questionlazy loading? Pin
omid rezaei hanjani22-May-10 1:38
omid rezaei hanjani22-May-10 1:38 
QuestionSorting Pin
sannaroby19-May-10 22:23
sannaroby19-May-10 22:23 
AnswerRe: Sorting Pin
Moshe B12-Jan-12 23:57
Moshe B12-Jan-12 23:57 
QuestionDynamic Binding Pin
Carlos Gutierrez20-Mar-09 9:41
Carlos Gutierrez20-Mar-09 9:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.