.NET MAUI中如何在iOS和Android上动态居中ContentPage标题

以下是几种无需为每个页面重复配置标题内容的动态实现方案，解决Android平台标题默认居左的问题：

方案一：Android端全局自定义Shell渲染器 #

直接修改Android平台的Shell标题默认布局逻辑，让标题自动居中，iOS保持默认居中行为，全程无需页面级配置。

在Android项目中创建自定义Shell渲染器：

using Android.Content;
using Android.Views;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(Shell), typeof(CustomShellRenderer))]
namespace YourAppName.Droid.Renderers
{
    public class CustomShellRenderer : ShellRenderer
    {
        public CustomShellRenderer(Context context) : base(context)
        {
        }

        protected override IShellToolbarAppearanceTracker CreateToolbarAppearanceTracker()
        {
            return new CustomShellToolbarAppearanceTracker(this);
        }
    }

    public class CustomShellToolbarAppearanceTracker : ShellToolbarAppearanceTracker
    {
        public CustomShellToolbarAppearanceTracker(IShellContext context) : base(context)
        {
        }

        public override void SetAppearance(Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance)
        {
            base.SetAppearance(toolbar, toolbarTracker, appearance);
            
            // 遍历Toolbar子控件，找到标题TextView并设置居中
            for (int i = 0; i < toolbar.ChildCount; i++)
            {
                var child = toolbar.GetChildAt(i);
                if (child is Android.Widget.TextView titleTextView)
                {
                    titleTextView.Gravity = GravityFlags.Center;
                    // 可选：调整内边距避免标题被返回按钮遮挡
                    titleTextView.SetPadding(0, 0, 0, 0);
                }
            }
        }
    }
}

添加后所有页面的Android端标题会自动居中，无需额外操作。

方案二：全局绑定Title属性的Shell.TitleView模板 #

在AppShell中定义全局TitleView模板，绑定到当前页面的Title属性，后续每个页面只需设置自身Title即可自动同步标题内容。

修改AppShell.xaml：

<Shell ...>
    <Shell.TitleView>
        <OnPlatform x:TypeArguments="View">
            <!-- iOS保留默认标题布局，无需自定义 -->
            <On Platform="iOS" Value="{x:Null}" />
            <!-- Android使用绑定的居中标题布局 -->
            <On Platform="Android">
                <Grid VerticalOptions="Center" HorizontalOptions="FillAndExpand">
                    <Label Text="{Binding Title, Source={RelativeSource AncestorType={x:Type ContentPage}}}"
                           TextColor="White"
                           HorizontalOptions="Center"
                           FontFamily="poppins500"
                           FontSize="16" />
                </Grid>
            </On>
        </OnPlatform>
    </Shell.TitleView>

    <!-- 你的Shell导航内容（FlyoutItem、TabBar等） -->
</Shell>

之后页面只需设置Title属性即可：

<ContentPage Title="Sign Up" ...>
    <!-- 页面内容 -->
</ContentPage>

该方案支持统一自定义标题样式，且全局生效，无需重复编写TitleView代码。

方案三：附加属性实现按需配置标题居中 #

如果仅需部分页面设置居中标题，可通过附加属性实现灵活配置，不影响全局默认行为。

1. 创建附加属性类：

using Xamarin.Forms;

namespace YourAppName.Helpers
{
    public static class TitleCenterHelper
    {
        public static readonly BindableProperty IsTitleCenteredProperty =
            BindableProperty.CreateAttached("IsTitleCentered", typeof(bool), typeof(TitleCenterHelper), false, propertyChanged: OnIsTitleCenteredChanged);

        public static bool GetIsTitleCentered(BindableObject view)
        {
            return (bool)view.GetValue(IsTitleCenteredProperty);
        }

        public static void SetIsTitleCentered(BindableObject view, bool value)
        {
            view.SetValue(IsTitleCenteredProperty, value);
        }

        private static void OnIsTitleCenteredChanged(BindableObject bindable, object oldValue, object newValue)
        {
            if (bindable is ContentPage page && (bool)newValue)
            {
                page.TitleView = new Grid
                {
                    VerticalOptions = LayoutOptions.Center,
                    HorizontalOptions = LayoutOptions.FillAndExpand,
                    Children =
                    {
                        new Label
                        {
                            Text = page.Title,
                            TextColor = Color.White,
                            HorizontalOptions = LayoutOptions.Center,
                            FontFamily = "poppins500",
                            FontSize = 16
                        }
                    }
                };
            }
        }
    }
}

2. 在需要居中标题的页面使用：

<ContentPage xmlns:helpers="clr-namespace:YourAppName.Helpers"
             helpers:TitleCenterHelper.IsTitleCentered="True"
             Title="Sign Up" ...>
    <!-- 页面内容 -->
</ContentPage>

方案对比 #

• 自定义渲染器：全局自动生效，无需页面任何配置，适合所有页面统一标题样式的场景。
• 全局TitleView模板：灵活性高，支持统一自定义标题样式，只需设置页面Title即可。
• 附加属性：适合部分页面特殊处理的场景，不干扰全局设置。

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