Xamarin.Forms如何实现标签页标签的圆角背景色（选中态效果）

要实现选中Tab时标签背景变成圆角、自定义背景色的效果，因为Xamarin.Forms原生的TabbedPage默认样式不够灵活，我们需要通过自定义渲染器针对iOS和Android分别处理，或者使用更灵活的自定义Tab组件。下面分两种方案详细说明：

方案一：使用自定义渲染器（原生平台定制） #

这种方式能精准控制每个平台的Tab样式，完全匹配你的设计需求。

1. 先定义一个自定义TabbedPage #

在共享项目中创建一个继承自TabbedPage的类，方便后续渲染器识别，还能自定义可绑定属性来控制样式：

public class CustomTabbedPage : TabbedPage
{
    // 选中Tab的背景色
    public static readonly BindableProperty SelectedTabBackgroundColorProperty =
        BindableProperty.Create(nameof(SelectedTabBackgroundColor), typeof(Color), typeof(CustomTabbedPage), Color.White);

    public Color SelectedTabBackgroundColor
    {
        get => (Color)GetValue(SelectedTabBackgroundColorProperty);
        set => SetValue(SelectedTabBackgroundColorProperty, value);
    }

    // Tab圆角半径
    public static readonly BindableProperty TabCornerRadiusProperty =
        BindableProperty.Create(nameof(TabCornerRadius), typeof(double), typeof(CustomTabbedPage), 8.0);

    public double TabCornerRadius
    {
        get => (double)GetValue(TabCornerRadiusProperty);
        set => SetValue(TabCornerRadiusProperty, value);
    }
}

2. Android平台自定义渲染器 #

在Android项目中创建渲染器，修改BottomNavigationView的Tab样式：

[assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))]
namespace YourAppName.Droid.Renderers
{
    public class CustomTabbedPageRenderer : TabbedPageRenderer
    {
        public CustomTabbedPageRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement is CustomTabbedPage customTabbedPage && View is BottomNavigationView bottomNav)
            {
                // 遍历每个Tab项，设置选中/未选中状态的背景
                for (int i = 0; i < bottomNav.Menu.Size(); i++)
                {
                    var menuItem = bottomNav.Menu.GetItem(i);
                    var itemView = bottomNav.FindViewById<BottomNavigationItemView>(menuItem.ItemId);
                    if (itemView != null)
                    {
                        // 创建带圆角的状态背景：选中时显示彩色圆角，未选中时透明
                        var selectedDrawable = CreateRoundedStateDrawable(customTabbedPage.SelectedTabBackgroundColor.ToAndroid(), (float)customTabbedPage.TabCornerRadius);
                        itemView.SetBackground(selectedDrawable);
                    }
                }
            }
        }

        private StateListDrawable CreateRoundedStateDrawable(Android.Graphics.Color color, float cornerRadius)
        {
            var roundedDrawable = new GradientDrawable();
            roundedDrawable.SetColor(color);
            roundedDrawable.SetCornerRadius(cornerRadius);

            var stateList = new StateListDrawable();
            // 选中状态显示圆角背景
            stateList.AddState(new int[] { Android.Resource.Attribute.StateSelected }, roundedDrawable);
            // 默认状态透明
            stateList.AddState(new int[] { }, new ColorDrawable(Android.Graphics.Color.Transparent));
            return stateList;
        }
    }
}

3. iOS平台自定义渲染器 #

在iOS项目中创建渲染器，修改UITabBar的Tab样式：

[assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))]
namespace YourAppName.iOS.Renderers
{
    public class CustomTabbedPageRenderer : TabbedRenderer
    {
        private CustomTabbedPage _customTabbedPage;

        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);
            _customTabbedPage = Element as CustomTabbedPage;

            if (TabBar?.Items == null) return;

            foreach (var tabBarItem in TabBar.Items)
            {
                // 自定义选中时的背景视图，设置圆角
                var selectedBackground = new UIView();
                selectedBackground.BackgroundColor = _customTabbedPage.SelectedTabBackgroundColor.ToUIColor();
                selectedBackground.Layer.CornerRadius = (nfloat)_customTabbedPage.TabCornerRadius;
                selectedBackground.ClipsToBounds = true;
                tabBarItem.SelectedBackgroundView = selectedBackground;

                // 确保Tab图标颜色不受系统默认样式影响
                tabBarItem.SelectedImage = tabBarItem.SelectedImage?.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
                tabBarItem.Image = tabBarItem.Image?.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
            }
        }
    }
}

4. 在XAML中使用自定义TabbedPage #

<local:CustomTabbedPage 
    SelectedTabBackgroundColor="#FFFFFF"
    TabCornerRadius="8"
    xmlns:local="clr-namespace:YourAppName">
    <ContentPage Title="MVETab">
        <!-- 页面内容 -->
    </ContentPage>
    <ContentPage Title="OtherTab">
        <!-- 页面内容 -->
    </ContentPage>
</local:CustomTabbedPage>

方案二：使用Xamarin Community Toolkit的TabView #

如果你不想写原生渲染器，可以用Xamarin Community Toolkit提供的TabView组件，它自带更灵活的样式定制能力，纯XAML就能实现需求：

1. 安装NuGet包 #

在共享项目中安装Xamarin.CommunityToolkit包。

2. 在XAML中配置TabView #

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="YourAppName.TabViewPage">
    <xct:TabView 
        TabStripPlacement="Bottom"
        TabStripBackgroundColor="#F0F0F0"
        TabStripHeight="60">
        <xct:TabViewItem 
            Title="MVETab"
            TextColor="#666666"
            TextColorSelected="#000000">
            <xct:TabViewItem.TabStripItemTemplate>
                <DataTemplate>
                    <Frame 
                        BackgroundColor="{Binding IsSelected, Converter={xct:BooleanConverter TrueValue=White, FalseValue=Transparent}}"
                        CornerRadius="8"
                        Padding="16,8">
                        <Label 
                            Text="{Binding Title}"
                            TextColor="{Binding TextColorSelected, Source={RelativeSource AncestorType={x:Type xct:TabViewItem}}}" />
                    </Frame>
                </DataTemplate>
            </xct:TabViewItem.TabStripItemTemplate>
            <!-- Tab内容区域 -->
            <StackLayout>
                <Label Text="MVE Tab Content" />
            </StackLayout>
        </xct:TabViewItem>
        <xct:TabViewItem Title="OtherTab">
            <!-- 同样配置TabStripItemTemplate实现一致样式 -->
            <xct:TabViewItem.TabStripItemTemplate>
                <DataTemplate>
                    <Frame 
                        BackgroundColor="{Binding IsSelected, Converter={xct:BooleanConverter TrueValue=White, FalseValue=Transparent}}"
                        CornerRadius="8"
                        Padding="16,8">
                        <Label 
                            Text="{Binding Title}"
                            TextColor="{Binding TextColorSelected, Source={RelativeSource AncestorType={x:Type xct:TabViewItem}}}" />
                    </Frame>
                </DataTemplate>
            </xct:TabViewItem.TabStripItemTemplate>
            <StackLayout>
                <Label Text="Other Tab Content" />
            </StackLayout>
        </xct:TabViewItem>
    </xct:TabView>
</ContentPage>

这种方式无需写原生代码，通过XAML就能快速实现选中时的圆角背景效果，非常适合快速开发。

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