Grouping a ListView – Xamarin.Forms

In many cases when you want a list of items you want to group them in the list. To use groups in a ListView with Xamarin.Forms is very easy.

Below are screenshots from Android, iOS and Windows Phone where there is no HeaderTemplate used.
android_groups ios_groups wp_groups

First step is to create a group class that inherits from ObservableCollection and create two properties, one for title and one for short title.

public class ListViewModel
     ObservableCollection Groups {get; set;}

public class MyListViewGroup : ObservableCollection
     public string Title {get; set;}
     public string ShortTitle {get; set;}

public class MyListViewItem
     public string Name {get; set;}

IsGroupingEnabled is the keyword to enable grouping for the ListView, if it's value is true the ListView will be grouped.

GroupTitle is the group title.

GroupShortTitle is the value that will be shown when you tap a group title in Windows Phone and the value at the left side on iOS. Android will not use GroupShortTitle. It will be used to jump a specific group.

To style the header use the GroupHeaderTemplate property.


  2/18/2015 - 2:17 PM