search

dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
22.2k stars 1.75k forks source link

[iOS] CarouselView content renders behind tab bar #17817

Open matt-goldman opened 1 year ago

matt-goldman commented 1 year ago

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

  1. Create a new .NET MAUI app
  2. Add a Shell tab bar (note, also occurs with Flyout or any other navigation, as long as you have a tab bar at the bottom of the scren)
  3. Add a CarouselView
  4. Add a data template selector
  5. Add controls to represent the different types of content for the carousel
  6. Load controls into the CarouselView using the data template selector
  7. Run the app on iOS
  8. Observe the bug

Expected 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 a CarouselView is rendered correctly, with the height of the page calculated accounting for the tab bar. The ActivityIndicator is also visible.

✅ Figure: on Android, a CollectionView loaded into the second item of a CarouselView is rendered correctly, with the height of the page calculated accounting for the tab bar. The CollectionView is scrolled to the end and the last item is visible. The ActivityIndicator is also visible.

❌ Figure: on iOS, a Grid loaded into the first item of a CarouselView is not rendered correctly; the height of the page does not account for the tab bar. The ActivityIndicator is not visible.

❌ Figure: on iOS, a CollectionView loaded into the second item of a CarouselView is not rendered correctly; the height of the page does not account for the tab bar. The CollectionView is scrolled to the end, nut the last item is not visible. The ActivityIndicator 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:

<Grid RowDefinitions="{OnPlatform 'Auto,Auto,*,10', iOS='Auto,Auto,*,10,80'}">

Relevant log output

No response

matt-goldman commented 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.

XamlTest commented 1 year ago

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

Grzesik commented 10 months ago

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.

Grzesik commented 10 months ago

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