How to disable grouping on already grouped ListView

Question

I have a ListView which is in grouped format.

For plain ListView:-

Public Class ShortItems
 {
    public string ItemName {get;set;}
    public string ItemLocation {get;set;}
    public string ItemDescription {get;set;}
    public string ItemIcon {get;set;} 
 }

For grouped ListView:-

Public Class ShortItemGroup: List<ShortItems>
{
  public string HeaderTitle {get;set;}

  public ShortItemsGroup(string title)
  {
    HeaderTitle = title;
  }
}

My ListView is properly displayed in grouped format. The criteria to group is location

What I am trying to do is to ungroup an already grouped ListView.

I have a button that gives the user choice about how he wants the list to be displayed, grouped, or plain.

By default the ListView style is grouped, if the user wants to change that, he can click on the button and ListView should display in plain or ungrouped format.

Any idea how can this be done?

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

A simple method is to reset the ItemsSource of this listview and set property IsGroupingEnabled of ListView to false when clicking the reset Button.
You can refer to the following code from my demo:

GroupingListViewSamplePage.xaml.cs

  public partial class GroupingListViewSamplePage : ContentPage  
    {  
  
        public ObservableCollection<ShortItemGroup> ItemsList { get; set; } = new ObservableCollection<ShortItemGroup>();  
        public ObservableCollection<ShortItems> Items { get; set; } = new ObservableCollection<ShortItems>();  
  
  
        ShortItemGroup group1;  
        ShortItemGroup group2;  
        ShortItemGroup group3;  
  
        public GroupingListViewSamplePage()  
        {  
            InitializeComponent();  
  
            group1 = new ShortItemGroup("Apple", new[]{ new ShortItems  
                {  
                    ItemName = "iPhone 6s",  
                    ItemLocation = "ItemLocation1"  
                },  
                new ShortItems  
                {  
                    ItemName = "iPhone 7",  
                    ItemLocation = "ItemLocation2"  
                }});  
            ItemsList.Add(group1);  
  
            group2 = new ShortItemGroup("Huawei", new[]{ new ShortItems  
                {  
                    ItemName = "Huawei P10",  
                    ItemLocation = "ItemLocation3"  
                },  
                new ShortItems  
                {  
                    ItemName = "Huawei Mate 8",  
                    ItemLocation = "ItemLocation4"  
                }});  
            ItemsList.Add(group2);  
  
            group3 = new ShortItemGroup("Samsung", new[]{ new ShortItems  
                {  
                    ItemName = "Galaxy S8",  
                    ItemLocation = "ItemLocation5"  
                },  
                new ShortItems  
                {  
                    ItemName = "Galaxy S7 Edge",  
                    ItemLocation = "ItemLocation6"  
                }});  
  
            ItemsList.Add(group3);  
  
            mListview.ItemsSource = ItemsList;  
        }  
  
        private void Button_Clicked(object sender, System.EventArgs e)  
        {  
            foreach (ShortItems phone in group1) {  
                Items.Add(phone);  
            }  
            foreach (ShortItems phone in group2)  
            {  
                Items.Add(phone);  
            }  
            foreach (ShortItems phone in group3)  
            {  
                Items.Add(phone);  
            }  
            mListview.IsGroupingEnabled = false;  
            mListview.ItemsSource = Items;  
        }  
    }  

GroupingListViewSamplePage.xaml

<StackLayout Orientation="Vertical" x:Name="stacklayout">  

    <Button Text="reset" Clicked="Button_Clicked" ></Button>  
    <ListView x:Name="mListview"  IsGroupingEnabled="True" GroupDisplayBinding="{Binding HeaderTitle}">  
    <ListView.ItemTemplate>  
        <DataTemplate>  
                <TextCell Text="{Binding ItemName}" />  
        </DataTemplate>  
    </ListView.ItemTemplate>  
  </ListView>  
      
</StackLayout>  

ShortItems.cs

public class ShortItems  
{  
    public string ItemName { get; set; }  
    public string ItemLocation { get; set; }  
    public string ItemDescription { get; set; }  
    public string ItemIcon { get; set; }  
    public int Price { get; internal set; }  
}  

ShortItemGroup.cs

public class ShortItemGroup: List<ShortItems>  
{  
    public string HeaderTitle { get; set; }  

    public ShortItemGroup(string title):base()  
    {  
        HeaderTitle = title;  
    }  

    public ShortItemGroup(string title, IEnumerable<ShortItems> source): base(source)  
    {  
        HeaderTitle = title;  
    }  
}  

The result is:

Best Regards,

Jessie Zhang

---
If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.