On iOS, CollectionView Header size changed causes overlap

[billreiss]

Description

If I initialize a CollectionView Header, and then it gets bigger, the header content overlaps the CollectionView items on iOS. Works fine on Android.

On iOS, in the CollectionView Header, if I have Label(s) and their default text fits on a single line, but then I populate these Labels with text that takes up two or more lines and the text needs to wrap, the header does not resize and the header overlaps the items.

Steps to Reproduce

1. Create a new MAUI App
2. Add a CollectionView with a Header that has a VerticalStackLayout and labels inside it that are named. Make the default values for the Labels in the header something short, I used "--"
3. Have a button that on Clicked changes the Label text with something that will wrap.
4. Observe on iOS that the Label text will overlap the items. On Android it works as expected.

Link to public reproduction project repository

https://github.com/billreiss/CollectionViewOverlappingIssue

Version with bug

8.0.6

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.2

Did you find any workaround?

No I have tried several things, I haven't found anything that works.

Relevant log output

No response

[YGuerin]

I have the exact same issue with a ListView. I can also confirm 8.0.3 has this bug. I've updated my workloads but the issue persists.

Unfortunately, I have no workaround (yet)

[Redth]

As a potential workaround for now, try a Grid instead of VerticalStackLayout:

<CollectionView.Header>
    <Grid x:Name="headerStack"
        RowDefinitions="Auto,Auto,Auto"
        Padding="10,0"
        RowSpacing="15"
        BackgroundColor="Pink">
                    
        <Image
            Source="dotnet_bot.png"
            Grid.Row="1"
            HeightRequest="185"
            Aspect="AspectFit"
            SemanticProperties.Description="dot net bot in a race car number eight" />
                    
        <Label x:Name="headLine"
            Text="--"
            Grid.Row="2"
            Style="{StaticResource Headline}"
            SemanticProperties.HeadingLevel="Level1" />

        <Label x:Name="subHeadLine"
            Text="--"
            Grid.Row="3"
            Style="{StaticResource SubHeadline}"
            SemanticProperties.HeadingLevel="Level2"
            SemanticProperties.Description="Welcome to dot net Multi platform App U I" />
    </Grid>
</CollectionView.Header>

[DawidBester]

Also experiencing the same issue in a project I'm converting from XF to MAUI.

I have Entry and Label bindings in the CollectionView header and the Header overlaps with GroupHeader and Items. Works correctly on Android but not on iOS.

Have tried various workarounds, for example:

1. using Grid and StackLayout
2. wrapping Editor and Labels in the header in their own grids
3. tried the latest MAUI preview 8.0.20 builds.
4. moved the header layout out of the CollectionView and wrapping the header and CollectionView inside a ScrollView, which works as the header don't overlap, but this then results in gesture scrolling issues on iOS. So not recommended.

Frustrating....

[DawidBester]

Found a workaround which seems to work for me when using 8.0.20-nightly.10316, see: #12429 (comment)

For each Entry or Label element with a binding in the CollectionView header that will potentially change the size of the element, I've added a SizeChanged="VisualElement_OnSizeChanged" event handler.

private void VisualElement_OnSizeChanged(object sender, EventArgs e)
{
    
    if (DeviceInfo.Current.Platform == DevicePlatform.iOS && TimersCollectionView.Header is VisualElement headerVisualElement)
    {
        headerVisualElement.InvalidateMeasureNonVirtual(InvalidationTrigger.Undefined);
    }
}

[rmarinho]

Duplicate of #12429