Description
On iOS when CollectionView is used to display grouped data, the content items displayed in the CollectionView overlaps. For the first time it calculates the size correctly and shows everything as expected, but if sometimes, the list data changes or I pull to refresh new data (using RefreshView), the collection content is overlapping and looks so ugly.
Steps to Reproduce
-
Create a new MAUI app project using usual VS for Mac
-
Create ObservableCollection for grouped data:
-
[ObservableProperty]
ObservableCollection<IGrouping<DateTime?, Items>> groupedItems;
-
Populate the data from API or your data model
-
Design your layout to include CollectionView with DataTemplateSelector:
<ResourceDictionary>
<templateSelector:ItemDataTemplateSelector x:Key="itemDataTemplateSelector"
TemplateOne ="{StaticResource DataTemplateOne}"
TemplateTwo ="{StaticResource DataTemplateTwo}"
TemplateThree ="{StaticResource DataTemplateThree}"
TemplateFour ="{StaticResource DataTemplateFour}"
TemplateFive ="{StaticResource DataTemplateFive}"/>
</ResourceDictionary>
<RefreshView Grid.Row="0" VerticalOptions="FillAndExpand" IsRefreshing="{Binding IsRefreshing}"
RefreshColor="{StaticResource Primary}"
Command="{Binding RefreshCommand}">
<CollectionView TranslationY="-23"
VerticalScrollBarVisibility="Always" ItemTemplate="{StaticResource itemDataTemplateSelector}"
ItemsSource="{Binding GroupedItems}" VerticalOptions="FillAndExpand"
IsGrouped="True" ItemsUpdatingScrollMode="KeepLastItemInView">
<CollectionView.ItemsLayout>
<GridItemsLayout VerticalItemSpacing="5"
Orientation="Vertical" />
</CollectionView.ItemsLayout>
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
<Label Style="{StaticResource HeadingTextStyle}"
Padding="30,10,30,0"
Text="{Binding Key, StringFormat='{0: dddd, MMMM dd}'}"
VerticalTextAlignment="Center"
/>
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
</CollectionView>
</RefreshView>
-
Run in iOS simulator, it will look good the very first time and then if you pull to refresh the data, observe the bad overlapping.
-
Data is dynamic, it will sometimes overlap if the data is changed during runtime and some of the data templates are now not available as per the data
-
I cannot use ItemSizingStrategy="MeasureFirstItem" because, my design list design requires different data templates, which are of complete different sizes, so there is no chance I can use MeasureFirstItem ItemSizingStrategy.
Due to this, the UI for the very first screen of my app looks so bad that it's not possible to release or at least demo it to client.
Link to public reproduction project repository
No response
Version with bug
8.0.3
Is this a regression from previous behavior?
Not sure, did not test other versions
Last version that worked well
Unknown/Other
Affected platforms
iOS
Affected platform versions
iOS 17+
Did you find any workaround?
Couldn't find any workaround yet.
Relevant log output
No response
Description
On iOS when CollectionView is used to display grouped data, the content items displayed in the CollectionView overlaps. For the first time it calculates the size correctly and shows everything as expected, but if sometimes, the list data changes or I pull to refresh new data (using RefreshView), the collection content is overlapping and looks so ugly.
Steps to Reproduce
Create a new MAUI app project using usual VS for Mac
Create ObservableCollection for grouped data:
[ObservableProperty]
ObservableCollection<IGrouping<DateTime?, Items>> groupedItems;
Populate the data from API or your data model
Design your layout to include CollectionView with DataTemplateSelector:
Run in iOS simulator, it will look good the very first time and then if you pull to refresh the data, observe the bad overlapping.
Data is dynamic, it will sometimes overlap if the data is changed during runtime and some of the data templates are now not available as per the data
I cannot use ItemSizingStrategy="MeasureFirstItem" because, my design list design requires different data templates, which are of complete different sizes, so there is no chance I can use MeasureFirstItem ItemSizingStrategy.
Due to this, the UI for the very first screen of my app looks so bad that it's not possible to release or at least demo it to client.
Link to public reproduction project repository
No response
Version with bug
8.0.3
Is this a regression from previous behavior?
Not sure, did not test other versions
Last version that worked well
Unknown/Other
Affected platforms
iOS
Affected platform versions
iOS 17+
Did you find any workaround?
Couldn't find any workaround yet.
Relevant log output
No response