CollectionView Items display issue when Header is resized on iOS

[tranb3r]

Description

When the size of a CollectionView Header increases, it's displayed on top of Items, on iOS.
No issue on Android.

In this example, when clicking on the Add button, a row is added to the Header of the CollectionView (above the line), in order to increase the size of the Header. On Android, the Items (below the row) move down accordingly. On iOS, the Header size increases and is displayed on top of Items.

Steps to Reproduce

1. Create a Maui app
2. Add a CollectionView with HeaderTemplate
3. Increase size of Header and observe what happens

Link to public reproduction project repository

https://github.com/tranb3r/Issues/tree/main/MauiAppCollectionViewHeaderResize

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16.1

Did you find any workaround?

no

Relevant log output

No response

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[eth-ellis]

I am experiencing this issue also.

To add it is also occurring for the CollectionView footer as can be seen below:

Android (Working) -

iOS (Not working) -

Reproduction link: https://github.com/eth-ellis/Issue-Repro/tree/main/MauiAppCollectionViewFooterResize

@tranb3r Did you end up finding a workaround since raising?

[tranb3r]

@eth-ellis
Yes, I do have a workaround: invalidate the header to force a redraw.

        if (CollectionViewRef.Header is VisualElement headerVisualElement)
        {
            headerVisualElement.InvalidateMeasureNonVirtual(InvalidationTrigger.Undefined);
        }

I've updated my sample project with a "fix" button.

[jinxinjuan]

Verified this issue with Visual Studio Enterprise 17.7.0 Preview 1.0. Can repro on iOS platform with sample project. MauiAppCollectionViewHeaderResize
But have a workaround via clicking "fix" button,

[metalium84]

I'm facing the same issue with .NET 8 and iOS 17.0. Any updates on this? CollectionViews with headers seems like quite a crucial thing to work properly!

[unamed000]

Confirmed still an issue in latest .NET 8. CollectionView is a fundamental view which is very important and it should work in these simple cases....

[Pughgramming]

It appears this issue is still present. I see there was a PR for a potential fix two weeks ago, is there any update or workaround at this time?

[bengavin]

^ bump this again - we could use this fix in the next SR please :) cc: @kubaflo @PureWeen

[WanftMoon]

Bump, using workaround, but this def need fix.

[thisisthekap]

As the workaround is not working for us, this issue forced us to use bindable layouts, which induced a performance degradation.

Therefore, this issue has high priority for us.

[michiel-nwa]

@thisisthekap could you elaborate a bit on how you were able to get it to work? Not sure if I understand what you did.

Still looking into if/how the workaround can somehow be used when using a HeaderTemplate.

[thisisthekap]

@michiel-nwa We replaced CollectionView with e.g. VerticalStackLayout including a DataTemplate for the items.

[michiel-nwa]

@thisisthekap Thanks, that is not what I was looking for.

I ended up registering for BindingContextChanged and then PropertyChanged changes on the BindingContext in the HeaderTemplate. And then calling the invalidation from the workaround on every change. Seems to work for now.

[filyXplor]

@michiel-nwa I haven't been able to fix it yet, could you give an example of what you did?

[jaysidri]

@michiel-nwa How did you invalidate the layout and force it to redraw? A workaround described here: #12429 (comment) did this but the InvalidationTrigger enum is now internal.

headerVisualElement.InvalidateMeasureNonVirtual(InvalidationTrigger.Undefined);

[michiel-nwa]

@filyXplor @jaysidri I basically applied the given workaround in the sample code to my situation:

myList.HeaderTemplate = new DataTemplate(() => {
   var header = new Grid();
   // Some layout with bindings etc.
   
    System.ComponentModel.PropertyChangedEventHandler invalidate = (object sender, System.ComponentModel.PropertyChangedEventArgs e) => {
        if(e.PropertyName==nameof(MyModel.RelevantProperty)){
            header.InvalidateMeasureNonVirtual(Microsoft.Maui.Controls.Internals.InvalidationTrigger.Undefined);
        }
    }				
    
    header.BindingContextChanged += (a1, a2) => {
          var bc = header.BindingContext as INotifyPropertyChanged;
          if (bc != null)
          {
               bc.PropertyChanged -= invalidate;
	       bc.PropertyChanged += invalidate;
          }
          header.InvalidateMeasureNonVirtual(Microsoft.Maui.Controls.Internals.InvalidationTrigger.Undefined);
    };
    return header;
});

Far from ideal, but at least lets me continue until the issue is fixed.

[rudyspano]

Our alternative "generic" solution that works in all our cases based on Handlers

public class LayoutHandler : Microsoft.Maui.Handlers.LayoutHandler
   {
       protected override LayoutView CreatePlatformView() => new LayoutViewExtended(VirtualView);

       private class LayoutViewExtended : LayoutView
       {
           private readonly ILayout _virtualView;
           private Size _currentFixedSize;

           public LayoutViewExtended(ILayout virtualView)
           {
               _virtualView = virtualView;
           }

           public override void LayoutSubviews()
           {
               base.LayoutSubviews();

               FixCollectionViewHeaderFooter();
           }

           /// <summary>
           /// Hack: Fix current issue with Headers and Footers that change in terms of size
           /// <see cref="https://github.com/dotnet/maui/issues/17885"/>
           /// </summary>
           private void FixCollectionViewHeaderFooter()
           {
               if (_virtualView.Parent is not CollectionView collectionView
                   || collectionView.Header != _virtualView && collectionView.Footer != _virtualView)
               {
                   return;
               }

               var bounds = AdjustForSafeArea(Bounds).ToRectangle();

               var widthConstraint = bounds.Width;
               var heightConstraint = bounds.Height;

               var size = CrossPlatformLayout.CrossPlatformMeasure(widthConstraint, double.PositiveInfinity);

               if (size.Height <= 0 || size.Width <= 0
                   || _currentFixedSize == size)
               {
                   return;
               }

               if (collectionView.Width > 0)
               {
                   widthConstraint = Math.Min(collectionView.Width, widthConstraint);
               }

               if (CrossPlatformLayout is VisualElement element
                   && (Math.Abs(heightConstraint - size.Height) > 0.1 || Math.Abs(widthConstraint - size.Width) > 0.1))
               {
                   element.InvalidateMeasureNonVirtual(InvalidationTrigger.Undefined);
                   _currentFixedSize = size;
               }
           }
       }
   }

[maonaoda]

#17885
my workaround is same as this.

The new CollectionViewHandler2 is recently available on net9, maybe could fix this.（ '▿ ' ）

Our alternative "generic" solution that works in all our cases based on Handlers

public class LayoutHandler : Microsoft.Maui.Handlers.LayoutHandler
   {
       protected override LayoutView CreatePlatformView() => new LayoutViewExtended(VirtualView);

       private class LayoutViewExtended : LayoutView
       {
           private readonly ILayout _virtualView;
           private Size _currentFixedSize;

           public LayoutViewExtended(ILayout virtualView)
           {
               _virtualView = virtualView;
           }

           public override void LayoutSubviews()
           {
               base.LayoutSubviews();

               FixCollectionViewHeaderFooter();
           }

           /// <summary>
           /// Hack: Fix current issue with Headers and Footers that change in terms of size
           /// <see cref="https://github.com/dotnet/maui/issues/17885"/>
           /// </summary>
           private void FixCollectionViewHeaderFooter()
           {
               if (_virtualView.Parent is not CollectionView collectionView
                   || collectionView.Header != _virtualView && collectionView.Footer != _virtualView)
               {
                   return;
               }

               var bounds = AdjustForSafeArea(Bounds).ToRectangle();

               var widthConstraint = bounds.Width;
               var heightConstraint = bounds.Height;

               var size = CrossPlatformLayout.CrossPlatformMeasure(widthConstraint, double.PositiveInfinity);

               if (size.Height <= 0 || size.Width <= 0
                   || _currentFixedSize == size)
               {
                   return;
               }

               if (collectionView.Width > 0)
               {
                   widthConstraint = Math.Min(collectionView.Width, widthConstraint);
               }

               if (CrossPlatformLayout is VisualElement element
                   && (Math.Abs(heightConstraint - size.Height) > 0.1 || Math.Abs(widthConstraint - size.Width) > 0.1))
               {
                   element.InvalidateMeasureNonVirtual(InvalidationTrigger.Undefined);
                   _currentFixedSize = size;
               }
           }
       }
   }