C# Xamarin Forms Listview set BindingContext to nested List

Question

I have a classic ListView in a Xamarin Form and I am trying to bind it's content. I come from UWP where we use CollectionViewSource and here things are a bit different.

XAML

<StackLayout>
        <ListView x:Name="listView" 
                ItemsSource="{Binding Monkeys}" 
                Header="{Binding Intro}"
                Footer="{Binding Summary}">
            <ListView.HeaderTemplate >
                <DataTemplate>
                    <StackLayout Orientation="Horizontal" 
                        Padding="10,5,5,10"
                        BackgroundColor="Yellow">
                        <Label Text="~~"/>
                        <Label Text="{Binding .}"/>
                        <Label Text="~~"/>
                    </StackLayout>
                </DataTemplate>
            </ListView.HeaderTemplate>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Name}" Detail="{Binding Description}"></TextCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

Background code

var results = new List<Matches> {
                new Matches {Name="Xander", Description="Writer"},
                new Matches {Name="Rupert", Description="Engineer"},
                new Matches {Name="Tammy", Description="Designer"},
                new Matches {Name="Blue", Description="Speaker"},
            };
            var header = new List<Titles> { new Titles { Monkeys = results, Intro = "This is a big header", Summary = "This is the end" } };
            header.Add(new Titles { Monkeys = results, Intro = "Shift", Summary = "Yeah" } );
            //BindingContext = header;
            BindingContext = new Titles { Monkeys = results, Intro = "This is a big header", Summary = "This is the end"};

class Matches
    {
        public string Name { get; set; }
        public string Description { get; set; }
    }
    class Titles
    {
        public List<Matches> Monkeys { get; set; }
        public string Intro { get; set; }
        public string Summary { get; set; }
    }

As you see on the line commented out, it doesn't bind the List, hence commented out :) Any idea if it is possible to bind it's content with nested list with multiple headers and items? What am I doing wrong here?

Answer 1

According to your data, I think you shoud to display a group data list. You can try the following code:

class Matches

public class Matches
{
    public string Name { get; set; }
    public string Description { get; set; }
}

class Titles

public class Titles : ObservableCollection<Matches>
{
    //public List<Matches> Monkeys { get; set; }
    public string Intro { get; set; }
    public string Summary { get; set; }

    public Titles(List<Matches> list):base(list)
    {
    }
}

class MainPage

public partial class MainPage : ContentPage
{
    public ObservableCollection<Titles> sortedItems { get; set; }

    public ObservableCollection<Matches> items { get; set; }

    public MainPage()
    {
        InitializeComponent();
        listView.ItemsSource = getData();
    }


    public List<Titles> getData() {

        items = new ObservableCollection<Matches> {
            new Matches {Name="Xander", Description="Writer"},
            new Matches {Name="Rupert", Description="Engineer"},
            new Matches {Name="Tammy", Description="Designer"},
            new Matches {Name="Blue", Description="Speaker"},
        };


        List<Titles> sortedItems = new List<Titles>() {
            new Titles(items.ToList()){ Intro = "This is a big header", Summary = "This is the end" },
            new Titles(items.ToList()){ Intro = "Shift", Summary = "Yeah" },
            new Titles(items.ToList()){ Intro = "This is a big header", Summary = "This is the end" },
        };

        return sortedItems;
    }
}

MainPage.xaml

   <StackLayout>
    <ListView
            HasUnevenRows="True"
            x:Name="listView" 
            IsGroupingEnabled = "True">
        <ListView.GroupHeaderTemplate >
            <DataTemplate>
                <ViewCell Height="40">
                    <StackLayout Orientation="Horizontal"
                             BackgroundColor="#3498DB"
                             VerticalOptions="FillAndExpand">
                        <Label Text="{Binding Intro}"
                           VerticalOptions="Center" />
                        <Label Text="   "/>
                        <Label Text="{Binding Summary}"
                           VerticalOptions="Center" />

                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.GroupHeaderTemplate>

        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell Text="{Binding Name}" Detail="{Binding Description}"></TextCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

The effect is as follows:

Note:

According to my understanding, you want to display these two fields in the position of each group List, right? Then ListView.GroupHeaderTemplate will meet our need.And you can custom the layout of ListView.GroupHeaderTemplate as you want,so you can show the Intro and Summary at the same time.