Xamarin.Forms: Grouping Enabled ListView

It is an easy issue to build ListViews whose grouping option is enabled with Xamarin.Forms. We should have some simple structures to define:

•  Let our simple bean, which is going to be listed, be SingleBean:

public class SingleBean 
{
public string Field1 { get; set; }
  public string Field2 { get; set; }
  public string Field3 { get; set; }
}

•  Then we should have a list of SingleBean which is a list, but with a heading field:

public class SingleBeanGroup : List<SingleBean>
{
  public string Heading { get; set; }

  public SingleBeanGroup(List<SingleBean> list)
  {
    this.AddRange(list);
  }
}

• Our view-model will basically look like this:

class ViewModel : INotifyPropertyChanged
{

  ObservableCollection<SingleBeanGroup> singleBeanGroup = new ObservableCollection<SingleBeanGroup>();

  public ObservableCollection<SingleBeanGroup> SingleBeanGroup
        {
            set
            {
                if (singleBeanGroup != value)
                {
                    singleBeanGroup = value;

                    if (PropertyChanged != null)
                    {
                        PropertyChanged(this, new PropertyChangedEventArgs("SingleBeanGroup"));
                    }
                }
            }
            get
            {
                return singleBeanGroup;
            }
        }

  public event PropertyChangedEventHandler PropertyChanged;
}

• In our XAML, we will do the bindings like this:

<ListView  x:Name="SingleBeanView" 
                    ItemsSource="{Binding SingleBeanGroup}" 
                    IsGroupingEnabled="true"
                    Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
            <ListView.GroupHeaderTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout BackgroundColor="#eee" Orientation="Vertical">
                            <StackLayout Orientation="Horizontal">
                                <Label Text="{Binding Heading}" />
                            </StackLayout>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.GroupHeaderTemplate>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout BackgroundColor="#eee" Orientation="Vertical">
                            <StackLayout Orientation="Horizontal">
                                <Label Text="{Binding Field1}"/>
                                <Label Text="{Binding Field2}"/>
                                <Label Text="{Binding Field3}"/>
                            </StackLayout>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

• The construction of the group is simple:

ObservableCollection<SingleBeanGroup> cBeanList = new ObservableCollection<SingleBeanGroup>();

List<SingleBean> list1 = new List<SingleBean>
{
  new SingleBean(){Field1 = "1", Field2 = "2", Field3 = "3"},
  new SingleBean(){Field1 = "1", Field2 = "2", Field3 = "3"},
  new SingleBean(){Field1 = "1", Field2 = "2", Field3 = "3"}
};
SingleBeanGroup cBean = new SingleBeanGroup(list1);
cBean.Heading = "My List 1";
cBeanList.Add(cBean);  

List<SingleBean> list2 = new List<SingleBean>
{
  new SingleBean(){Field1 = "1", Field2 = "2", Field3 = "3"},
  new SingleBean(){Field1 = "1", Field2 = "2", Field3 = "3"},
  new SingleBean(){Field1 = "1", Field2 = "2", Field3 = "3"}
};
SingleBeanGroup cBean2 = new SingleBeanGroup(list2);
cBean2.Heading = "My List 2";
cBeanList.Add(cBean2);

viewModel.SingleBeanGroup = cBeanList;  

After all, we will have a grouping enabled ListView with headings:

As a result, we see that by making some small changes in our view model and XAML file, we are able to have a grouping enabled ListView.