Polices dans Xamarin.Forms

Par défaut, Xamarin.Forms utilise une police système définie par chaque plateforme. Toutefois, les contrôles qui affichent le texte définissent des propriétés que vous pouvez utiliser pour modifier cette police :

• FontAttributes, de type FontAttributes, qui est une énumération avec trois membres : None, Boldet Italic. La valeur par défaut de cette propriété est None.
• FontSize, de type double.
• FontFamily, de type string.

Les propriétés s’appuient sur des objets BindableProperty, ce qui signifie qu’elles peuvent être les cibles de liaisons de données et mises en forme avec un style.

Définir des attributs de police

Les contrôles qui affichent du texte peuvent définir la FontAttributes propriété pour spécifier des attributs de police :

<Label Text="Italics"
       FontAttributes="Italic" />
<Label Text="Bold and italics"
       FontAttributes="Bold, Italic" />

Le code C# équivalent est :

Label label1 = new Label
{
    Text = "Italics",
    FontAttributes = FontAttributes.Italic
};

Label label2 = new Label
{
    Text = "Bold and italics",
    FontAttributes = FontAttributes.Bold | FontAttributes.Italic
};    

Définir la taille de police

Les contrôles qui affichent du texte peuvent définir la FontSize propriété pour spécifier la taille de police. La FontSize propriété peut être définie directement sur une double valeur ou par une NamedSize valeur d’énumération :

<Label Text="Font size 24"
       FontSize="24" />
<Label Text="Large font size"
       FontSize="Large" />

Le code C# équivalent est :

Label label1 = new Label
{
    Text = "Font size 24",
    FontSize = 24
};

Label label2 = new Label
{
    Text = "Large font size",
    FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
};

Sinon, la Device.GetNamedSize méthode a un remplacement qui spécifie le deuxième argument en tant que Element:

Label myLabel = new Label
{
    Text = "Large font size",
};
myLabel.FontSize = Device.GetNamedSize(NamedSize.Large, myLabel);

Pour plus d’informations sur les tailles de police nommées, consultez Comprendre les tailles de police nommées.

Définir la famille de polices

Les contrôles qui affichent du texte peuvent définir la FontFamily propriété sur un nom de famille de polices, tel que « Times Roman ». Toutefois, cela fonctionne uniquement si cette famille de polices est prise en charge sur la plateforme particulière.

Il existe un certain nombre de techniques qui peuvent être utilisées pour tenter de dériver les polices disponibles sur une plateforme. Toutefois, la présence d’un fichier de police TTF (True Type Format) n’implique pas nécessairement une famille de polices, et les TTF sont souvent incluses qui ne sont pas destinées à être utilisées dans les applications. En outre, les polices installées sur une plateforme peuvent changer avec la version de la plateforme. Par conséquent, l’approche la plus fiable pour spécifier une famille de polices consiste à utiliser une police personnalisée.

Les polices personnalisées peuvent être ajoutées à votre Xamarin.Forms projet partagé et consommées par des projets de plateforme sans aucun travail supplémentaire. Pour ce faire, procédez comme suit :

1. Ajoutez la police à votre Xamarin.Forms projet partagé en tant que ressource incorporée (Action de génération : EmbeddedResource).
2. Inscrivez le fichier de police auprès de l’assembly, dans un fichier tel que AssemblyInfo.cs, à l’aide de l’attribut ExportFont . Un alias facultatif peut également être spécifié.

L’exemple suivant montre la police Homard-Regular inscrite auprès de l’assembly, ainsi qu’un alias :

using Xamarin.Forms;

[assembly: ExportFont("Lobster-Regular.ttf", Alias = "Lobster")]

La police peut ensuite être consommée sur chaque plateforme en référençant son nom, sans l’extension de fichier :

<!-- Use font name -->
<Label Text="Hello Xamarin.Forms"
       FontFamily="Lobster-Regular" />

Vous pouvez également l’utiliser sur chaque plateforme en référençant son alias :

<!-- Use font alias -->
<Label Text="Hello Xamarin.Forms"
       FontFamily="Lobster" />

Le code C# équivalent est :

// Use font name
Label label1 = new Label
{
    Text = "Hello Xamarin.Forms!",
    FontFamily = "Lobster-Regular"
};

// Use font alias
Label label2 = new Label
{
    Text = "Hello Xamarin.Forms!",
    FontFamily = "Lobster"
};

Les captures d’écran suivantes montrent la police personnalisée :

Définir les propriétés de police par plateforme

Les OnPlatform classes et On les classes peuvent être utilisées en XAML pour définir les propriétés de police par plateforme. L’exemple ci-dessous définit différentes familles de polices et tailles sur chaque plateforme :

<Label Text="Different font properties on different platforms"
       FontSize="{OnPlatform iOS=20, Android=Medium, UWP=24}">
    <Label.FontFamily>
        <OnPlatform x:TypeArguments="x:String">
            <On Platform="iOS" Value="MarkerFelt-Thin" />
            <On Platform="Android" Value="Lobster-Regular" />
            <On Platform="UWP" Value="ArimaMadurai-Black" />
        </OnPlatform>
    </Label.FontFamily>
</Label>

La propriété peut être utilisée dans le Device.RuntimePlatform code pour définir des propriétés de police par plateforme

Label label = new Label
{
    Text = "Different font properties on different platforms"
};

label.FontSize = Device.RuntimePlatform == Device.iOS ? 20 :
    Device.RuntimePlatform == Device.Android ? Device.GetNamedSize(NamedSize.Medium, label) : 24;
label.FontFamily = Device.RuntimePlatform == Device.iOS ? "MarkerFelt-Thin" :
   Device.RuntimePlatform == Device.Android ? "Lobster-Regular" : "ArimaMadurai-Black";

Pour plus d’informations sur la fourniture de valeurs spécifiques à la plateforme, consultez Fournir des valeurs spécifiques à la plateforme. Pour plus d’informations sur l’extension de OnPlatform balisage, consultez l’extension de balisage OnPlatform.

Comprendre les tailles de police nommées

Xamarin.Forms définit des champs dans l’énumération NamedSize qui représentent des tailles de police spécifiques. Le tableau suivant montre les NamedSize membres et leurs tailles par défaut sur iOS, Android et le plateforme Windows universelle (UWP) :

Les valeurs de taille sont mesurées en unités indépendantes de l’appareil. Pour plus d’informations, consultez Unités de mesure.

Afficher les icônes de police

Les icônes de police peuvent être affichées par Xamarin.Forms les applications en spécifiant les données d’icône de police dans un FontImageSource objet. Cette classe, qui dérive de la ImageSource classe, a les propriétés suivantes :

• Glyph : valeur de caractère unicode de l’icône de police, spécifiée en tant que string.
• Size : valeur double qui indique la taille, en unités indépendantes de l’appareil, de l’icône de police rendue. La valeur par défaut est 30. En outre, cette propriété peut être définie sur une taille de police nommée.
• FontFamily : représentant string la famille de polices à laquelle appartient l’icône de police.
• Color : valeur facultative Color à utiliser lors de l’affichage de l’icône de police.

Les données de police peuvent être affichées par n’importe quelle vue pouvant afficher un ImageSource. Cette approche permet aux icônes de police, telles que les emojis, d’être affichées par plusieurs affichages, au lieu de limiter l’affichage d’icônes de police à un seul affichage de présentation de texte, tel qu’un Label.

L’exemple XAML suivant comporte une icône de police unique affichée par une Image vue :

<Image BackgroundColor="#D1D1D1">
    <Image.Source>
        <FontImageSource Glyph="&#xf30c;"
                         FontFamily="{OnPlatform iOS=Ionicons, Android=ionicons.ttf#}"
                         Size="44" />
    </Image.Source>
</Image>

Ce code affiche une icône XBox, de la famille de polices Ionicons, dans une Image vue. Notez que bien que le caractère unicode de cette icône soit \uf30c, il doit être échappé en XAML et devient ainsi . Le code C# équivalent est :

Image image = new Image { BackgroundColor = Color.FromHex("#D1D1D1") };
image.Source = new FontImageSource
{
    Glyph = "\uf30c",
    FontFamily = Device.RuntimePlatform == Device.iOS ? "Ionicons" : "ionicons.ttf#",
    Size = 44
};

Les captures d’écran suivantes montrent plusieurs icônes de police affichées par une disposition pouvant être liée :

Liens connexes

• Fournir des valeurs spécifiques à la plateforme
• Extension de balisage OnPlatform
• Dispositions liables