.NET Maui Shell colors behavior is not the same as Xamarin Forms and difficult to comprehend

[AndreduToit]

Description

David Ortinau previously published "Exploring Colors in Xamarin.Forms Shell" (https://github.com/davidortinau/ShellStylesSample).
Sample code made available here: https://github.com/davidortinau/ShellStylesSample
Creating an new .NET Maui project and porting the code from above to this project.
The .NET Maui project does not replicate the demonstrated behavior in Xamarin.Forms.
It is also impossible to figure out what Shell properties control which colors in the UI.
There are differences in the behavior of Shell color properties between Android and Windows (iOS not tested).

Steps to Reproduce

1. Create a project > new .NET Maui App
2. To the project Resources/Fonts > add FontAwesomeSolid font file - Property Build Action = MauiFont
3. To the project MauiProgram.cs > Add fonts.AddFont("FontAwesome5Solid.otf", "FontAwesome");
4. In the project replace AppShell.cs with the following:

<Shell.Resources>
    <FontImageSource
        x:Key="IconBack"
        FontFamily="FontAwesome"
        Glyph="{x:Static common:IconFont.Backward}"
        Size="18"
        Color="#1d1d1d"/>
    <FontImageSource
        x:Key="IconSignout"
        FontFamily="FontAwesome"
        Glyph="{x:Static common:IconFont.SignOutAlt}"
        Size="18"
        Color="#1d1d1d"/>
    <FontImageSource
        x:Key="IconInfo"
        FontFamily="FontAwesome"
        Glyph="{x:Static common:IconFont.Info}"
        Size="18"
        Color="#1d1d1d"/>
    <FontImageSource
        x:Key="IconHome"
        FontFamily="FontAwesome"
        Glyph="{x:Static common:IconFont.Home}"
        Size="18"
        Color="#1d1d1d"/>
</Shell.Resources>

<TabBar>
    <Tab Title="Main Page" Icon="{StaticResource IconHome}">
        <ShellContent Title="Main Page" ContentTemplate="{DataTemplate app:MainPage}"/>
    </Tab>
    <Tab Title="Info Page" Icon="{StaticResource IconInfo}"
         >
        <ShellContent Title="Main Page" ContentTemplate="{DataTemplate app:MainPage}"/>
    </Tab>
    <Tab Title="Back Page" Icon="{StaticResource IconBack}">
        <ShellContent Title="Main Page" ContentTemplate="{DataTemplate app:MainPage}"/>
    </Tab>
    <Tab Title="Sign Out Page" Icon="{StaticResource IconSignout}">
        <ShellContent Title="Main Page" ContentTemplate="{DataTemplate app:MainPage}"/>
    </Tab>
</TabBar>

<!--<FlyoutItem Title="Main Page" Icon="{StaticResource IconHome}">
    <ShellContent Title="Main Page" ContentTemplate="{DataTemplate app:MainPage}"/>
</FlyoutItem>
<FlyoutItem Title="Info Page" Icon="{StaticResource IconInfo}"
        >
    <ShellContent Title="Main Page" ContentTemplate="{DataTemplate app:MainPage}"/>
</FlyoutItem>
<FlyoutItem Title="Back Page" Icon="{StaticResource IconBack}">
    <ShellContent Title="Main Page" ContentTemplate="{DataTemplate app:MainPage}"/>
</FlyoutItem>
<FlyoutItem Title="Sign Out Page" Icon="{StaticResource IconSignout}">
    <ShellContent Title="Main Page" ContentTemplate="{DataTemplate app:MainPage}"/>
</FlyoutItem>-->

5. Appearance of Shell in UI is not the same as in Xamarin.Forms as demonstrated here: https://github.com/davidortinau/ShellStylesSample

Version with bug

Release Candidate 2 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android, Windows

Affected platform versions

Android 11.0 and Windows Machine

Did you find any workaround?

No workaround found.

Relevant log output

No response

[VincentBu]

repro on Android with vs main build.
On Android:

but it works fine on Windows and IOS

[edgiardina]

Voting for this; have found that in converting my Xamarin forms app https://github.com/edgiardina/Ifpa to MAUI here https://github.com/edgiardina/IfpaMaui that I there are several differences in what styles apply where. Styling using Shell doesn't work the same. It's also unclear how to apply styles to toolbaricons as well; previously xam forms applied the Foreground text color to the icons and back button in a navigation page; but there's no MAUI way to style them currently.

[macdonja]

Voting for this. I would expect to be able to customise the appearance of the shell tabbar similar to the tabbedpage

[bangnguyen794]

I'm having the same problem

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

[MGohil]

This also an issue in TabbedPage.
I have tested this in TabbedPage via Font icons as well as png icons. First two tabs uses FontAwesome icons while other two are using png icons from resources.
As you can see, Android behaves pretty good here but iOS icon shows as white icons.
Even if you select, only text color changes but font icon color remains unchanged.
However, if we use png images, the selection color works good in both platforms. The selection applies to icon and text together.

To overcome above white icon issue for FontAwesome in iOS, as @davidortinau mentioned, we have to explicitly provide the Color to the icon, which solves this problem but again as you can see in below, the selected tab icon still remains unchanged. Only text color changes.

No matter whether we use FontIcon or png both should behave same as it behave in Android.

[Adelzu]

This also an issue in TabbedPage. I have tested this in TabbedPage via Font icons as well as png icons. First two tabs uses FontAwesome icons while other two are using png icons from resources. As you can see, Android behaves pretty good here but iOS icon shows as white icons. Even if you select, only text color changes but font icon color remains unchanged. However, if we use png images, the selection color works good in both platforms. The selection applies to icon and text together.

To overcome above white icon issue for FontAwesome in iOS, as @davidortinau mentioned, we have to explicitly provide the Color to the icon, which solves this problem but again as you can see in below, the selected tab icon still remains unchanged. Only text color changes.

No matter whether we use FontIcon or png both should behave same as it behave in Android.

I Wish it ends here!
If you specify the color in the FontImageSource to overcome the color issue, you lose the ability to have dark theme. Use AppThemeBinding (to provide different icons based on theme, not change the color based on theme, as the color in FontImageSource is not bindable) and your app works well in Visual Studio. But once it is uploaded to AppStoreConnect and tested in TestFlight, it will not launch and crash immediately! (nothing useful in logs)

The only solution we found so far is to force one theme in the app (dark or light) until this is fixed.

I don't think MAUI is near ready for production use. We are spending more time debugging the tools rather than debugging the app, unfortunately.

[arahmancsd]

I am facing the exact same issue as @Adelzu mentioned. In iOS the FontImageSource doesn't inherit the color of the Selected/Unselected Tab if not assigned. However, changing FontImageSource color to a static/dynamic resource will also affect the loss of selected/unselected tab color behavior. The same works fine in Android.

<TabBar>
        <Tab Title="Discover">
            <ShellContent ContentTemplate="{DataTemplate homeTabViews:HomePage}" />
            <Tab.Icon>
                <FontImageSource Glyph="{x:Static util:FontAwesomeIcons.Home}" FontFamily="Fas"/>
                <!--<FontImageSource Color="{Binding Source={RelativeSource AncestorType={x:Type Shell}}, Path=TabBarTitleColor}" Glyph="{x:Static util:FontAwesomeIcons.Home}" FontFamily="Fas"/>-->
            </Tab.Icon>
        </Tab>
        <Tab Title="Playlist">
            <ShellContent ContentTemplate="{DataTemplate playlistTabViews:PlaylistHomePage}" />
            <Tab.Icon>
                <FontImageSource Glyph="{x:Static util:FontAwesomeIcons.ListMusic}" FontFamily="Fas"/>
            </Tab.Icon>
       </Tab>
    </TabBar>

[nicjay]

On iOS, I can confirm the identical issue as the previous posts. Icons are invisible without setting a color, and then when explicitly giving it a color, Shell selection doesn't change the icon color, only the text color.

My workaround is just avoiding icons altogether and instead using SVGs provided from FontAwesome (and custom sizing them).

[Adelzu]

Persists on net7 using both vs2022 on windows and on MAC ARM.

[Blinchik91]

still not fixed, why does something important take so long ?!

[arahmancsd]

@Blinchik91 maybe this helps #8244 (comment)

[Blinchik91]

@arahmancsd I don’t want a „static“ Color, I want the same behaviour like on Android with the unfocused/unselected color, the grey one and if selected my custom color

[SliemBeji-FBC]

Its still an issue on IOS 17 tested with an Iphone 11

[dylix]

Also converting Xamarin app to Maui and running into this issue....