[iOS] Cannot control unselected text color of tabs within TabbedPage

[emily-curry]

trafficstars

Description

Before .NET8, the behavior of the tabs within TabbedPage on iOS was that the color of the text would match the icon, which would be set to the TabbedPage's UnselectedTabColor. Now, the tab color gets set to an internal default color that is not configurable.

Steps to Reproduce

No response

Link to public reproduction project repository

https://github.com/emily-curry/maui-samples/tree/fix/ios-tab-bar-unselected-text-color/8.0/Navigation/TabbedPage

Version with bug

8.0.3

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

7.0.96

Affected platforms

iOS

Affected platform versions

iOS 15+

Did you find any workaround?

Within Platforms/iOS/Views:

using Microsoft.Maui.Controls.Handlers.Compatibility;
using Microsoft.Maui.Graphics.Platform;
using UIKit;

namespace MyApp.Views
{
    public partial class MyAppTabs
    {
        protected override void OnHandlerChanging(HandlerChangingEventArgs args)
        {
            base.OnHandlerChanging(args);

            if (args.NewHandler is TabbedRenderer renderer)
            {
                if (renderer.TabBar is not null)
                {
                    renderer.TabBar.TintColor = myColorFromSomewhere;
                }
            }
        }
    }
}

Relevant log output

No response

[XamlTest]

Verified this on Visual Studio Enterprise 17.9.0 Preview 1(8.0.3). Repro on iOS 17.0 with below Project: TabbedPage.zip

[BurkusCat]

I wasn't quite sure where I should use @emily-curry 's workaround but I ended up doing this which worked for me:

#if IOS
using Microsoft.Maui.Controls.Handlers.Compatibility;
using Microsoft.Maui.Platform;
#endif

namespace Project.Pages;

/// <summary>
/// https://github.com/dotnet/maui/issues/18775
/// </summary>
public partial class BaseTabbedPage : TabbedPage
{
    protected override void OnHandlerChanging(HandlerChangingEventArgs args)
    {
        base.OnHandlerChanging(args);

#if IOS
        if (args.NewHandler is TabbedRenderer renderer)
        {
            if (renderer.TabBar is not null)
            {
                renderer.TabBar.TintColor = Color.FromArgb("#7F7F7F").ToPlatform();
            }
        }
#endif
    }
}

Any TabbedPage you want to have the fix for, make it the above BaseTabbedPage instead.

[Axemasta]

This feels like a regression from .NET 7 because I only saw this issue in my apps after the upgrade. Before the whole bar respected the BarTextColor property.

[konradzuse]

the workaround doesn't work in my case, all the tab icons are white

// none of the below works!
            TabBar.TintColor = UIColor.Black;
            TabBar.TintAdjustmentMode = UIViewTintAdjustmentMode.Dimmed;
            TabBar.BarTintColor = UIColor.Black;
            TabBar.SelectedImageTintColor = UIColor.Black;
            TabBar.UnselectedItemTintColor = UIColor.Gray;

[bmacombe]

Here is a mapper version of the same work around if it helps anyone.

#if MACCATALYST || IOS
			Microsoft.Maui.Controls.Handlers.Compatibility.TabbedRenderer.Mapper.AppendToMapping("iOSColorFix", (handler, view) =>
			{

				var tabBar = handler.TabBar;
				tabBar.TintColor = view.UnselectedTabColor.ToPlatform();

			});
#endif

[theagodDev]

+1

I can't set the selected tab color with any of the workarounds.

This original code from TabbedPage XAML use to work:

             BarBackgroundColor="{DynamicResource AppleBackgroundMenuColor}"
             BarTextColor="{DynamicResource AppleMenuItemTextColor}"
             SelectedTabColor="{DynamicResource AppleMenuItemSelectedTextColor}"
             UnselectedTabColor="{DynamicResource AppleMenuItemTextColor}"

[HBNEXTAdmin]

I've run into this issue as well. When will this be fixed?