(Un)SelectedTabColor do not work for TabbedPage icons (FontImageSource) on iOS

[tranb3r]

Description

When using a font (FontImageSource) for tab icon, TabbedPage does not apply (Un)SelectedTabColor properties, on iOS.
However, the colors are properly applied to tab titles.
Also, no issue when using an image (png) for the icon.
No issue on Android.

On this example, Tab1 uses an image, Tab2 uses a font:

Similar issues:
#6043
#6718
xamarin/Xamarin.Forms#8556

Steps to Reproduce

1. Create a maui app, both for android and ios
2. Add a TabbedPage, and use either image or font for tab icons.
3. Set (Un)SelectedTabColor properties on TabbedPage
4. Observe colors, both on android and ios, both for image and font icons.

Link to public reproduction project repository

https://github.com/tranb3r/Issues/tree/main/MauiAppTabbedPageIconColor

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16.1

Did you find any workaround?

Use an image instead of a font.

Relevant log output

No response

[JoacimWall]

Hi
My workaround for this adding this to the AppShell.Xml.cs

 protected override void OnNavigated(ShellNavigatedEventArgs args)
    {
        if (args.Source == ShellNavigationSource.ShellSectionChanged)
        {
            if (DeviceInfo.Platform != DevicePlatform.iOS)
                return;

            for (int i = 0; i < MyTabbar.Items.Count; i++)
            {
                var img = (FontImageSource)MyTabbar.Items[i].Icon;
                bool isCurrentPage = MyTabbar.CurrentItem == MyTabbar.Items[i] ? true : false;
                MyTabbar.Items[i].Icon = new FontImageSource { Glyph = img.Glyph, FontFamily = img.FontFamily, Size = 20, Color = isCurrentPage ? AppColors.SignalBlueColor : AppColors.WhiteColor };

            }
        }
       
         base.OnNavigated(args);
    }

//Regards Joacim

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

[tranb3r]

That's not a shell issue. It's happening with TabbedPage.

[alanhoman]

I am having the exact same issue. This is working properly in Xamarin but broken in Maui for iOS.

[BenderRodr1guez]

Quite the same issue.
Setup: tabbed page as the main app's page, each tab is a navigation page, svg images
Next style doesn't work:

but, I see that all those properties have default values (just override property changed method, for ex.).
So, I assigned colors directly in the xaml of the tabbed page and oh my goodness, it's works.

[Zhanglirong-Winnie]

Verified this issue with Visual Studio Enterprise 17.7.0 Preview 2.0. Can repro on iOS platform with sample project.
Issues-main.zip

[Yves-Be]

I came up with this elegant solution for the TabbedPage.

public class CustomTabbedPage : TabbedPage
{
    protected override void OnPagesChanged(NotifyCollectionChangedEventArgs e)
    {
        base.OnPagesChanged(e);

        if (e.Action == NotifyCollectionChangedAction.Add)
        {
            foreach (var page in e.NewItems.OfType<Page>())
            {
                FixSelectedIconColoriOS(page);
            }
        }
    }

    protected void FixSelectedIconColoriOS(Page page)
    {
        if (DeviceInfo.Platform == DevicePlatform.iOS && page.IconImageSource is FontImageSource fontImageSource)
        {
            page.IconImageSource = new FontImageSource()
            {
                Glyph = fontImageSource.Glyph,
                FontFamily = fontImageSource.FontFamily,
                Size = fontImageSource.Size,
                Color = UnselectedTabColor
            };
            var selectedPageStyle = new Style(typeof(Page)) { ApplyToDerivedTypes = true };
            selectedPageStyle.Triggers.Add(new DataTrigger(typeof(Page))
            {
                Binding = new Binding(nameof(CurrentPage), source: this),
                Value = page,
                Setters = {{
                Page.IconImageSourceProperty,
                    new FontImageSource()
                    {
                        Glyph = fontImageSource.Glyph,
                        FontFamily = fontImageSource.FontFamily,
                        Size = fontImageSource.Size,
                        Color = SelectedTabColor
                    }
                }}
            });
            page.Style = selectedPageStyle;
        }
    }
}

[juniorsaraviao]

Still an issue using Net-MAUI 8.0.100 on iOS

[JohnTraDolta]

As a workaround you can implement a CustomHandler and paint the imagesource yourself as such:

public class ShellTabBar : ShellTabBarAppearanceTracker
{
    public override void SetAppearance(UITabBarController controller, ShellAppearance appearance)
    {
        var unselectedColor = appearance.TabBarUnselectedColor.ToPlatform();
        var selectedColor = appearance.TabBarTitleColor.ToPlatform();
        
        for (var i = 0; i < controller.TabBar.Items?.Length; i++)
        {
            var uiImage = controller.TabBar.Items[i].Image;
            

            var unselectedImage = uiImage.ApplyTintColor(unselectedColor , UIImageRenderingMode.AlwaysTemplate);
            var selectedImage = uiImage.ApplyTintColor(selectedColor, UIImageRenderingMode.AlwaysOriginal);
            controller.TabBar.Items[i].SetFinishedImages(selectedImage, unselectedImage);

        }

        base.SetAppearance(controller, appearance);
        
    }
}
class CustomShellHandler : ShellRenderer
{
    protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
    {
        return new ShellTabBar();
    }
}

Have no clue on what UIImageRenderingMode should be. So there is a issue to google 😉