maui
maui copied to clipboard
dotnet
CollectionView scroll in .NET MAUI Overlaps UI when there are more data.
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:
https://github.com/dotnet/maui/assets/10617244/a9005a06-d5a1-4fa4-89ed-9da89f4bc32c
Steps to Reproduce
- Create new .net maui app
- Add CollectionView control to page and design UI like I have shown in the screenshot
- Add some large data for collection view item source property
- Run the app and Drag down the scroll quickly, it will make the scroll bounce
- 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
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?
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.
+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);
});
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
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
@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.
@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.
@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.
@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?
@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.
@shyn You can update the Title and Affected Platforms in the original report or add additional information in comments.
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.
@divyesh008 thanks for the information. I will try it to see the performance. Since no virtualization for Bindable StackLayout after all.
The same issue on the latest version and no any comment from Microsoft developers...
