Shell: Tabs are not displayed correctly in RC 3 (transparent controls, inconsistent behavior)
- Dominant language
- C#
- Stars
- 23.3k
- Forks
- 2k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 290
Description
### Description
The combination of a flyout menu and tabs has never worked correctly in MAUI. I have reported some problems in RC1 in #6558. They have been fixed, but other bugs have appeared.
In RC3, the same Shell structure behaves differently on Android and on Windows. Moreover, the behavior is also completely different compared to Xamarin.Forms which makes the migration more complicated.
I have tested three scenarios in which there is a flyout menu and each of its items is also divided into tabs. The common bug for all three scenarios is that **the “hamburger” menu button is invisible on Android**. It can be clicked but it is transparent.
**Scenario 1: ShellContents directly inside a FlyoutItem**
```xml
```
Xamarin.Forms displayed both pages as **bottom tabs**. In MAUI, they are displayed as **top tabs** on Windows while on Android they are displayed as **bottom tabs**. There is another bug in MAUI on Android. Only the selected tab is visible. The other one is transparent (see screenshots). It can be selected by clicking on the place where it should be but it is invisible.
**Scenario 2: ShellContents inside a single Tab**
```xml
```
Xamarin.Forms displays **top tabs**. MAUI on Android displays also top tabs but there is **a minor bug that both tabs have the same color** (the selected one is not highlighted). MAUI on Windows behaves completely different. It displays **a drop-down menu** instead of tabs! It would be cool feature but it should not be the default behavior. It should be turned on by some new attribute (for example: DisplayOptions=”AsDropDownMenu”). In this state, it is a breaking change because applications migrated from Xamrin.Forms would display a drop-down menu instead of the expected top tabs. It would be better if MAUI behavior would be the same as behavior of Xamarin.Forms.
**Scenario 3: ShellContents inside separate Tabs**
```xml
```
Xamarin.Forms displays **bottom tabs** while MAUI displays **top tabs**. Moreover, there is the already mentioned minor bug on Android that both tabs has the same color (it is not highlighted which of them is the selected one).
As it can be seen, shell behaves very inconsistently when a flyout menu and tabs are used. The behavior should be the same for all platforms and ideally it should be the same as in Xamarin.Forms to make the migration as easy as possible. Any new features (drop-down menu on Windows) should be explicitly set by the developer (for example, a new attribute).
**Screenshots**
**Scenario 1:** Notice that 1) the menu button is not visible on Android, 2) bottom tabs are displayed on Android while top tabs are displayed on Windows, 3) only the selected tab is visible on Android, the other one is transparent.


**Scenario 2:** Notice that 1) top tabs are displayed on Android while a drop-down menu is displayed instead of tabs on Windows, 2) it is not distinguished which tab is selected on Android; they have the same color.


**Scenario 3:** Notice that 1) bottom tabs are displayed on Android while top tabs are displayed on Windows, 3) only the selected tab is visible on Android, the other one is transparent.


### Steps to Reproduce
1. Clone the repro project https://github.com/holecekp/MauiFlyoutAndTabs2
2. The repro project is basically a new project MAUI created by VS2022 preview and I have modified only the shell structure. I did not modify anything else (for example, styles).
3. Run it on Android. Check that the flyout menu button is not displayed. Click on the place where it should be (even if it is invisible). A flyout menu is opened. Check all items in the menu and compare it to Xamarin.Forms with the same shell structure.
4. Run it on Windows. Check that the rendering behavior is different than on Android.
### Version with bug
Release Candidate 3 (current)
### Last version that worked well
Unknown/Other
### Affected platforms
Android, Windows, I was *not* able test on other platforms
### Affected platform versions
Android 12, Windows 10
### Did you find any workaround?
No
### Relevant log output
_No response_
Contributor guide
Research direction
Start with the linked MauiFlyoutAndTabs2 repro project and run the three Shell flyout-and-tabs scenarios on Android and Windows. Compare the tab placement, selected-tab styling, hamburger button visibility, and Windows drop-down behavior with the stated Xamarin.Forms expectations; done means the cross-platform behavior is consistent and the reported controls render correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, csharp
- Domain
- desktop-dev, frontend, mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100