如何在MAUI Shell中保留TabBar图标的原始颜色

Android 平台实现 #

• 自定义IShellBottomNavViewAppearanceTracker实现类，覆盖底部导航栏的图标着色逻辑：
  1. 创建CustomBottomNavViewAppearanceTracker类，实现IShellBottomNavViewAppearanceTracker接口
  2. 在SetAppearance方法中关闭自动着色，可选设置选中项背景高亮：

     public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
     {
         // 关闭选中/未选中图标的自动着色，保留原始颜色
         bottomView.ItemIconTintList = null;
         // 可选：设置选中项的背景高亮（需提前在Resources/drawable下创建对应的背景资源）
         bottomView.ItemBackgroundResource = Resource.Drawable.tab_selected_bg;
     }
     

  3. 在MauiProgram.cs中注册自定义实现：

     builder.Services.AddSingleton<IShellBottomNavViewAppearanceTracker, CustomBottomNavViewAppearanceTracker>();
     

  4. 若要为选中/未选中使用不同图标，可遍历菜单项手动设置：

     foreach (var menuItem in bottomView.Menu.MenuItems.Cast<IMenuItem>())
     {
         menuItem.SetIcon(Resource.Drawable.icon_unselected);
         menuItem.SetCheckedIcon(Resource.Drawable.icon_selected);
     }
     

Windows 平台实现 #

• 自定义IShellTabBarAppearanceTracker实现类，修改TabBar图标渲染逻辑：
  1. 创建CustomShellTabBarAppearanceTracker类，实现IShellTabBarAppearanceTracker接口
  2. 在UpdateLayout方法中关闭图标单色渲染，可选设置选中项背景：

     public void UpdateLayout(Shell shell, ShellTabBarAppearance appearance)
     {
         if (shell.CurrentItem?.Handler?.PlatformView is FrameworkElement rootElement)
         {
             var tabView = rootElement.FindDescendant<TabView>();
             if (tabView != null)
             {
                 // 关闭单色渲染，保留图标原始颜色
                 foreach (var tab in tabView.TabItems)
                 {
                     if (tab.Icon is BitmapIcon bitmapIcon)
                     {
                         bitmapIcon.ShowAsMonochrome = false;
                     }
                 }
                 // 可选：设置选中项背景高亮
                 tabView.SelectedTabBackgroundColor = Colors.LightSkyBlue;
             }
         }
     }
     

  3. 在MauiProgram.cs中注册自定义实现：

     builder.Services.AddSingleton<IShellTabBarAppearanceTracker, CustomShellTabBarAppearanceTracker>();
     

  4. 快速实现不同状态图标，可直接在XAML的Tab项中配置：

     <Tab Title="首页" Icon="home_unselected.png" SelectedIcon="home_selected.png">
         <!-- 页面内容 -->
     </Tab>
     

通用注意事项 #

• 确保图标资源在对应平台目录正确放置：Android放Resources/drawable，Windows放Resources/Images
• Android的背景高亮需提前创建drawable资源（如圆角矩形背景文件）

内容的提问来源于stack exchange，提问作者Serg Tomcat