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

[holecekp]

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

    <FlyoutItem Title="ShellContents directly inside FlyoutItem">
        <ShellContent
                Title="Page 1"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="MainPage2" />
        <ShellContent
                Title="Page 2"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="MainPage3" />
    </FlyoutItem>

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

    <FlyoutItem Title="ShellContents inside a single Tab">
        <Tab Title="Tab 1">
            <ShellContent
                Title="Page 1"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="MainPage4" />
            <ShellContent
                Title="Page 2"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="MainPage5" />
        </Tab>
    </FlyoutItem>

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

    <FlyoutItem Title="ShellContents inside separate Tabs">
        <Tab Title="Tab 1">
            <ShellContent
                Title="Page 1"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="MainPage2" />
        </Tab>
        <Tab Title="Tab 2">
            <ShellContent
                Title="Page 2"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="MainPage3" />
        </Tab>
    </FlyoutItem>

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

[XamlTest]

Verified this issue with Visual Studio Enterprise 17.3.0 Preview 1.0 [32427.455.main]. Repro on Windows and Android 12 with above project.

[holecekp]

There has been a slight improvement in MAUI 6.0.312, but the most serious part of this issue still persists:

• The problem with transparent controls has been fixed in 6.0.312.
• The inconsistent behavior is also in 6.0.312. Tabs behave in a completely different way compared to Xamarin.Forms (top vs. bottom tabs) and the behavior depends also on the OS (e.g. top tabs on Windows but bottom tabs on Android).

[deviprasad987]

Any update on this bug

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[holecekp]

It is sad that the issue is waiting 3 months and its fix is not planned any soon. I will wait then with migrating from Xamarin.Forms a bit longer. The migration assistant is broken for MAUI at this time anyway.

I am surprised that are not more reactions from other developers on this issue. Maybe they do not use a flyout menu and tabs at the same time in their apps, or maybe they has not started migrating from Xamarin.Forms to MAUI yet.

[GuildOfCalamity]

It happens with the Flyout menu as well... how was this not tested fully? Menu items are the bread & butter of any UI. You can see that even with the header (which was suggested as a workaround) the item is still invisible.