Shell: Top tabs are not displayed correctly (wrong color on Android, invisible on Windows)

[holecekp]

Description

Top tabs are unusable when the following structure is used in the shell:

<FlyoutItem Title="First">
        <Tab>
            <ShellContent
                Title="First"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="MainPage" />
        </Tab>
    </FlyoutItem>
    
    <FlyoutItem Title="Second and third">
        <Tab Title="Second and third">
            <ShellContent
                Title="Second"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="MainPage2" />

            <ShellContent
                Title="Third"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="MainPage3" />
        </Tab>
    </FlyoutItem>

This should add two entries into the flyout menu and the second one should be divided into two tabs that should be displayed on the upper part of the page.

This is displayed correctly in Xamarin.Forms. The tabs are however unusable in MAUI:

• Android: Only the selected tab has the correct color. The other tabs are transparent. They are not visible but they can be selected by tapping on the area where they should be.
• Windows: No tabs are displayed at all. Clicking on the area where they should be does not work. They cannot be selected at all.

Screenshots:
Tabs in MAUI on Windows (tabs are not displayed at all):

Tabs in MAUI on Android (only the selected tab is visible, the other tab is transparent):

Tabs in Xamarin.Form on UWP (tabs displayed correctly):

Tabs in Xamarin.Form on Android (tabs displayed correctly):

Steps to Reproduce

1. Clone the repro project from https://github.com/holecekp/MauiFlyoutAndTabs
2. Run it on Android
3. Tap on the menu button and select the "Second and third" item from the flyout menu.
4. A page with two tabs "Second" and "Third" should be displayed. Instead, only "Second" is visible and the tab "Third" is there but it is transparent.
5. Run the same project on windows.
6. Tap on the menu button and select the "Second and third" item from the flyout menu.
7. A page with two tabs "Second" and "Third" should be displayed. Instead, the tabs are not displayed at all and there is no way to select either of the tabs.

Version with bug

Release Candidate 2 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android, Windows, I was not able test on other platforms

Affected platform versions

Android 10 emulator, tested on Window 10; the target versions for Android and Windows are the default ones from VS 17.2 preview 5

Did you find any workaround?

No

Relevant log output

No response

[PureWeen]

@rachelkang are the tab colors here on Android from our styles.xaml file?

[rachelkang]

@PureWeen yes - dotnet purple for the text color

maui/src/Templates/src/templates/maui-mobile/Resources/Styles.xaml

Lines 339 to 350 in 1b05e12

	<Style x:Key="BaseStyle" TargetType="Element">
	<Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Black}}" />
	<Setter Property="Shell.ForegroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
	<Setter Property="Shell.TitleColor" Value="{AppThemeBinding Light={StaticResource LightGray}, Dark={StaticResource White}}" />
	<Setter Property="Shell.DisabledColor" Value="{AppThemeBinding Light={StaticResource LightGray}, Dark={StaticResource DarkGray}}" />
	<Setter Property="Shell.UnselectedColor" Value="{AppThemeBinding Light={StaticResource LightGray}, Dark={StaticResource DarkGray}}" />
	<Setter Property="Shell.NavBarHasShadow" Value="False" />
	<Setter Property="Shell.TabBarBackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
	<Setter Property="Shell.TabBarForegroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
	<Setter Property="Shell.TabBarTitleColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
	<Setter Property="Shell.TabBarUnselectedColor" Value="{AppThemeBinding Light={StaticResource LightGray}, Dark={StaticResource DarkGray}}" />
	</Style>

[emorell96]

I've experienced this in my app, and I found a workaround:

<FlyoutItem Title="{Binding AlertSettings.Title}"
                Icon="{AppThemeBinding Light=edit_notifications.png, Dark=edit_notifications_dark.png}">
        <Tab Title="{x:Static strings:Resources.ShellAlertSettings}" >

            <ShellContent Title="{Binding AlertSettings.Title}"
                          Icon="{AppThemeBinding Light=edit_notifications.png, Dark=edit_notifications_dark.png}"
                          ContentTemplate="{DataTemplate alerts:AlertSettingsPageMobile}"
                  />
        </Tab>
        <Tab Title="Retailer Options">
            <ShellContent Title="Retailer Options"
                          ContentTemplate="{DataTemplate alerts:RetailerOptionsPage}" />
        </Tab>
        <Tab Title="Active Notifications">
            <ShellContent Title="Active Notifications"
                          
                          ContentTemplate="{DataTemplate alerts:ActiveNotificationsPage}"/>
        </Tab>
    </FlyoutItem>

So instead of using one tab, you use multiple on Windows. When you use tab with multiple shell contents inside of it, it creates a tab, but with a dropdown for selecting a page instead.

The only time I saw this break was when a single tab would have multiple shell contents inside but a single tab.

Having multiple tabs, with multiple shell contents worked, where each tab would then contain a drop down allowing the user to select multiple pages.

[PureWeen]

The WinUI quirks should be fixed by this PR for RC3
#6564

[emorell96]

The WinUI quirks should be fixed by this PR for RC3 #6564

Will they support multiple contents per tab? That was kind of nice actually. Something that was not there AFAIK in Preview 14.

Having Tab directly create a tab made a lot more sense than using multiple shell contents inside a Tab. Also, creating one tab with multiple shell contents created a drop down in the tab was a nice feature on Windows.

[PureWeen]

@emorell96 I don't quite follow your question.

If you have

<Tab title="top tab">
     <ShellContent title="sub tab" />
     <ShellContent title="sub tab2" />

Top Tab will show up on the tab bar and then the sub tabs will be children of that tab.

If you have

<TabBar title="top tab"> //Or FLyoutItem
     <ShellContent title="sub tab" />
     <ShellContent title="sub tab2" />

Then those two tabs will just show up as two top level tabs.

[emorell96]

@PureWeen so on RC1 I could do this:

<FlyoutItem Title="{Binding AlertSettings.Title}"
                Icon="{AppThemeBinding Light=edit_notifications.png, Dark=edit_notifications_dark.png}">
        <Tab Title="{x:Static strings:Resources.ShellAlertSettings}" >

            <ShellContent Title="{Binding AlertSettings.Title}"
                          Icon="{AppThemeBinding Light=edit_notifications.png, Dark=edit_notifications_dark.png}"
                          ContentTemplate="{DataTemplate alerts:AlertSettingsPageMobile}"
                  />
            <ShellContent Title="Retailer Options"
                          ContentTemplate="{DataTemplate alerts:RetailerOptionsPage}" />
            <ShellContent Title="Active Notifications"
                          
                          ContentTemplate="{DataTemplate alerts:ActiveNotificationsPage}"/>
        </Tab>
        <Tab Title="Retailer Options">
            <ShellContent Title="Retailer Options"
                          ContentTemplate="{DataTemplate alerts:RetailerOptionsPage}" />
        </Tab>
        <Tab Title="Active Notifications">
            <ShellContent Title="Active Notifications"
                          
                          ContentTemplate="{DataTemplate alerts:ActiveNotificationsPage}"/>
        </Tab>
    </FlyoutItem>

The code on Windows would create three tabs inside the page. And the first tab would have a dropdown which would contain the shellcontents.

Is that still a thing in RC2 and RC3?

I cannot try it because my application no longer builds on Windows thanks to this issue: #5953

[emorell96]

I was able to build:

With multiple shell contents inside a tab:

With a single shell content per tab:

The former was not a thing in Preview 14 AFAIK. I only discovered it in RC1 and it wasn't in the docs last time I checked even though it's a really neat feature.

[PureWeen]

@emorell96 yea! So the XAML you gave me will produce the same output for RC3.

[PureWeen]

@emorell96 scratch that. Changing how it works now would make it confusingly different from Android/iOS

So you should see the same experience once RC3 merges

[holecekp]

The issue has not been fixed in RC3 for Windows. Instead top tabs, something like a context menu is rendered on Windows (Android renders top tabs correctly). This is a breaking behavior compared to Xamarin.Forms.

If I enclose each ShellContent into a separate Tab, top tabs are rendered on Windows, but bottom tabs are rendered on Android. The behavior is not consistent for both platforms.

Finally, I have tried to enclose ShellContents into a TabBar but this does not work with a flyout menu. Is there currently a way how to display a flyout menu and top tabs at the same time on Windows? This is not a problem in Xamarin.Forms but it seems impossible in MAUI RC3. I do not want bottom tabs because they are very unnatural for Windows (I do not know any other Windows app that would use bottom tabs). They make sense for Android where the users can select them easier by their thumbs.