Xamarin.Forms: Grouping Enabled ListView
With this quick tutorial, learn how to build ListViews with a grouping option enabled in Xamarin.Forms for mobile app development.
Join the DZone community and get the full member experience.
Join For FreeIt 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.
Opinions expressed by DZone contributors are their own.
Trending
-
RAML vs. OAS: Which Is the Best API Specification for Your Project?
-
Build a Simple Chat Server With gRPC in .Net Core
-
Microservices With Apache Camel and Quarkus
-
AI Technology Is Drastically Disrupting the Background Screening Industry
Comments