[regression/8.0.3] Cannot control unselected text color of tabs within TabbedPage

[emily-curry]

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

[shuffsdev]

+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?

[LeoJHarris]

Unfortunately we are updating the BadgeValue property on the UITabBarItem and with these work arounds the badge number disappears when selecting tab items. Hoping this can be resolved soon.

[thomasgalliker]

If anyone else struggles with the same issue, I created custom renderers for iOS and Android TabbedPage. Have a look at it.

• The nuget: https://www.nuget.org/packages/Plugin.TabbedPage.Maui
• The source code: https://github.com/thomasgalliker/Plugin.TabbedPage.Maui

[NirmalKumarYuvaraj]

@emily-curry , The Issue is not reproduced in the latest version (v9.0.60).

Sample link - https://github.com/dotnet/maui-samples/tree/main/9.0/Navigation/TabbedPage

[dotnet-policy-service]

Hi @@emily-curry. We have added the "s/try-latest-version" label to this issue, which indicates that we'd like you to try and reproduce this issue on the latest available public version. This can happen because we think that this issue was fixed in a version that has just been released, or the information provided by you indicates that you might be working with an older version.

You can install the latest version by installing the latest Visual Studio (Preview) with the .NET MAUI workload installed. If the issue still persists, please let us know with any additional details and ideally a reproduction project provided through a GitHub repository.

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.