Open matt-goldman opened 1 year ago
I've mentioned this in a few related issues - I think there are a few weird behaviours arising as a result of this.
Verified this on Visual Studio Enterprise 17.8.0 Preview 2.0(8.0.0-rc.1.9171). Repro on iOS 16.4, not repro on Android 13.0-API33 with below Project: TemplateSelectorHeightIssue.zip
Hi, I have the same problem with the CarouselView on iOS. The CarouselView is rendered behind the TabBar. The tip with the additional row at the bottom of the view in iOS is not helpful, because at the beginning the view is even though shown behind the tabbar. When I move the view it renders the view new and than it look correct. It's weird. I can't use the control in the app with such a bug and I have to wait for a fix. It stops my update of the App to .Net Maui.
I created a video to show the problem. When I click on an item in the list, the CarouselView is shown with the item selected. The bottom of the item is behind the TabBar. When I move the item, it's redrawn and shows slightly more elements at the bottom. When I add a row at the bottom for iOS (ca. 80 height), the item will be shown at first only partially and after moving the item the whole content is shown. On Android it works fine.
https://github.com/dotnet/maui/assets/8165727/2eb763f2-fd5d-47cd-9ae0-46218691d44a
Description
I've encountered an issue specific to iOS in a .NET MAUI Shell application. The problem arises when content is loaded into a
CarouselView
using a data template selector.This issue is exclusive to iOS. It does not occur on Android. I have not tested on macOS or Windows, but I presume it might affect macOS as well. Within the same app and the same Shell, other tabs that load the same content statically do not exhibit this issue.
Steps to Reproduce
CarouselView
CarouselView
using the data template selectorExpected Behavior: Content height is calculated based on the space available between the navigation/title bar at the top and the tab bar at the bottom.
Actual Behavior: Content height is incorrectly calculated as the total screen height. This results in items being rendered behind the tab bar, making them invisible to the user.
✅ Figure: on Android, a
Grid
loaded into the first item of aCarouselView
is rendered correctly, with the height of the page calculated accounting for the tab bar. TheActivityIndicator
is also visible.✅ Figure: on Android, a
CollectionView
loaded into the second item of aCarouselView
is rendered correctly, with the height of the page calculated accounting for the tab bar. TheCollectionView
is scrolled to the end and the last item is visible. TheActivityIndicator
is also visible.❌ Figure: on iOS, a
Grid
loaded into the first item of aCarouselView
is not rendered correctly; the height of the page does not account for the tab bar. TheActivityIndicator
is not visible.❌ Figure: on iOS, a
CollectionView
loaded into the second item of aCarouselView
is not rendered correctly; the height of the page does not account for the tab bar. TheCollectionView
is scrolled to the end, nut the last item is not visible. TheActivityIndicator
is not visible.Link to public reproduction project repository
https://github.com/matt-goldman/TemplateSelectorHeightIssue
Version with bug
8.0.0-rc.1.9171
Is this a regression from previous behavior?
Yes, this used to work in Xamarin.Forms
Last version that worked well
Unknown/Other
Affected platforms
iOS
Affected platform versions
iOS 16 and up
Did you find any workaround?
Adding an extra row on iOS only that takes up the height of the tab bar is a workaround I'm using for now:
Relevant log output
No response