Xamarin.Forms
Fuentes personalizadas en estilos

Observaciones

Acceso a fuentes personalizadas en Syles

Xamarin.Forms proporciona un gran mecanismo para diseñar su aplicación multiplataforma con estilos globales.

En el mundo móvil, su aplicación debe ser bonita y sobresalir de las demás aplicaciones. Uno de estos caracteres son las fuentes personalizadas utilizadas en la aplicación.

Con la potencia de XAML Styling en Xamarin.Forms acaba de crear un estilo base para todas las etiquetas con sus fuentes personalizadas.

Para incluir fuentes personalizadas en su proyecto iOS y Android, siga la guía en Uso de fuentes personalizadas en iOS y Android con Xamarin.Forms publicado por Gerald.

Declare Style en la sección de recursos del archivo App.xaml. Esto hace que todos los estilos sean visibles globalmente.

Desde la publicación de Gerald anterior, necesitamos usar la propiedad StyleId pero no es una propiedad vinculable, así que para usarla en Style Setter necesitamos crear una propiedad adjuntada para ella:

public static class FontHelper
{
    public static readonly BindableProperty StyleIdProperty =
        BindableProperty.CreateAttached(
            propertyName: nameof(Label.StyleId),
            returnType: typeof(String),
            declaringType: typeof(FontHelper),
            defaultValue: default(String),
            propertyChanged: OnItemTappedChanged);

    public static String GetStyleId(BindableObject bindable) => (String)bindable.GetValue(StyleIdProperty);

    public static void SetStyleId(BindableObject bindable, String value) => bindable.SetValue(StyleIdProperty, value);


    public static void OnItemTappedChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var control = bindable as Element;
        if (control != null)
        {
            control.StyleId = GetStyleId(control);
        }
    }
}

Luego agregue el estilo en el recurso App.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:h="clr-namespace:My.Helpers"
             x:Class="My.App">

  <Application.Resources>

    <ResourceDictionary>
        <Style x:Key="LabelStyle" TargetType="Label">
            <Setter Property="FontFamily" Value="Metric Bold" />
            <Setter Property="h:FontHelper.StyleId" Value="Metric-Bold" />
        </Style>
    </ResourceDictionary>

  </Application.Resources>

</Application>

De acuerdo con la publicación anterior, debemos crear un Renderizador personalizado para la etiqueta que hereda de LabelRenderer en la plataforma Android.

internal class LabelExRenderer : LabelRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
    {
        base.OnElementChanged(e);
        if (!String.IsNullOrEmpty(e.NewElement?.StyleId))
        {
            var font = Typeface.CreateFromAsset(Forms.Context.ApplicationContext.Assets, e.NewElement.StyleId + ".ttf");
            Control.Typeface = font;
        }
    }
}

Para la plataforma iOS no se requieren renderizadores personalizados.

Ahora puedes obtener el estilo en el marcado de tu página:

Para etiqueta específica

<Label Text="Some text" Style={StaticResource LabelStyle} />

O aplique el estilo a todas las etiquetas en la página creando Estilo Basado en LabesStyle

<!-- language: xaml -->

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="My.MainPage">

  <ContentPage.Resources>

    <ResourceDictionary>
        <Style TargetType="Label" BasedOn={StaticResource LabelStyle}>
        </Style>
    </ResourceDictionary>

  </ContentPage.Resources>

  <Label Text="Some text" />      

</ContentPage>