如何在导航页面的标题上应用自定义字体？

Question

我正在使用适用于 Android、iOS 和 UWP 的 Xamarin.Forms 开发一个多平台应用程序。其中一项要求是在所有页面的标题上应用公司自定义字体，这些页面是 NavigationPage 的实例。我已经让这个适用于 iOS，但我无法让它适用于 Android 或 UWP。 我所做的是为每个平台创建自定义渲染器。对于 iOS，这是使用以下代码：

using System.ComponentModel;
using UIKit;
using MyNameSpace.iOS.Renderers
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRendererAttribute(typeof(NavigationPage), typeof(MyNavigationPageRenderer))]
namespace MyNameSpace.iOS.Renderers
{
    public class MyNavigationPageRenderer : NavigationRenderer
    {
        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);

            var page = this.Element as NavigationPage;
            if (page == null) return;

            this.NavigationBar.TitleTextAttributes = new UIStringAttributes
            {
                Font = UIFont.FromName("MyFont", 18),
                ForegroundColor = page.BarTextColor.ToUIColor()
            };
        }
    }
}

我知道如何在 Android 和 UWP 平台的 OnElementChanged 方法中获取正确的字体，但我该如何应用它们？我找不到要设置的属性。

Answer 1

我可以部分回答我自己的问题。对于 Android，Java 中有很多解决方案，将它们翻译成 Xamarin 并不总是那么容易。但是我找到了一个合理且易于理解的解决方案，基于Getting ActionBar Title TextView with AppCompat v7 r21。

首先，在 Resources/layout/toolbar.axml 中添加一个 TextView：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|enterAlways">

  <TextView
        style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Toolbar Title"
        android:gravity="center_vertical"
        android:id="@+id/toolbar_title" />

</android.support.v7.widget.Toolbar>

然后创建一个自定义的 NavigationPage 渲染器：

using System;
using System.ComponentModel;
using Android.Graphics;
using Android.Widget;
using MyNameSpace.Droid.Renderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;
using Support = Android.Support.V7.Widget;


[assembly: ExportRenderer(typeof(NavigationPage), typeof(MyNavigationPageRenderer))]
namespace MyNameSpace.Droid.Renderers
{
    public class MyNavigationPageRenderer : NavigationPageRenderer
    {
        private Support.Toolbar _toolbar;

        public override void OnViewAdded(Android.Views.View child)
        {
            base.OnViewAdded(child);

            if (child.GetType() == typeof(Support.Toolbar))
                _toolbar = (Support.Toolbar)child;
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            var page = this.Element as NavigationPage;

            if (page != null && _toolbar != null)
            {
                Typeface tf = Typeface.CreateFromAsset(Android.App.Application.Context.Assets, "MyFont.ttf");

                TextView title = (TextView)_toolbar.FindViewById(Resource.Id.toolbar_title);
                title.SetText(page.CurrentPage.Title, TextView.BufferType.Normal);
                title.SetTypeface(tf, TypefaceStyle.Normal);
            }

        }

    }
}

在 OnViewAdded 事件中，我们获得了对工具栏的引用。在 OnElementPropertyChanged 事件中，我们从资产中获取自定义字体，并使用 FindViewById() 检索定义的 TextView。然后我们可以设置Toolbar的Textview的Title和Typeface（字体）。

到目前为止一切顺利。任何人都想在 UWP 项目中实现相同的想法？