C# Windows 10 UWP Nested Listviews with Databinding

Question

I have a app that retrieves comments from a website. I can programmatically add them to a StackPanel, calulating their indentation for comment replies but I'd like to learn how to bind a list of comments to a ListView and have it display correctly there.

My Comment Class looks like this:

    class Comment 
    {
        public List<Comment> Replies { get; set; }
        public string Body { get; }
        public int Level { get; set; }

        public Comment(string BodyText) 
        {
            Body = BodyText;
        }

        public Comment(string BodyText, List<Comment> replies, int level) 
        {
            Body = BodyText;
            Replies = replies;
            Level = level;
        }
    }

So each Comment can have a List<> of comments (replies) to it and the Level variable indicates the depth of the comment.

What would be the process to set up a ListView so that I can bind a list of comments to it and those comments replies to those and so on? Or is there a better way to do this?

Thank you.

This is how I currently have it implemented which is visually correct but I'd like to use data binding rather than doing it through code.

Answer 1

Create a ListView, bind it's ItemsSource property to the list of top level comments. Use an ItemTemplate that contains the comment and another ListView in a vertical StackPanel. That inner ListView needs to get the same ItemTemplate it is in. I'm not sure if {StaticResource} will handle that, but it should.

If you use ObservableCollections this will actually be dynamic.

Answer 2

I recommend you to use the third party package WinRTXamlToolkit . Which contains a TreeView control that can meet your hierarchy requirements well. You can just bind the comments collection to the TreeView control code behind. Code example as follows:

Xaml Code

 <controls:TreeView   Width="400"   MaxHeight="400" x:Name="Treeviewcomment">
     <controls:TreeView.ItemTemplate>
         <DataTemplate>
             <TextBlock Text="{Binding Body}"/>
             <data:DataTemplateExtensions.Hierarchy>
                 <data:HierarchicalDataTemplate ItemsSource="{Binding Replies}" />
             </data:DataTemplateExtensions.Hierarchy>
         </DataTemplate>
     </controls:TreeView.ItemTemplate>
 </controls:TreeView>

Binding code

this.InitializeComponent();
ObservableCollection<Comment> comments = new ObservableCollection<Comment>
{
    new Comment ("By the way,I have noticed that ..."),
    new Comment("Has this been metioned anywhere before..",
    new List<Comment>
    {
        new Comment("Delta upgrade..."),
        new Comment("When only stuff that...",
            new List<Comment> {
                new Comment("That's blloby...")},
            3)},
    2),
    new Comment("Just had to turn off..")
};

And the result:

Special nuget package for uwp: WinRT XAML Toolkit . And I also upload the above code example to GitHub.