Custom Font pour Android et UWP

• Android
• Font
• Xamarin
• Xamarin Forms

Ce n'est sans doute pas la seule manière de faire, et ce n'est peut être pas la meilleure non plus... Mais je vais vous présenter un moyen assez facile et rapide à mettre en oeuvre pour appliquer une Font sur un Label à l'aide de custom control et custom renderer.

---

Dans cet exemple, j'ai décidé d'utiliser une Font native pour UWP ('Century Gothic') et d'ajouter une Font pour le projet Android ('Poppins Light').

Pour le premier, rien à faire. Pour le second, il faudra ajouter le fichier Poppins-Light.ttf dans le dossier Assets/Fonts du projet Android.

Création d'un custom control

Dans le projet principal, nous allons créer une classe Entry.cs qui étendra l'objet Entry de Xamarin Forms.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using XF = Xamarin.Forms;

namespace MyProject.Views.CustomControls
{
    public class Label : XF.Label
    {
        #region Font Name Property
        public string FontName
        {
            get
            {
                if (Device.RuntimePlatform == Device.Android)
                {
                    return "Fonts/Poppins-Light.ttf";
                }
                return "Century Gothic";
            }
        }
        #endregion
    }
}

Renderer dans Android

Nous allons créer une classe LabelRenderer.cs dans un dossier Renderers du projet Android, afin d'appliquer la font.

using Android.Graphics;
using MyProject.Droid.Renderers;
using Xamarin.Forms;
using AD = Xamarin.Forms.Platform.Android;
using TI = MyProject.Views.CustomControls;
using XF = Xamarin.Forms;

[assembly: ExportRenderer(typeof(TI.Label), typeof(LabelRenderer))]

namespace MyProject.Droid.Renderers
{
    public class LabelRenderer : AD.LabelRenderer
    {
        protected override void OnElementChanged(AD.ElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                if (e.NewElement is TI.Label elt)
                {
                    Control.Typeface = Typeface.CreateFromAsset(Forms.Context.Assets, elt.FontName);
                }
            }
        }
    }
}

Renderer dans UWP

Comme pour Android, il faut créer une classe LabelRenderer.cs dans un dossier Renderers.

using MyProject.UWP.Renderers;
using Windows.UI.Xaml.Media;
using TI = MyProject.Views.CustomControls;
using WP = Xamarin.Forms.Platform.UWP;
using XF = Xamarin.Forms;

[assembly: WP.ExportRenderer(typeof(TI.Label), typeof(LabelRenderer))]
namespace MyProject.UWP.Renderers
{
    public class LabelRenderer : WP.LabelRenderer
    {
        protected override void OnElementChanged(WP.ElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (Control != null && e.NewElement != null)
            {
                if (e.NewElement is TI.Label elt)
                {
                    Control.FontFamily = new FontFamily(elt.FontName);
                }
            }
        }
    }
}

• Partager sur