Method of recursively adding depth into a tree grid view

Question

so right now I currently have a tree grid view that has up to 3 levels of expansion cause I manually wrote in a nested hierarchical data template within another data template, I'm wondering if there is a method to automatically add depth into my tree grid view whenever my collection is expanded in depth. My item source is also a nested observable collection with branches in them.

I'm looking for a way to recursively add levels instead of manually nesting them inside each other.

Thank you.

score 1 · Accepted Answer · answered May 13 '19 at 07:56

HierarchicalDataTemplate is supposed to do that for you. You only need to define it once in TreeView's DataTemplate.

I think we only need to bind HierachicalDataTemplate's ItemsSource into the nested property of your class and it will take care of the rest.

If I misunderstood something about your intention, please let me know.

Here's my attempt:

XAML

<TreeView ItemsSource="{Binding Branches}">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Branches}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBox Grid.Column="0" Text="{Binding Id}"></TextBox>
                <TextBox Grid.Column="1" Text="{Binding Name}"></TextBox>
            </Grid>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

A class with nested collection

public class Branch
{
    public string Id { get; set; }
    public string Name { get; set; }
    public ObservableCollection<Branch> Branches { get; set; }
}

Hard coded value in main form for testing purpose

public partial class MainWindow : Window
{
    public Branch Branch { get; set; }

    public MainWindow()
    {
        Branch = new Branch()
        {
            Id = "1",
            Name = "A",
            Branches = new ObservableCollection<Branch>()
            {
                new Branch()
                {
                    Id = "2",
                    Name = "B",
                    Branches = new ObservableCollection<Branch>()
                    {
                        new Branch()
                        {
                            Id = "3",
                            Name = "C",
                        },
                        new Branch()
                        {
                            Id = "3",
                            Name = "C",
                            Branches = new ObservableCollection<Branch>()
                            {
                                new Branch()
                                {
                                    Id = "3",
                                    Name = "C",
                                },
                                new Branch()
                                {
                                    Id = "3",
                                    Name = "C",
                                }
                            }
                        }
                    }
                },
                new Branch()
                {
                    Id = "2",
                    Name = "B",
                    Branches = new ObservableCollection<Branch>()
                    {
                        new Branch()
                        {
                            Id = "3",
                            Name = "C",
                        }
                    }
                }
            }
        };

        InitializeComponent();
        this.DataContext = this.Branch;
    }
}

Result

Thank you, I didn't expect it to be so simple! The problem now however is that my header does not expand along with the depth created, is there a way to pad a column to the size of all the branches of the first column of the grid? — Linsel, May 14 '19 at 00:47
My example was minimal in order to demonstrate `HierarchicalDataTemplate`. I didn't account for the complexity of adding a header to it. Please provide me a screenshot of a `TreeView` you need, I'll look into it later. — Nam Le, May 14 '19 at 01:59
Have a look at this [solution](http://blogs.microsoft.co.il/davids/2010/04/17/hierarchical-grid-with-wpf/). I tried it and it looks like it can resolve your issue. I'll get back to you with a complete example and explanation once I understand it. Good luck ! — Nam Le, May 14 '19 at 04:35

Method of recursively adding depth into a tree grid view

1 Answers1