{"id":551,"date":"2020-08-30T19:15:51","date_gmt":"2020-08-30T19:15:51","guid":{"rendered":"https:\/\/serkanseker.com\/?p=551"},"modified":"2021-02-23T07:55:35","modified_gmt":"2021-02-23T07:55:35","slug":"xamarin-forms-listview-grouping","status":"publish","type":"post","link":"https:\/\/serkanseker.com\/tr\/xamarin-forms-listview-grouping\/","title":{"rendered":"Xamarin.Forms ListView Grouping"},"content":{"rendered":"\n

Grouping <\/strong>sequential data to reduce data complexity after connecting data to ListView <\/strong>in mobile apps is a good solution. We often see this when enumerating saved contacts in phonebook and messaging applications. It may seem complicated to do this with existing Xamarin controls. Fortunately, it’s easy to do with the SfListView plugin.<\/p>\n\n\n\n

At the end of this article, you will be able to sort the data in the ListView alphabetically and group them by the first character of the ordered data. This time, I will use one of the most useful plugins<\/a>, Syncfusion.Xamarin.SfListView, not with Xamarin’s own controls. Also, in this sample project, I will apply the MVVM model<\/a> with Data Binding<\/a>.<\/p>\n\n\n\n

So, let\u2019s started. Follow the steps below in order.<\/p>\n\n\n\n

<\/p>

  1. Install Syncfusion.Xamarin.SfListView Plugin<\/a><\/strong>

    <\/p> <\/li>

  2. Launch the SfListView on Each Platform<\/a><\/strong>

    <\/p> <\/li>

  3. Implement MVVM Model<\/a><\/strong>

    1)Model Class<\/a>2)ViewModel Classes<\/a>3)Helpers Class4)Views Page<\/a><\/p> <\/li>

  4. Conclusion<\/a><\/strong>

    <\/p> <\/li><\/ol><\/div>\n\n\n\n

    Step 1 \u2013 Install Syncfusion.Xamarin.SfListView Plugin<\/h2>\n\n\n\n

    First, you need to install Syncfusion.Xamarin.SfListView<\/a> plugin in your Xamarin.Forms project. There are two ways to do this. You can find details in the How To Install and Manage NuGet Packages<\/a> article.<\/p>\n\n\n\n

    Type the following code into Package Manager Console and run it.<\/p>\n\n\n\n

    Install-Package Syncfusion.Xamarin.SfListView -Version 18.4.0.34<\/code><\/pre>\n\n\n\n
    Alternatively, you can install the plugin from NuGet Package Manager. First, right click on the project folder. Then click on Manage NuGet Packages for Solution option. Go to the Browse tab in the window that opens. Finally, type Syncfusion.Xamarin.SfListView in the Search bar and search. And install the plugin on all platforms.<\/p>\n\n\n\n
    \"Install
    Install Syncfusion.Xamarin.SfListView Plugin<\/figcaption><\/figure>\n\n\n\n
    If you use Syncfusion plugins in the project without Registration License, you will get a warning popup. To use this plugin without any warning messages, you must register with Syncfusion and obtain a Registration License. I explained how to register for Syncfusion and get License<\/a>.<\/p>\n\n\n\n
    Let me explain briefly as follows.<\/p>\n\n\n\n
    1. First create an account in Syncfusion.<\/li>
    2. Then get a Registration License for Xamarin.Forms apps.<\/li>
    3. Finally, add this license to the App()<\/strong> constructor method of App.xaml.cs<\/strong> class as follows.<\/li><\/ol>\n\n\n\n
      public App()\n{\n    Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR REGISTER LICENCE");\n    InitializeComponent();\n    MainPage = new ContentPage();\n}<\/code><\/pre>\n\n\n\n
      Step 2 \u2013 Launch the SfListView on Each Platform<\/h2>\n\n\n\n
      To use the SfListView plugin in Xamarin, you must launch it on a platform specific. So, after installing the plugin, you cannot use it directly.<\/p>\n\n\n\n
      Android<\/h2>\n\n\n\n
      Android platform does not require any additional configuration to render the progress bar.<\/p>\n\n\n\n
      iOS<\/h2>\n\n\n\n
      To launch the SfListView plugin on the iOS platform, go to the AppDelegate.cs class. Then call the Init() method inside the FinishedLaunching() method. As follows. Thus, every time the AppDelegate class launch, the SfListView plugin will also initialize.<\/p>\n\n\n\n
      using Syncfusion.XForms.iOS.EffectsView;\npublic override bool FinishedLaunching(UIApplication app, NSDictionary options)\n{\n    \u2026\n    global::Xamarin.Forms.Forms.Init ();\n    SfListViewRenderer.Init();\n    SfEffectsViewRenderer.Init();  \/\/Initialize only when effects view is added to Listview.\n    LoadApplication (new App ());\n    \u2026\n}<\/code><\/pre>\n\n\n\n
      Step 3 – Implement MVVM Model<\/h2>\n\n\n\n
      After installing and launching the SfListView plugin, let’s start implementing the MVVM model. Our motivation for this project is to sort and group people in a phonebook list alphabetically in ListView. Follow the steps below in order to reach the result.<\/p>\n\n\n\n
      Model Class<\/h2>\n\n\n\n
      When implementing the MVVM architecture, we first need to create a model class that is the template for the data. Add a folder named Models to the project and create a class named Contact.cs within that folder.<\/p>\n\n\n\n
          public class Contact\n    {\n        public string Name { get; set; }\n        public string Surname { get; set; }\n        public string Phone { get; set; }\n        public string Image { get; set; }\n    }<\/code><\/pre>\n\n\n\n
      Model class like this. Name, surname, phone and image variables are kept for each Contact.<\/p>\n\n\n\n
      ViewModel Classes<\/h2>\n\n\n\n
      In the MVVM architecture, the ViewModel class is created to bind the View and Model classes. For this, add a folder named ViewModels to the project.<\/p>\n\n\n\n
      BaseViewModel<\/h3>\n\n\n\n
      We need a base ViewModel class to control data changes. The BaseViewModel class is required to report changes to the Model class to the View. Create a class named BaseViewModel.cs inside the ViewModels folder. This will inherit from the INotifyPropertyChanged interface.<\/p>\n\n\n\n
      public class BaseViewModel : INotifyPropertyChanged\n{\n    public event PropertyChangedEventHandler PropertyChanged;\n    public void OnPropertyChanged([CallerMemberName] string name = "")\n    {\n        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));\n    }\n}<\/code><\/pre>\n\n\n\n
      ContactViewModel<\/h3>\n\n\n\n
      Add a class named ContactViewModel.cs to the ViewModels folder. This class will be the class to handle the data and will inherit the BaseViewModel.cs class.<\/p>\n\n\n\n
      public class ContactViewModel : BaseViewModel\n{\n    public ContactViewModel()\n    {\n        ContactList = GetContact();\n    }\n\n    private ObservableCollection<Contact> GetContact()\n    {\n        return new ObservableCollection<Contact>\n            {\n                new Contact {Name="Serkan", Surname="\u015eeker", Phone="000-000",Image="http:\/\/www.pngall.com\/wp-content\/uploads\/5\/Profile-PNG-File.png"},\n                new Contact {Name="Smith", Surname="Adams", Phone="000-000",Image="http:\/\/www.pngall.com\/wp-content\/uploads\/5\/Profile-PNG-File.png"},\n                new Contact {Name="Johnson", Surname="Mitchell", Phone="000-000", Image="http:\/\/www.pngall.com\/wp-content\/uploads\/5\/Profile-PNG-File.png"},\n                new Contact {Name="Williams", Surname="Turner", Phone="000-000", Image="http:\/\/www.pngall.com\/wp-content\/uploads\/5\/Profile-PNG-File.png"},\n                new Contact {Name="Brown", Surname="Reyes", Phone="000-000", Image="http:\/\/www.pngall.com\/wp-content\/uploads\/5\/Profile-PNG-File.png"},\n                new Contact {Name="Wilson", Surname="Reed", Phone="000-000", Image="http:\/\/www.pngall.com\/wp-content\/uploads\/5\/Profile-PNG-File.png"},\n                new Contact {Name="Anderson", Surname="Watson", Phone="000-000", Image="http:\/\/www.pngall.com\/wp-content\/uploads\/5\/Profile-PNG-File.png"},\n                new Contact {Name="Clark", Surname="\u015eeker", Phone="000-000", Image="http:\/\/www.pngall.com\/wp-content\/uploads\/5\/Profile-PNG-File.png"},\n                new Contact {Name="Ramirez", Surname="Mitchell", Phone="000-000", Image="http:\/\/www.pngall.com\/wp-content\/uploads\/5\/Profile-PNG-File.png"},\n                new Contact {Name="Lewis", Surname="Ruiz", Phone="000-000", Image="http:\/\/www.pngall.com\/wp-content\/uploads\/5\/Profile-PNG-File.png"},\n                new Contact {Name="Allen", Surname="Reyes", Phone="000-000",Image="http:\/\/www.pngall.com\/wp-content\/uploads\/5\/Profile-PNG-File.png"},\n                new Contact {Name="Wright", Surname="Ruiz", Phone="000-000", Image="http:\/\/www.pngall.com\/wp-content\/uploads\/5\/Profile-PNG-File.png"},\n                new Contact {Name="Torres", Surname="Watson", Phone="000-000", Image="http:\/\/www.pngall.com\/wp-content\/uploads\/5\/Profile-PNG-File.png"},\n                new Contact {Name="Hill", Surname="Reed", Phone="000-000", Image="http:\/\/www.pngall.com\/wp-content\/uploads\/5\/Profile-PNG-File.png"},\n                new Contact {Name="Adams", Surname="Turner", Phone="000-000", Image="http:\/\/www.pngall.com\/wp-content\/uploads\/5\/Profile-PNG-File.png"},\n\n            };\n    }\n\n    private ObservableCollection<Contact> contactList;\n    public ObservableCollection<Contact> ContactList\n    {\n        get { return contactList; }\n        set\n        {\n            contactList = value;\n            OnPropertyChanged();\n        }\n    }\n}<\/code><\/pre>\n\n\n\n
      Here, let’s create an ObservableCollection and manually enter the data to use when connecting the data to the ListView. There will be no database operation in this project.<\/p>\n\n\n\n
      Helpers Class<\/h2>\n\n\n\n
      Data does not come grouped directly in the ListView. We can do the grouping process with the method we wrote using the features of the SfListView plugin.<\/p>\n\n\n\n
      To keep such behavior classes together, add a folder named Helpers to the project and create a class named Behaviors.cs within that folder.<\/p>\n\n\n\n
      public class SfListViewGroupingBehavior : Behavior<Syncfusion.ListView.XForms.SfListView>\n{\n\n    #region Fields\n\n    private Syncfusion.ListView.XForms.SfListView ListView;\n\n    #endregion\n\n    #region Overrides\n    protected override void OnAttachedTo(Syncfusion.ListView.XForms.SfListView bindable)\n    {\n        ListView = bindable;\n        ListView.DataSource.GroupDescriptors.Add(new GroupDescriptor()\n        {\n            PropertyName = "Name",\n            KeySelector = (object obj1) =>\n            {\n                var item = (obj1 as Contact);\n                return item.Name[0].ToString();\n            },\n        });\n        base.OnAttachedTo(bindable);\n    }\n\n    protected override void OnDetachingFrom(Syncfusion.ListView.XForms.SfListView bindable)\n    {\n        ListView = null;\n        base.OnDetachingFrom(bindable);\n    }\n    #endregion\n\n}<\/code><\/pre>\n\n\n\n
      Notice that this class inherited the SfListView extension’s generic class named Behavior, and we override some methods of that class.<\/p>\n\n\n\n
      Views Page<\/h2>\n\n\n\n
      We have reached the top rung of MVVM architecture. Add a folder named Views to the project and create a ContentPage named ContactPage.xaml within that folder. This page is the page where the designs will be seen by the end user.<\/p>\n\n\n\n
      NOTE: Don’t forget to add the SfListView namespace to ContentPage.<\/p>\n\n\n\n
      xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" <\/code><\/pre>\n\n\n\n
      <ContentPage.BindingContext>\n    <local:ContactViewModel\/>\n<\/ContentPage.BindingContext>\n\n<ContentPage.Content>\n\n    <syncfusion:SfListView x:Name="listView" ItemsSource="{Binding ContactList}"\n                               ItemSize="100" \n\t\t\t\t\t   FocusBorderThickness="0"\n                       IsStickyGroupHeader="True"\n                       AllowGroupExpandCollapse="True" \n                       SelectionBackgroundColor="#d6e0f0"\n                             GroupHeaderSize="{OnPlatform Default=40, macOS=70}"  >\n\n        <syncfusion:SfListView.DataSource>\n\n            <data:DataSource>\n                <data:DataSource.SortDescriptors>\n                    <data:SortDescriptor PropertyName="Name" Direction="Ascending"\/>\n                <\/data:DataSource.SortDescriptors>\n            <\/data:DataSource>\n\n        <\/syncfusion:SfListView.DataSource>\n\n        <syncfusion:SfListView.GroupHeaderTemplate>\n            <DataTemplate>\n                <ViewCell>\n                    <ViewCell.View>\n                        <StackLayout Orientation="Horizontal" BackgroundColor="#E4E4E4">\n                            <Label Text="{Binding Key}" \n                         FontSize="22" \n                         FontAttributes="Bold"\n                         VerticalOptions="Center" \n                         HorizontalOptions="Start" \n                         Margin="20,0,0,0" \/>\n                        <\/StackLayout>\n                    <\/ViewCell.View>\n                <\/ViewCell>\n            <\/DataTemplate>\n        <\/syncfusion:SfListView.GroupHeaderTemplate>\n\n        <syncfusion:SfListView.Behaviors>\n            <local1:SfListViewGroupingBehavior\/>\n        <\/syncfusion:SfListView.Behaviors>\n\n        <syncfusion:SfListView.ItemTemplate>\n            <DataTemplate>\n                <Grid Padding="10">\n                    <Grid.RowDefinitions>\n                        <RowDefinition Height="0.4*" \/>\n                        <RowDefinition Height="0.6*" \/>\n                    <\/Grid.RowDefinitions>\n                    <Grid.ColumnDefinitions>\n                        <ColumnDefinition Width="Auto"\/>\n                        <ColumnDefinition Width="Auto"\/>\n                    <\/Grid.ColumnDefinitions>\n                    <Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Source="{Binding Image}"\/>\n                    <Label Grid.Row="0" Grid.Column="1" Text="{Binding Name}" FontAttributes="Bold" TextColor="Black" FontSize="21" \/>\n                    <Label Grid.Row="1" Grid.Column="1" Text="{Binding Phone}" TextColor="Black" FontSize="15"\/>\n                <\/Grid>\n            <\/DataTemplate>\n        <\/syncfusion:SfListView.ItemTemplate>\n\n    <\/syncfusion:SfListView>\n\n<\/ContentPage.Content><\/code><\/pre>\n\n\n\n
      And finally, change the MainPage property to the View class in the App.xaml.cs class.<\/p>\n\n\n\n
      public App()\n{\n    InitializeComponent();\n    MainPage = new ContactPage();\n}<\/code><\/pre>\n\n\n\n
      Conclusion<\/h2>\n\n\n\n
      Our application is ready. We have done the sorting and grouping operations. The contacts will appear as sorted and grouped in the ListView.<\/p>\n\n\n\n
      \"Xamarin.Forms
      Xamarin.Forms ListView Grouping Alphabetically<\/figcaption><\/figure><\/div>\n\n\n\n
      In this post, I explained how to how to group the data in ListView using the SfListView plugin in a Xamarin.Forms project. I hope it was useful.<\/p>\n\n\n\n
      If you\u2019re still not sure what to do, or if you got any errors, then I suggest you use the comment section below and let me know! I am here to help!<\/p>\n\n\n\n
      Also, share this blog post on social media and help more people learn.<\/strong><\/p>\n\n\n\n
      Related Links<\/h2>\n\n\n\n