Polices dans Xamarin.Forms

Article
07/13/2023

Par défaut, Xamarin.Forms utilise une police système définie par chaque plateforme. Toutefois, les contrôles qui affichent du 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.

Ces propriétés sont soutenues par BindableProperty des objets, ce qui signifie qu’elles peuvent être des cibles de liaisons de données et stylées.

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 sur une double valeur directement ou par une valeur d’énumération NamedSize :

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

Device.GetNamedSize La méthode a également une substitution qui spécifie le deuxième argument comme un Element:

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

Notes

La FontSize valeur, lorsqu’elle est spécifiée en tant que 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 police, tel que « Times Roman ». Toutefois, cela ne fonctionnera que 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 polices TTF (True Type Format) n’implique pas nécessairement une famille de polices, et les TTF sont souvent inclus qui ne sont pas destinés à être utilisés 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 les 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 Lobster-Regular inscrite auprès de l’assembly, ainsi qu’un alias :

using Xamarin.Forms;

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

Notes

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.

Sous Windows, le nom du fichier de police et le nom de la police peuvent être différents. Pour découvrir le nom de la police sur Windows, cliquez avec le bouton droit sur le fichier .ttf et sélectionnez Aperçu. Le nom de la 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 la consommer 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 de version sur Windows, vérifiez que l’assembly contenant la police personnalisée est passé en tant qu’argument dans l’appel de Forms.Init méthode. Pour plus d’informations, consultez la page Dépannage.

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

Les classes et On peuvent être utilisées en XAML pour définir les OnPlatform propriétés de police par plateforme. L’exemple ci-dessous définit différentes familles et tailles de polices 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 Device.RuntimePlatform propriété peut être utilisée dans le code pour définir les 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 Extension de balisage OnPlatform.

Comprendre les tailles de police nommées

Xamarin.Forms définit les champs de 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 les 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.

Notes

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 d’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, possède les propriétés suivantes :

Glyph : valeur de caractère unicode de l’icône de police, spécifiée sous la forme d’un string.
Sizedouble: valeur 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.
FontFamilystring: représentant la famille de polices à laquelle l’icône de police appartient.
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 qui peut 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 des icônes de police à un seul affichage de présentation de texte, tel qu’un Label.

Important

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

L’exemple XAML suivant présente une seule icône de police 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 placé dans une séquence d’échappement dans 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, de l’exemple Dispositions pouvant être liées, 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 les icônes police iOS et Android

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