DZone
Mobile Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Mobile Zone > Xamarin.Forms: Grouping Enabled ListView

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.

Ayberk Cansever user avatar by
Ayberk Cansever
·
May. 23, 17 · Mobile Zone · Tutorial
Like (3)
Save
Tweet
12.50K Views

Join the DZone community and get the full member experience.

Join For Free

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:

Grouping Enabled ListView

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.

xamarin.forms

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Is Your Code DRY or WET?
  • Writing Beautiful, Optimized, and Better .NET Code With NDepend Static Analysis
  • Is DataOps the Future of the Modern Data Stack?
  • Getting Started With RSocket Kotlin

Comments

Mobile Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo