Open daniel-c opened 8 months ago
Collection view appears to be completely broken on iOS in .NET 8 and the latest .NET 7 SR. In additional to the bug listed in this issue, scrolling performance is very bad and memory usage goes through the roof when scrolling the collection view. It almost seems like views are not getting recycled and are being recreated. This used to work fine in .NET 7 before the latest service release.
It baffles me to see what's going on with MAUI. Why is it so hard to get basic controls working without issues?
This is related to #16877.
Can someone take a look at this issue for the .NET 8 release?
I just tested this on an iPhone 12 Pro running iOS 16.7.1 and did not notice the problem. The problem occurs for me on an iPhone 15 Pro running iOS 17.0.3. Based on that, I don't think this is a regression in the collection view. I think this is caused by some change in iOS 17.
Verified this on Visual Studio Enterprise 17.9.0 Preview 1(8.0.3). Repro on iOS 17.0 and MacCatalyst, not repro on Android 14.0-API34 with below Project: MauiGroupedCollectionTest.zip
On Windows: Run failed with below exception. The value "TestCollectionView.ViewModels.AnimalGroup" is not of type "TestCollectionView.ViewModels.Animal" and cannot be used in this generic collection. (Parameter 'value')
My workaround is to reinitialize a new CollectionView each time the underlying data changes, rather than relying on a single CollectionView with a dynamically changing ItemSource. It works well on Android to change the ItemsSource, but for some reason on iOS it doesn't play nice with changing groups.
I'm seeing duplicate groups when the CollectionView goes from having 2 groups down to 1 group. Its only a problem on iOS. Not seeing problems when there is only ever 1 group.
My setup is...
Here's a screenshot with black boxes as an example. In the 2nd screenshot it should only be displaying the "Older" group but for some reason it displays that group twice and the 2nd group has an empty slot.
The issue dissapeared for me when i set the HeightRequest on the root element in the ItemTemplate and the GroupHeaderTemplate
I am also facing the same issue. We have a large enterprise application in Xamarin Forms. We planned to migrate it to MAUI in Q1-24. But this issue is stopping me from moving further, as my completed app depends on the Exaplandable Collection View.
Even I checked with .NET 8 latest release but still reproducing. Can you please take this as a priority item?
We faced this issue too after upgrade to .NET 8.0. We have group collection view and 2 buttons that navigates between weeks. The combination of scroll a tap button event clears data, but headers one covers old one. This affects iOS release. And yes, collection view performance is terrible in release. Items in collection ~8.
UPD: Upgrade MAUI libraries to 8.0.14 or 8.0.20-nightly significantly increased Group CollectionView performance and responsiveness. And glitch with overlapping headers seems to disappear.
I am facing the same issue with nightly build of 8.0.20. Did you try the workaround described above or without? Is this still a way to go with the above?
I am facing the same issue with nightly build of 8.0.20. Did you try the workaround described above or without? Is this still a way to go with the above?
Yes, i setup fixed height for header template and data template in collection view
Thanks, then I will give it a try. First of all I was thinking, that my queries to get the grouped ObservableRangeCollection
was somehow wrong. But, I figured out there was just one element in one of my groups and it showed two group headers. Even when I have an empty grouped ObservableRangeCollection
, I can see 2 empty headers.
I could figure it out, how I could get my scenario working. Just wanted to share it, in case somebody else needs ideas what to try to get the own scenario working.
This is how it behaved before:
<Grid RowDefinitions="Auto, *">
<searchBarControl:SearchBarLang Grid.Row="0" ios:SearchBar.SearchBarStyle="Minimal" Text="{Binding SearchText}" Placeholder="Search item..." CancelButtonText="{loc:Translate CancelButtonText}" Margin="0, 10, 0, 5"/>
<CollectionView Grid.Row="1" ItemsSource="{Binding GroupedItems, Mode=OneWay}" VerticalScrollBarVisibility="Always" IsGrouped="True" Margin="0, 0, 0, 50">
<!-- Group Header Template: Titles of a Group -->
<CollectionView.GroupHeaderTemplate>
<DataTemplate x:DataType="viewModels:GroupedSelectionItemList">
<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand">
<Label FontSize="16" FontAttributes="Bold" Text="{Binding GroupName, StringFormat=' {0}'}" TextColor="{StaticResource Blue100Accent}" Margin="0, 25, 0, 0" />
<BoxView HeightRequest="0.5" Color="{StaticResource Gray200}" HorizontalOptions="FillAndExpand" Margin="0, 5, 0, 5" />
</StackLayout>
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
<!-- Item Template: Selected Item -->
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="{x:Type databaseModels:ItemSelection}">
<Grid ColumnDefinitions="*, Auto" RowDefinitions="Auto" Padding="{OnPlatform Default='5, 0, 5, 0', iOS='5, 0, 5, 10'}">
<Label Grid.Row="0" Grid.Column="0" Text="{Binding Item.Name}" VerticalOptions="Center" />
<Switch Grid.Row="0" Grid.Column="1" IsEnabled="True" IsToggled="{Binding IsSelected, Mode=TwoWay}" ThumbColor="{StaticResource Gray100}" OnColor="{StaticResource DarkOrange1}" VerticalOptions="Center" HorizontalOptions="Center" Margin="{OnPlatform Android='0, -5, 0, -5'}"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Grid>
With this change it went to this:
<Grid RowDefinitions="Auto, Auto">
<searchBarControl:SearchBarLang Grid.Row="0" ios:SearchBar.SearchBarStyle="Minimal" Text="{Binding SearchText}" Placeholder="Search item..." CancelButtonText="{loc:Translate CancelButtonText}" Margin="0, 10, 0, 5"/>
<Grid Grid.Row="1">
<CollectionView ItemsSource="{Binding GroupedItems, Mode=OneWay}" VerticalScrollBarVisibility="Always" IsGrouped="True" Margin="0, 0, 0, 50">
<!-- Group Header Template: Titles of a Group -->
<CollectionView.GroupHeaderTemplate>
<DataTemplate x:DataType="viewModels:GroupedSelectionItemList">
<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand">
<Label FontSize="16" FontAttributes="Bold" Text="{Binding GroupName, StringFormat=' {0}'}" TextColor="{StaticResource Blue100Accent}" Margin="0, 25, 0, 0" />
<BoxView HeightRequest="0.5" Color="{StaticResource Gray200}" HorizontalOptions="FillAndExpand" Margin="0, 5, 0, 5" />
</StackLayout>
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
<!-- Item Template: Selected Item -->
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="{x:Type databaseModels:ItemSelection}">
<Grid ColumnDefinitions="*, Auto" RowDefinitions="Auto" Padding="{OnPlatform Default='5, 0, 5, 0', iOS='5, 0, 5, 10'}">
<Label Grid.Row="0" Grid.Column="0" Text="{Binding Item.Name}" VerticalOptions="Center" />
<Switch Grid.Row="0" Grid.Column="1" IsEnabled="True" IsToggled="{Binding IsSelected, Mode=TwoWay}" ThumbColor="{StaticResource Gray100}" OnColor="{StaticResource DarkOrange1}" VerticalOptions="Center" HorizontalOptions="Center" Margin="{OnPlatform Android='0, -5, 0, -5'}"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Grid>
</Grid>
Basically, changed the RowDefinitions
of the outer Grid
from <Grid RowDefinitions="Auto, *">
to <Grid RowDefinitions="Auto, Auto">
and also wrapped the CollectionView
inside another Grid
which did the job here for me.
I found the NSInternalInconsistencyException
was occurring for me after the Clear()
and when immediate adding back to the collection object. By adding a delay of 100ms here the crash went away.
This seems like a regression of #10163 @PureWeen .
/similarissues
Hi I'm an AI powered bot that finds similar issues based off the issue title.
Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!
Note: You can give me feedback by thumbs upping or thumbs downing this comment.
I found the
NSInternalInconsistencyException
was occurring for me after theClear()
and when immediate adding back to the collection object. By adding a delay of 100ms here the crash went away.This seems like a regression of #10163 @PureWeen .
Adding 100 ms doesn't resolve it for me. This issue existed in the XF and delay was the workaround we used which after porting to MAUI doesn't work anymore.
Description
A CollectionView with IsGrouped set to True results in a wrong view rendering with duplicate groups when data is added, usually if not at the top scroll position. It crashes sometimes when data is removed. This happen on iOS and MacCatalyst. It works correctly on Android.
This may be related to issue https://github.com/dotnet/maui/issues/14978
https://github.com/dotnet/maui/assets/3500501/9cf74ebe-0674-47da-8f39-d8ca7921cb12
Steps to Reproduce
Link to public reproduction project repository
https://github.com/daniel-c/MauiGroupedCollectionTest.git
Version with bug
8.0.0-rc.1.9171
Is this a regression from previous behavior?
Not sure, did not test other versions
Last version that worked well
Unknown/Other
Affected platforms
iOS, macOS
Affected platform versions
iOS 17, macOS 14.0
Did you find any workaround?
No
Relevant log output