ListView Header remains visible after switching IsGroupingEnabled to false

Question

ListView Header remains visible after switching IsGroupingEnabled to false

Hrcak94 5

Hi,

I've ported Xamarin Forms application to .NET 7.0 and I keep encountering various issues with basic functionality that worked as expected in Xamarin Forms.

Right now I'm targeting Android API 30 with my .NET 7.0 MAUI app.

The issue :
I have a ListView with items and no headers.
If user taps a button I group entries and show them with Headers in the Listview by switching IsGroupingEnabled to true.

Listview has GroupHeaderTemplate set as such :

 <ListView.GroupHeaderTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Label
                                FontFamily="NubbuBold"
                                FontSize="Large"
                                HorizontalOptions="Center"
                                Text="{Binding HeaderPrice}"
                                TextColor="Purple"
                                VerticalOptions="Center" />
                        </ViewCell>
                    </DataTemplate>
                </ListView.GroupHeaderTemplate>

From code behind that disabled the grouping :

  if (isGroupingByStatus)
        {
            Calculate.BackgroundColor = Color.FromArgb("#437c17");
            MainListView.IsGroupingEnabled = false;
            isGroupingByStatus = false;
            MainListView.ItemsSource = null;
            MainListView.ItemsSource = ((ViewInventureItemsVM)BindingContext)._Inventures[0].InventoryItems;
            return;
        }

This code works in Xamarin Forms and my list is grouped as expected.
In MAUI when I disable Grouping on ListView, the header columns remain visible with no data in them.

I have tried to set GroupHeader template to null, as well as doing it before setting new item source to the list, it didn't help
I have tried to set ItemSource to null prior to disabling grouping, it didn't help.

I hope that I'm doing something wrong, and that this is not one of the dozens of issues with MAUI that I've run into while porting my application to the point of me just giving up on porting. My app is ported 99% to MAUI from new project and I keep running into issues with basic functionality.

Thanks.

Hrcak94 5 Reputation points

2023-07-06T20:51:06.8866667+00:00

By debugging further, I've come to realization that the ListView disables the headers, however items from the list are invisible. If I interact with Selection Changed Event and tap on empty header, I actually get back the data that should be there. It's just not visible and SwipeView is not working within that view cell.

So it appears that in places where there were headers, list gets populated but doesn't render anything on that entry.
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2023-07-07T07:59:07.1566667+00:00

I tested IsGroupingEnabled on Android 10-13 using the official ListView sample GroupingPage, and the property worked as expected.

For further investigation, could you provide detailed steps on how to reproduce this issue?

Maui has officially launched a new version of the migration tool, Announcing a new version of the .NET Upgrade Assistant with support for .NET MAUI and Azure Functions!, have you tried to use this tool for migration?
Hrcak94 5 Reputation points

2023-07-07T09:25:01.46+00:00

Hi, please take a look at this report. I've attached repro repo https://github.com/dotnet/maui/issues/16031im at work at the moment. I'll check the sample later tonight and see if I can find anything obvious as issue on my end. P.S. I didn't use migration tool to migrate. Instead I built a new maui app. Net 7 project and moved the code step by step, adjusting along the way according to errors and documentation. That's why I believe I oversaw something.

Hrcak94 5

Yonglun Liu, thanks, I've got the chance to look up the sample you've provided. I can reproduce my issue. Can you please try?

Using the GroupingPage.xaml in the provided sample, do the following :
Create a button and a clicked event.
In the clicked event :

MainList.IsGroupingEnabled = false;
		MainList.ItemsSource = ((GroupedAnimalsViewModel)BindingContext).AnimalsSource;

In the GroupedAnimalsViewModel do the following :

public List<Animal> AnimalsSource { get; set; } = new List<Animal>();         

public GroupedAnimalsViewModel(bool emptyGroups = false) 
{           
  includeEmptyGroups = emptyGroups;                  	CreateAnimalsCollection();
 foreach (var grp in Animals)
 { 
    foreach (var animal in grp) 
    {                    
      AnimalsSource.Add(animal);                
    }            
 }         
}

When you click the button, you should see the "empty" rows :
Screenshot_4

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2023-07-10T07:06:06.0966667+00:00
Thank you for your feedback.

With the code you provided, I reproduced this problem using ListView in MAUI.

It automatically disappears when the slider slides to an empty line, so this should be a refresh issue for internal views in ListVIew.

I did the same test with CollectionView, where ungrouping worked as expected.

You could refer to Display grouped data in a CollectionView to use the grouping feature in CollectionView in MAUI.

After that, you could add the following code into the click event to ungroup.

MainList.IsGrouped = false; MainList.ItemsSource = ((GroupedAnimalsViewModel)BindingContext).AnimalsSource;
Hrcak94 5 Reputation points

2023-07-10T14:50:39.0266667+00:00
Sadly, I switched to ListView because I had issues with CollectionView in the first place and I couldn't find a workaround. It was related to the SwipeView staying open in the CollectionView and then recycling Open state until it disappears and crashes the application. ListView fixed this behavior but introduced issue with grouping.

At this point I'm considering one of the following workarounds for my issue :

To have 3 listviews for each of my grouped types (Not Grouped, Grouped by Price, Grouped by status) and then show/hide each list based on user tap, in hopes that it won't affect performance much. But this feels very dirty and I hate the thought of writing the code for each source when user edits the data, to update the data in all views.

To look up into data template selectors and see if I that perhaps somehow avoids the issue

To simply have the original "ungrouped" list appear as grouped and then give generic title to the column... This so far seems the prettiest way to solve this, at expense of adding a bloated header for a list that shouldn't be there. Small expense of user experience.

Your answer

Hrcak94 5 Reputation points

2023-07-06T20:51:06.8866667+00:00

By debugging further, I've come to realization that the ListView disables the headers, however items from the list are invisible. If I interact with Selection Changed Event and tap on empty header, I actually get back the data that should be there. It's just not visible and SwipeView is not working within that view cell.

So it appears that in places where there were headers, list gets populated but doesn't render anything on that entry.
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2023-07-07T07:59:07.1566667+00:00

I tested IsGroupingEnabled on Android 10-13 using the official ListView sample GroupingPage, and the property worked as expected.

For further investigation, could you provide detailed steps on how to reproduce this issue?

Maui has officially launched a new version of the migration tool, Announcing a new version of the .NET Upgrade Assistant with support for .NET MAUI and Azure Functions!, have you tried to use this tool for migration?
Hrcak94 5 Reputation points

2023-07-07T09:25:01.46+00:00

Hi, please take a look at this report. I've attached repro repo https://github.com/dotnet/maui/issues/16031im at work at the moment. I'll check the sample later tonight and see if I can find anything obvious as issue on my end. P.S. I didn't use migration tool to migrate. Instead I built a new maui app. Net 7 project and moved the code step by step, adjusting along the way according to errors and documentation. That's why I believe I oversaw something.
Hrcak94 5 Reputation points

2023-07-07T20:17:30.06+00:00

Yonglun Liu, thanks, I've got the chance to look up the sample you've provided. I can reproduce my issue. Can you please try?

Using the GroupingPage.xaml in the provided sample, do the following :
Create a button and a clicked event.
In the clicked event :

MainList.IsGroupingEnabled = false; MainList.ItemsSource = ((GroupedAnimalsViewModel)BindingContext).AnimalsSource;

In the GroupedAnimalsViewModel do the following :

public List<Animal> AnimalsSource { get; set; } = new List<Animal>(); public GroupedAnimalsViewModel(bool emptyGroups = false) { includeEmptyGroups = emptyGroups; CreateAnimalsCollection(); foreach (var grp in Animals) { foreach (var animal in grp) { AnimalsSource.Add(animal); } } }

When you click the button, you should see the "empty" rows :
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2023-07-10T07:06:06.0966667+00:00

Thank you for your feedback.

With the code you provided, I reproduced this problem using ListView in MAUI.

It automatically disappears when the slider slides to an empty line, so this should be a refresh issue for internal views in ListVIew.

I did the same test with CollectionView, where ungrouping worked as expected.

You could refer to Display grouped data in a CollectionView to use the grouping feature in CollectionView in MAUI.

After that, you could add the following code into the click event to ungroup.

MainList.IsGrouped = false; MainList.ItemsSource = ((GroupedAnimalsViewModel)BindingContext).AnimalsSource;
Hrcak94 5 Reputation points

2023-07-10T14:50:39.0266667+00:00

Sadly, I switched to ListView because I had issues with CollectionView in the first place and I couldn't find a workaround. It was related to the SwipeView staying open in the CollectionView and then recycling Open state until it disappears and crashes the application. ListView fixed this behavior but introduced issue with grouping.

At this point I'm considering one of the following workarounds for my issue :

To have 3 listviews for each of my grouped types (Not Grouped, Grouped by Price, Grouped by status) and then show/hide each list based on user tap, in hopes that it won't affect performance much. But this feels very dirty and I hate the thought of writing the code for each source when user edits the data, to update the data in all views.

To look up into data template selectors and see if I that perhaps somehow avoids the issue

To simply have the original "ungrouped" list appear as grouped and then give generic title to the column... This so far seems the prettiest way to solve this, at expense of adding a bloated header for a list that shouldn't be there. Small expense of user experience.

Share via

ListView Header remains visible after switching IsGroupingEnabled to false

Your answer