Xamarin.Forms NavigationPage.TitleView标题因返回按钮偏移无法居中如何解决

NavigationPage.TitleView默认的可用布局区域是系统自动扣除左侧返回按钮、右侧工具栏按钮占位后的剩余空间。直接在该空间内对Label设置居中，实际是在左右按钮之间的区域居中，而非整个导航栏全局居中，当左右按钮宽度不一致时，就会出现标题偏移问题。

方案1：纯XAML快速实现（优先尝试） #

给TitleView的根容器设置平台适配的左右负边距，抵消系统默认预留的内边距，让容器撑满整个导航栏宽度，再将标题放在容器正中间即可。
将原有NavigationPage.TitleView部分替换为以下代码：

<NavigationPage.TitleView>
    <Grid HorizontalOptions="FillAndExpand"
          VerticalOptions="FillAndExpand">
        <Grid.Margin>
            <OnPlatform x:TypeArguments="Thickness">
                <!-- 安卓默认左右内边距为16，用负边距抵消 -->
                <On Platform="Android" Value="-16,0,-16,0"/>
                <!-- iOS默认左右内边距为8，用负边距抵消 -->
                <On Platform="iOS" Value="-8,0,-8,0"/>
            </OnPlatform>
        </Grid.Margin>
        <Label Text="Préférences"
               HorizontalOptions="Center"
               VerticalOptions="Center"/>
    </Grid>
</NavigationPage.TitleView>

如果测试后存在细微偏移，可微调OnPlatform中的边距数值适配你当前使用的Xamarin.Forms版本。

方案2：自定义渲染器实现（全场景适配） #

如果纯XAML方案在你的项目中不生效，可以通过平台自定义渲染器直接修改原生导航栏布局规则，让TitleView默认撑满导航栏全宽，从根源解决偏移问题。

安卓端实现 #

在安卓平台项目中新建自定义页面渲染器，代码如下：

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

// 将命名空间替换为你自己的安卓项目命名空间
[assembly: ExportRenderer(typeof(ContentPage), typeof(FullWidthTitleViewRenderer))]
namespace YourApp.Droid.Renderers
{
    public class FullWidthTitleViewRenderer : PageRenderer
    {
        public FullWidthTitleViewRenderer(Context context) : base(context)
        {
        }

        protected override void OnLayout(bool changed, int l, int t, int r, int b)
        {
            base.OnLayout(changed, l, t, r, b);
            // 移除导航栏Toolbar默认的内容边距
            var toolbar = FindViewById<AndroidX.AppCompat.Widget.Toolbar>(Resource.Id.toolbar);
            if (toolbar != null)
            {
                toolbar.SetContentInsetsAbsolute(0, 0);
                toolbar.SetPadding(0, toolbar.PaddingTop, 0, toolbar.PaddingBottom);
            }
        }
    }
}

iOS端实现 #

在iOS平台项目中新建自定义页面渲染器，代码如下：

using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

// 将命名空间替换为你自己的iOS项目命名空间
[assembly: ExportRenderer(typeof(ContentPage), typeof(FullWidthTitleViewRenderer))]
namespace YourApp.iOS.Renderers
{
    public class FullWidthTitleViewRenderer : PageRenderer
    {
        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);
            if (NavigationController == null) return;
            
            var navigationBar = NavigationController.NavigationBar;
            foreach (var subview in navigationBar.Subviews)
            {
                if (subview.Class.Name != "UINavigationBarContentView") continue;
                
                foreach (var titleView in subview.Subviews)
                {
                    // 修改TitleView约束，使其撑满导航栏全宽
                    titleView.TranslatesAutoresizingMaskIntoConstraints = false;
                    titleView.LeadingAnchor.ConstraintEqualTo(subview.LeadingAnchor, 0).Active = true;
                    titleView.TrailingAnchor.ConstraintEqualTo(subview.TrailingAnchor, 0).Active = true;
                    titleView.CenterYAnchor.ConstraintEqualTo(subview.CenterYAnchor).Active = true;
                    break;
                }
                break;
            }
        }
    }
}

• 使用自定义渲染器时，记得将代码中的命名空间替换为你自己项目的实际命名空间。
• 如果页面右侧有多个工具栏按钮，担心标题与按钮重叠，可以给居中的Label设置左右各48的Padding（与系统导航按钮宽度一致），不会影响全局居中效果。

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