CollectionView scroll in .NET MAUI Overlaps UI when there are more data.

[divyesh008]

Description

CollectionView control is not correctly calculating height of the items, when there are more data with longer text, the next one overlaps it.

I have tried to remove bounce and animation of CollectionView scroll using Handler like we do in Xamarin.Forms CollectionView using custom renderer:

[assembly: ExportRenderer(typeof(CollectionView), typeof(NoBounceRenderer))]
namespace CollectionViewBounceSample.iOS
{
    public class NoBounceRenderer : CollectionViewRenderer
    {
        public NoBounceRenderer() { }
        
        protected override void OnElementChanged(ElementChangedEventArgs<GroupableItemsView> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
                Controller.CollectionView.Bounces = false;
        }
    }
}

Reference: https://blog.verslu.is/stackoverflow-answers/disable-bounce-collectionview-xamarin-forms/
But Bounce property is now available in .NET MAUI CollectionView control.

Check the screenshot:

Check the screens recording:

CollectionView.Bug.mp4

Steps to Reproduce

1. Create new .net maui app
2. Add CollectionView control to page and design UI like I have shown in the screenshot
3. Add some large data for collection view item source property
4. Run the app and Drag down the scroll quickly, it will make the scroll bounce
5. You'll be able to see the Overlapping of item in collection view

Link to public reproduction project repository

https://github.com/divyesh008/MauiLabel_Bug2.git

Version with bug

7.0.49
6.0.541/6.0.400

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16.1

Did you find any workaround?

Not yet

Relevant log output

No response

[ToolmakerSteve]

Corresponding StackOverflow post: https://stackoverflow.com/q/76604496/199364

In the screenshot there, and the video here, I see that variable heights are not being correctly maintained. When there is a taller row, the next row overlaps it.

When a cell is re-used, following cells don’t have position adjusted for new height of reused cell?

[divyesh008]

When there is a taller row, the next row overlaps it.

When a cell is re-used, following cells don’t have position adjusted for new height of reused cell?

@ToolmakerSteve for this I have tried to use DataTemplateSelector as well. I have created two templates one for smaller length text and other one for longer length text and used it with ItemTemplate property of CollectionView but that also not resolves Overlapping text issue.

[MichaelShapiro]

Happens on iPhones too.

[sandreas]

+1
Happens on Windows Systems (Windows 11) - Window Resizing 1px seems to rearrange stuff to "fix" the layout. I'll post screenshots after the OK of my company. I'm not sure that there is a triggerRerender or something better, window resizing is a VERY dirty hack... but it works in my case.

// WindowPositioner is a custom class... I can't post the code, but you should get the point
// increase width 1px
// after 500ms decrease width again 1px
WindowPositioner.Resize(App.AppWindow, 1, 0);
await Task.Delay(500).ContinueWith((_) =>
{
    WindowPositioner.Resize(App.AppWindow, -1, 0);
});

[shyn]

Same here. iOS 16 with iPhone 14 Pro simulator.

❯ dotnet workload list         
-------------------------------------------------------------------
maui-ios         8.0.0-rc.2.9373/8.0.100-rc.2      SDK 8.0.100-rc.2
maui             8.0.0-rc.2.9373/8.0.100-rc.2      SDK 8.0.100-rc.2

[XamlTest]

Verified this on Visual Studio Enterprise 17.9.0 Preview 1(8.0.3). Repro on iPad Pro, not repro on iOS 17.0 with below Project:
poc_maui.zip

[shyn]

@XamlTest I tried your test project on iOS 17 in simulator. reproed with \n or \r\n in the label text and a little long list. Seems like the bug is related to \n?

I updated my dotnet by the way.

dotnet workload list

Installed Workload Id      Manifest Version      Installation Source
--------------------------------------------------------------------
maui                       8.0.3/8.0.100         SDK 8.0.100        

Use `dotnet workload search` to find additional workloads to install.

[XamlTest]

@shyn I only can confirm this issue still repro on the latest version, the root cause maybe needs to wait a further investigation by engineers.

[shyn]

@XamlTest Thank you for your attention! Maybe we should open a new issue, this issue is really critical and has caused us to delay the development of the MAUI client.

[divyesh008]

@XamlTest Thank you for your attention! Maybe we should open a new issue, this issue is really critical and has caused us to delay the development of the MAUI client.

Not getting your point, the issue is the same so why do we need to open a new issue?

[shyn]

@divyesh008 Since the title of Happens only in iPad device is not very accurate, maybe modify the title. It's a common issue not only on iPad.

[XamlTest]

@shyn You can update the Title and Affected Platforms in the original report or add additional information in comments.

[divyesh008]

It's still not resolved in .Net8 as well. Any updates on this?

[shyn]

I will not going to try MAUI until this bug resolved.

[divyesh008]

I will not going to try MAUI until this bug resolved.

As a workaround we can use Bindable StackLayout with ScrollView. I have did the same.

[shyn]

@divyesh008 thanks for the information. I will try it to see the performance. Since no virtualization for Bindable StackLayout after all.

[evgenyKozlov1996]

The same issue on the latest version and no any comment from Microsoft developers...

[divyesh008]

Seems like this got resolved.