Xamarin.Forms
Polices personnalisées dans les styles

Remarques

Accéder aux polices personnalisées dans Syles

Xamarin.Forms fournit un excellent mécanisme pour styliser votre application multi-plateformes avec des styles globaux.

Dans le monde mobile, votre application doit être jolie et se démarquer des autres applications. L'un de ces caractères est les polices personnalisées utilisées dans l'application.

Grâce à la prise en charge de XAML Styling dans Xamarin.Forms, vous venez de créer un style de base pour toutes les étiquettes avec vos polices personnalisées.

Pour inclure des polices personnalisées dans votre projet iOS et Android, suivez le guide dans Utilisation de polices personnalisées sur iOS et Android avec le message Xamarin.Forms écrit par Gerald.

Déclarez le style dans la section des ressources du fichier App.xaml. Cela rend tous les styles globalement visibles.

Dans Gerald post ci-dessus, nous devons utiliser la propriété StyleId, mais ce n'est pas une propriété pouvant être liée, donc pour l'utiliser dans Style Setter, vous devez créer une propriété attachable:

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);
        }
    }
}

Ajoutez ensuite du style dans la ressource 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>

Selon l'article ci-dessus, nous devons créer un moteur de rendu personnalisé pour Label qui hérite de la plateforme LabelRenderer On 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;
        }
    }
}

Pour la plate-forme iOS, aucun moteur de rendu personnalisé n'est requis.

Vous pouvez maintenant obtenir du style dans le balisage de votre page:

Pour étiquette spécifique

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

Ou appliquer un style à toutes les étiquettes de la page en créant Style basé sur 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>