Treeview with multiple columns

Question

I am trying to create a treeview in WPF with multiple columns. I am well aware, that there are really numerous questions regarding this subject. However they seem to take a different approach when binding the data. Everybody seems to set the itemssource, as where I fill the treeview.items in de code behind. That is also the reason I am not sure whether to use ItemTemplate / HierarchicalDataTemplate or the correct way to accomplish it. (I have the feeling that this should be an easy step.)

The code I have now is as follows:

Treeview in Mainwindow.xaml

<TreeView x:Name="ProcesTree" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <TreeView.ItemTemplate>
        <ItemContainerTemplate>
            <Grid>
                <TextBlock Text="{Binding procesNummer}" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="0"/>
                <TextBlock Text="{Binding procesNaam}" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="0"/>
            </Grid>
        </ItemContainerTemplate>
    </TreeView.ItemTemplate>
</TreeView>

Mainwindow.xaml.cs

public List<Proces> processen = new List<Proces>();

public MainWindow() {
    InitializeComponent();
    processen = Database.getHoofdProcessen();
    processen = Extensions.OrderByAlphaNumeric(processen, p => p.procesNummer);

    foreach (Proces p in processen) {
        writeProcesses(p, ProcesTree.Items);
    }
}


public void writeProcesses(Proces p, ItemCollection tv) {
    tv.Add(p);

    List<Proces> processen = Database.getProcessenOnNummer((p.procesNummer + ".%"));
    if (processen.Count != 0) {
        foreach (Proces pr in processen) {
                writeProcesses(pr, p.Items);
            }
    }
}

Proces class:

public class Proces : TreeViewItem {
    public Int64 procesId { get; set; }
    public String procesNummer { get; set; }
    public String procesNaam { get; set; }
    public String procesOmschrijvig { get; set; }
    public Boolean procesEinde { get; set; }
}

@Edit - To be clear, I now have a structure like the following image. The only thing that misses is the template? as how it should be shown: Treeview

If you need column headers/resizing/rearraging/sorting, then your question is more like this one. — Sinatr
– Sinatr, Commented Jun 11, 2015 at 10:03
Are not you missing an expander control in your item template as well — Ahmad
– Ahmad, Commented Jun 11, 2015 at 10:07
I do not want headers, resizing, sorting etc. I just want multiple columns, for every property of my proces class, one column. — Revils
– Revils, Commented Jun 11, 2015 at 10:10

Revils · Accepted Answer · 2015-06-25 07:17:12Z

I have stumbled upon an easy way to accomplish what I was trying. Without using third-party controls or very complex templates. Thanks to the following link: http://www.codemag.com/Article/1401031

Since I had a really hard time finding anything usefull on this, I decided to post an answer myself, so others can also make use of it.

Treeview code with template:

<TreeView BorderThickness="0" ItemsSource="{Binding processes}">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding subProcesses}" >
            <Grid>

                //Number of columns
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="2*"/>
                </Grid.ColumnDefinitions>

                //Controls to use in the treeview grid
                <TextBlock Text="{Binding procesId}" Grid.Column="0"/>
                <TextBlock Text="{Binding procesName}" Grid.Column="1"/>

            </Grid>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

List to bind to the treeview (Every time you will give the Proces a list of subProcesses it will generate an additional level in the treeview):

List<Proces> processes;

Proces class:

public class Proces {
    public Int64 procesId { get; set; }
    public String procesName { get; set; }
    public List<Proces> subProcesses { get; set; }
}

Ahmad · Accepted Answer · 2015-06-11 10:24:34Z

1

Have a look at this 3rd party control (basically it emulates the function of a TreeView using ListView and it should be faster than TreeView control) which should satisfy your requirements :

http://www.codeproject.com/Articles/30721/WPF-TreeListView-Control

Alternatively, the following code ( illustrates how to edit a TreeViewItem to support columns) by Microsoft could be modified to your needs https://msdn.microsoft.com/en-us/library/vstudio/ms771523%28v=vs.90%29.aspx

It has to be noted that both projects do not support data virtualization.

answered Jun 11, 2015 at 10:24

Ahmad

1,53415 silver badges23 bronze badges

2 Comments

Revils Over a year ago

I have seen both project already, but I want to accomplish it with a grid in some kind of template. I do not want to over-complicate it,..

AgostinoX Over a year ago

Unfortunately the microsoft link for downloading the project in the microsoft page is broken.

Collectives™ on Stack Overflow

Treeview with multiple columns

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related