.NET MAUI TabbedPage主题颜色自定义：区分选中与未选中标签

跨平台通用方案（视觉状态管理器） #

通过VisualStateManager为Tab标签定义选中、未选中状态的样式，实现跨平台的颜色区分：

XAML 实现 #

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.YourTabbedPage"
             BarBackgroundColor="{StaticResource DarkBackgroundColor}">
    <TabbedPage.Resources>
        <Style TargetType="Tab">
            <!-- 未选中状态样式 -->
            <Setter Property="TextColor" Value="#AAAAAA" />
            <Setter Property="IconColor" Value="#AAAAAA" />
            <!-- 选中状态触发样式 -->
            <Style.Triggers>
                <VisualStateTrigger VisualStateName="Selected">
                    <Setter Property="TextColor" Value="White" />
                    <Setter Property="IconColor" Value="White" />
                </VisualStateTrigger>
            </Style.Triggers>
        </Style>
    </TabbedPage.Resources>

    <!-- 子页面示例 -->
    <ContentPage Title="首页" IconImageSource="home.png" />
    <ContentPage Title="我的" IconImageSource="profile.png" />
</TabbedPage>

代码后台实现 #

public YourTabbedPage()
{
    InitializeComponent();
    BarBackgroundColor = UIHelper.DarkBackgroundColor;

    // 定义Tab基础样式（未选中状态）
    var tabStyle = new Style(typeof(Tab))
    {
        Setters =
        {
            new Setter { Property = Tab.TextColorProperty, Value = Color.FromArgb("#AAAAAA") },
            new Setter { Property = Tab.IconColorProperty, Value = Color.FromArgb("#AAAAAA") }
        }
    };

    // 配置选中状态样式
    var selectedState = new VisualState { Name = VisualStateManager.CommonStates.Selected };
    selectedState.Setters.Add(new Setter { Property = Tab.TextColorProperty, Value = Colors.White });
    selectedState.Setters.Add(new Setter { Property = Tab.IconColorProperty, Value = Colors.White });

    // 绑定视觉状态组
    var visualStateGroup = new VisualStateGroup();
    visualStateGroup.States.Add(selectedState);
    visualStateGroup.States.Add(new VisualState { Name = VisualStateManager.CommonStates.Normal });
    VisualStateManager.GetVisualStateGroups(tabStyle).Add(visualStateGroup);

    Resources.Add(tabStyle);
}

平台特定补充配置 #

如果跨平台方案在部分平台效果不达预期，可针对性配置：

Android #

修改Platforms/Android/Resources/values/styles.xml：

<style name="MyTheme" parent="Maui.SplashTheme">
    <item name="android:tabWidgetStyle">@style/MyTabBar</item>
</style>

<style name="MyTabBar" parent="Widget.MaterialComponents.TabLayout">
    <item name="tabTextColor">#AAAAAA</item>
    <item name="tabSelectedTextColor">@android:color/white</item>
    <item name="tabIconTint">@color/tab_icon_tint</item>
</style>

创建Resources/color/tab_icon_tint.xml颜色选择器：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#AAAAAA" android:state_selected="false" />
    <item android:color="@android:color/white" android:state_selected="true" />
</selector>

iOS #

在Platforms/iOS/AppDelegate.cs的FinishedLaunching方法中添加：

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    global::Xamarin.Forms.Forms.Init();
    LoadApplication(new App());

    // 配置TabBar颜色
    UITabBar.Appearance.UnselectedItemTintColor = UIColor.FromRGB(170,170,170);
    UITabBar.Appearance.TintColor = UIColor.White;

    return base.FinishedLaunching(app, options);
}

注意事项 #

• 确保子页面已设置Title和IconImageSource，否则样式无法生效
• 可替换示例中的颜色值为自定义需求色值
• 优先使用跨平台视觉状态方案，平台配置作为补充优化

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