Polices dans Xamarin.Forms

Article
11/04/2020

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

Remarque

La FontSize valeur, lorsqu’elle est spécifiée sous la forme d’un double, est mesurée en unités indépendantes de l’appareil. Pour plus d’informations, consultez Unités de mesure.

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 :

Ajoutez la police à votre Xamarin.Forms projet partagé en tant que ressource incorporée (Action de génération : EmbeddedResource).
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")]

Remarque

La police peut résider dans n’importe quel dossier du projet partagé, sans avoir à spécifier le nom du dossier lors de l’inscription de la police auprès de l’assembly.

Sur Windows, le nom du fichier de police et le nom de police peuvent être différents. Pour découvrir le nom de police sur Windows, cliquez avec le bouton droit sur le fichier .ttf, puis sélectionnez Aperçu. Le nom de police peut ensuite être déterminé à partir de la fenêtre d’aperçu.

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 :

Important

Pour les builds release sur Windows, vérifiez que l’assembly contenant la police personnalisée est passé en tant qu’argument dans l’appel Forms.Init de méthode. Pour plus d’informations, consultez la page Dépannage.

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) :

Membre	iOS	Android	UWP
`Default`	17	14	14
`Micro`	12	10	15.667
`Small`	14	14	18.667
`Medium`	17	17	22.667
`Large`	22	22	32
`Body`	17	16	14
`Header`	17	14	46
`Title`	28	24	24
`Subtitle`	22	16	20
`Caption`	12	12	12

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

Remarque

Sur iOS et Android, les tailles de police nommées sont mises à l’échelle automatiquement en fonction des options d’accessibilité du système d’exploitation. Ce comportement peut être désactivé sur iOS avec une plateforme spécifique. Pour plus d’informations, consultez Mise à l’échelle de l’accessibilité pour les tailles de police nommées sur iOS.

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.

Important

Les icônes de police ne peuvent être spécifiées que par leur représentation de caractères Unicode.

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 :

Capture d’écran des icônes de police affichées, sur iOS et Android

Partager via

Polices dans Xamarin.Forms

Définir des attributs de police

Définir la taille de police

Définir la famille de polices

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

Comprendre les tailles de police nommées

Afficher les icônes de police

Ressources supplémentaires

Partager via

Polices dans Xamarin.Forms

Définir des attributs de police

Définir la taille de police

Définir la famille de polices

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

Comprendre les tailles de police nommées

Afficher les icônes de police

Liens connexes

Ressources supplémentaires