Border control performance issue

[OvrBtn]

Description

I have 2 pages which are almost the same - both contain CarouselView with CollectionViews inside. There is one key difference, in the first page CollectionView contains Border with Label inside, the second page contains Frame with Label. If you look at the video below you will see that in case of Frame everything is working fine and smooth, but the Border version is unusable.

What's important this recording was made on real device (Samsung Galaxy A50, Android 11) and the build was made in Release configuration.

(Keep in mind that the first 15 seconds of the video is the page just loading)

https://github.com/dotnet/maui/assets/76904408/47dc016e-05eb-49ca-ba24-6cbaa73f8107

I've tested it only on Android and Windows. On Windows it's better but the performance difference is still highly visible.

Also the reproduction project is .NET 8 but I have .NET 7 app in which I made my own calendar using CarouselView with BindableLayout inside and using Borders too and it was also awful, after switching to Frame it's better but still the swipe animation is far from smooth.

https://github.com/dotnet/maui/assets/76904408/af91c5ec-54ad-41ea-83af-383db287e6b6

Steps to Reproduce

No response

Link to public reproduction project repository

https://github.com/OvrBtn/BorderPerformanceIssue

Version with bug

8.0.3 GA

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android, Windows

Affected platform versions

Android 11 (I didn't check other versions), Windows 10

Did you find any workaround?

No response

Relevant log output

No response

[OvrBtn]

I've updated to 8.0.6 with dotnet workload update and it's the same.

[leoslima13]

I have the same performance issue on my custom Entry control that I created, I have a border like external control and Entry as its content

[Zhanglirong-Winnie]

Verified this issue with Visual Studio 17.10.0 Preview 2(8.0.10). Can repro on android and windows platforms with sample project.

[owaits]

I am struggling with the same problem, I have four CollectionView's with 100 items and each item has a border. The load time for all the views is over 10s on an iPad but if I remove the border its under 1s. Would be good to have an idea on how to work around this issue or what is causing it. I sore something that the animations on the border dimensions might be a reason but I could not get the suggested fix to work.

[OvrBtn]

@owaits You can try using the legacy <Frame> as I suggested in the issue's description. Unless there are some distinct features of <Border> that you need which <Frame> doesn't have.

Also to speed up the loading time a bit you can load data into CollectionView dynamically when user has scrolled far enough check out the Loading data incrementally

[owaits]

@OvrBtn thank you for taking the time to provide a suggestion. I have just tried to see if the frame would work but it does not seem to. I am using a Border to get around a bug in IOS where the button background leaks out of the button and fills the screen starting at the top left corner of the button. The frame does not appear to have the same impact on constrain naughty background to the button. I am only using a button as a work around for PointerGesture not working on Android. I was only using PointerGestures as a work around for InputTransparent not working on Windows :-)