如何用Community Toolkit的TabView重现Tab设计？排查TabbedPage渲染器失效问题

一、排查原自定义渲染器无效果的常见原因 #

• 渲染器注册错误：Android项目的ExtendedTabbedPageRenderer类顶部必须添加正确的注册属性，确保Shared项目的自定义TabbedPage类型与渲染器绑定正确，示例：

  [assembly: ExportRenderer(typeof(YourSharedNamespace.ExtendedTabbedPage), typeof(YourAndroidNamespace.ExtendedTabbedPageRenderer))]
  namespace YourAndroidNamespace
  {
      public class ExtendedTabbedPageRenderer : TabbedPageRenderer
      {
          // 渲染器逻辑
      }
  }
  

  注意两个typeof的命名空间必须完全匹配，不能写错。
• 生命周期方法未正确重写：如果使用Xamarin.Forms 5.x及以上版本，需确保重写OnElementChanged方法并调用基类实现，同时在元素变更时重新初始化下划线逻辑，避免遗漏关键生命周期节点。
• 下划线绘制逻辑错误：检查渲染器中是否正确计算了选中Tab的位置，比如在OnLayout或OnDraw方法中，是否获取到了Tab栏的实际尺寸、选中Tab的边界，以及是否正确设置了下划线的Paint（颜色、宽度）和绘制坐标。
• 未使用自定义TabbedPage：确认Shared项目的页面中引用的是你自定义的ExtendedTabbedPage，而非原生TabbedPage，比如XAML中需添加命名空间引用并使用<local:ExtendedTabbedPage>。

二、改用Community Toolkit TabView实现下划线效果 #

步骤1：安装NuGet包 #

在Shared项目、Android项目、iOS项目中均安装Xamarin.CommunityToolkit NuGet包。

步骤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="YourAppNamespace.MainPage">
    <!-- 资源定义 -->
    <ContentPage.Resources>
        <!-- 布尔值转颜色转换器 -->
        <xct:BoolToObjectConverter x:Key="BoolToColorConverter" 
                                   TrueObject="#007AFF" 
                                   FalseObject="#999999" />
        <!-- 布尔值转透明度转换器 -->
        <xct:BoolToObjectConverter x:Key="BoolToOpacityConverter" 
                                   TrueObject="1" 
                                   FalseObject="0.6" />
        <!-- Tab头部项样式 -->
        <Style TargetType="xct:TabViewHeaderItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid>
                            <VerticalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
                                <Image Source="{TemplateBinding IconImageSource}"
                                       WidthRequest="24" HeightRequest="24"
                                       Opacity="{TemplateBinding IsSelected, Converter={StaticResource BoolToOpacityConverter}}" />
                                <Label Text="{TemplateBinding Header}"
                                       FontSize="12"
                                       TextColor="{TemplateBinding IsSelected, Converter={StaticResource BoolToColorConverter}}" />
                            </VerticalStackLayout>
                            <!-- 选中状态下划线 -->
                            <BoxView HeightRequest="2" 
                                     BackgroundColor="#007AFF"
                                     VerticalOptions="End"
                                     IsVisible="{TemplateBinding IsSelected}"
                                     Margin="0,0,0,2" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ContentPage.Resources>

    <!-- TabView主体 -->
    <xct:TabView>
        <xct:TabViewItem Header="首页" IconImageSource="home_icon.png">
            <ContentPage Title="首页">
                <!-- 首页内容 -->
                <Label Text="首页页面" HorizontalOptions="Center" VerticalOptions="Center" />
            </ContentPage>
        </xct:TabViewItem>
        <xct:TabViewItem Header="消息" IconImageSource="message_icon.png">
            <ContentPage Title="消息">
                <!-- 消息页面内容 -->
                <Label Text="消息页面" HorizontalOptions="Center" VerticalOptions="Center" />
            </ContentPage>
        </xct:TabViewItem>
        <!-- 可添加更多Tab项 -->
    </xct:TabView>
</ContentPage>

步骤3：自定义样式调整 #

可以根据需求修改下划线的颜色、高度、边距，以及Tab项的文字大小、图标尺寸等，无需依赖平台自定义渲染器，跨平台效果一致。

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