Xamarin Forms：如何为TabbedPage设置全局共用标题？

我明白你遇到的困扰了——Xamarin.Forms里直接设置TabbedPage的Title属性，在很多场景下并不会显示出你想要的顶部共用标题。这是因为TabbedPage的Title属性在不同平台的表现不一致，而且默认情况下它并不会自动在标签栏上方生成一个全局标题栏。下面给你几个实用的解决方案，按需选择：

方案1：用NavigationPage嵌套TabbedPage（最简单通用） #

如果你不介意引入导航栈，这是最省事的方法。NavigationPage的导航栏会自动显示标题，TabbedPage的标签栏则在导航栏下方。

实现步骤： #

当你导航到MyTabbedPage的时候，用NavigationPage包裹它，并设置NavigationPage的Title：

// 示例：在其他页面跳转时使用
await Navigation.PushAsync(new NavigationPage(new MyTabbedPage(true)) 
{ 
    Title = "你的全局标题" 
});

如果不想显示返回按钮，可以在MyTabbedPage的构造函数里添加一行：

public MyTabbedPage(bool value)
{
    InitializeComponent();
    // 隐藏返回按钮
    NavigationPage.SetHasBackButton(this, false);

    Children.Add(new Topics());
    Children.Add(new Group());
    Children.Add(new Menu());
}

方案2：自定义TabbedPage的Header（无导航栈需求） #

如果你不需要导航功能，只想在TabbedPage的标签栏上方添加一个自定义标题栏，可以直接利用TabbedPage.Header属性来实现，样式完全由你控制。

修改MyTabbedpage.xaml： #

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:Myapp;assembly=Myapp"
            BarBackgroundColor="#1C7DB4"
            BarTextColor="White"
            x:Class="Myapp.MyTabbedPage">

    <!-- 自定义顶部标题栏 -->
    <TabbedPage.Header>
        <StackLayout 
            BackgroundColor="#1C7DB4" 
            Padding="15" 
            HeightRequest="50"
            HorizontalOptions="FillAndExpand">
            <Label 
                Text="你的全局标题" 
                TextColor="White" 
                FontSize="Large" 
                HorizontalOptions="Center"
                VerticalOptions="Center"/>
        </StackLayout>
    </TabbedPage.Header>

</TabbedPage>

这样标签栏上方就会出现一个和标签栏背景色一致的标题栏，你可以根据需求调整背景色、字体、内边距等样式。

方案3：平台自定义渲染器（追求原生效果） #

如果想要让TabbedPage本身的Title属性生效，适配原生平台的标题显示逻辑，可以通过自定义渲染器实现。以Android为例：

在Android项目中创建渲染器： #

using Android.Content;
using Myapp;
using Myapp.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(MyTabbedPage), typeof(MyTabbedPageRenderer))]
namespace Myapp.Droid
{
    public class MyTabbedPageRenderer : TabbedPageRenderer
    {
        public MyTabbedPageRenderer(Context context) : base(context)
        {
        }

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

            if (e.NewElement != null)
            {
                // 启用ActionBar并设置标题
                var actionBar = ((MainActivity)Context).SupportActionBar;
                if (actionBar != null)
                {
                    actionBar.Title = e.NewElement.Title;
                    actionBar.SetDisplayShowTitleEnabled(true);
                }
            }
        }
    }
}

在MyTabbedPage构造函数中设置Title： #

public MyTabbedPage(bool value)
{
    InitializeComponent();
    // 设置标题
    Title = "你的全局标题";

    Children.Add(new Topics());
    Children.Add(new Group());
    Children.Add(new Menu());
}

iOS平台的实现逻辑类似，只需创建对应的自定义渲染器修改NavigationItem.Title即可。

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