android - Xamarin Listview grouping

Question

I am dealing with a listview in xamarin.froms. I can easily populate the listview with a listitem for each record:

[
    {"cat":1, "name":"alpha"},
    {"cat":1, "name":"beta"},
    {"cat":1, "name":"gamma"},
    {"cat":2, "name":"john"},
    {"cat":2, "name":"william"},
    {"cat":2, "name":"smith"},
    {"cat":2, "name":"steve"},
    {"cat":3, "name":"abc"},
    {"cat":3, "name":"xyz"}
]

//9 Items in listview from this json source

But what I want is to group all the items on some key value, say "cat" here and achieve something like this:

Any suggestion or approach toward this would be appreciated.

Answer 1

Group your data into collections and add those collections into your ListView. The collections need to be your own class with a property for binding the group with.

Here's a walkthrough:

Set up grouping on your ListView including a property to bind each group to, in this case "GroupKey"

    myListView.IsGroupingEnabled = true;
    myListView.GroupDisplayBinding = new Binding("GroupKey"); // See below

And then add your data in groups (e.g. lists of lists). This often means you need to create your own class to show your groupings, such as:

    public class Grouping<K, T> : ObservableCollection<T>
    {
        // NB: This is the GroupDisplayBinding above for displaying the header
        public K GroupKey { get; private set; } 

        public Grouping(K key, IEnumerable<T> items)ac
        {
            GroupKey = key;
            foreach (var item in items)
                this.Items.Add(item);
        }
    }

And finally, add your data in groups:

    var groups = new ObservableCollection<Grouping<string, MyDataClass>>();

    // You can just pass a set of data in (where "GroupA" is an enumerable set)
    groups.Add(new Grouping<string, MyDataClass>("GroupA", GroupA)); 

    // Or filter down a set of data
    groups.Add(new Grouping<string, MyDataClass>("GroupB", 
        MyItems.Where(a => a.SomeFilter())));

    myListView.ItemSource = groups;

Bind your cell to the MyDataClass as you would have before:

    var cell = new DataTemplate(typeof(TextCell));
    cell.SetBinding(TextCell.TextProperty, "SomePropertyFromMyDataClass");
    cell.SetBinding(TextCell.DetailProperty, "OtherPropertyFromMyDataClass");
    myListView.ItemTemplate = cell;

Check it out for explanation on why to use template K instead of a string in the Grouping class, how to customise the header look, and much more:
http://motzcod.es/post/94643411707/enhancing-xamarinforms-listview-with-grouping

(Credit to the link in @pnavk's answer)