dotnet / dotnet/maui

Shell: Tabs are not displayed correctly in RC 3 (transparent controls, inconsistent behavior)

Open
#7,033 8 comments 0 reactions 0 assignees View on GitHub
area-controls-shell delighter platform/android platform/windows s/triaged t/bug
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.
![mauiandroid1](https://user-images.githubusercontent.com/24872113/167894639-841bf542-a893-42f3-9e1b-40a2d6a76f02.png)
![mauiwin1](https://user-images.githubusercontent.com/24872113/167894560-f4eda31a-1c1f-45e1-a54a-930e2d0d2f53.png)

**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.

![mauiandroid2](https://user-images.githubusercontent.com/24872113/167894654-c941f0b2-7a92-4263-b1a6-95ddfa58f9b5.png)
![mauiwin2](https://user-images.githubusercontent.com/24872113/167894584-60f282f1-7248-4c92-994c-4924e412eef6.png)

**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.
![mauiandroid3](https://user-images.githubusercontent.com/24872113/167895673-3f044f13-dd89-4100-8005-20c1f7fe00b3.png)
![mauiwin3](https://user-images.githubusercontent.com/24872113/167894590-616c05c0-1206-45c3-a42d-d663800bbaca.png)

### 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.