Share via

Polices dans .NET MAUI

  • Article

Par défaut, les applications .NET Multiplateforme App UI (.NET MAUI) utilisent la police Open Sans sur chaque plateforme. Toutefois, cette valeur par défaut peut être modifiée et des polices supplémentaires peuvent être inscrites pour une utilisation dans une application.

Tous les contrôles qui affichent le texte définissent des propriétés qui peuvent être définies pour modifier l’apparence de police :

  • FontFamily, de type string.
  • 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.
  • FontAutoScalingEnabled, de type bool, qui définit si l’interface utilisateur d’une application reflète les préférences de mise à l’échelle du texte définies dans le système d’exploitation. La valeur par défaut de cette propriété est true.

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

Tous les contrôles qui affichent du texte utilisent automatiquement la mise à l’échelle des polices, ce qui signifie que l’interface utilisateur d’une application reflète les préférences de mise à l’échelle du texte définies dans le système d’exploitation.

Inscrire des polices

Les polices de type true (TTF) et de police de type ouvert (OTF) peuvent être ajoutées à votre application et référencées par nom de fichier ou alias, avec l’inscription effectuée dans la CreateMauiApp méthode dans la MauiProgram classe. Pour ce faire, appelez la ConfigureFonts méthode sur l’objet MauiAppBuilder . Ensuite, sur l’objet IFontCollection , appelez la AddFont méthode pour ajouter la police requise à votre application :

namespace MyMauiApp
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("Lobster-Regular.ttf", "Lobster");
                });

            return builder.Build();
        }
    }  
}

Dans l’exemple ci-dessus, le premier argument de la AddFont méthode est le nom de fichier de police, tandis que le deuxième argument représente un alias facultatif par lequel la police peut être référencée lors de son utilisation.

Une police peut être ajoutée à votre projet d’application en la faisant glisser dans le dossier Resources\Fonts du projet, où son action de génération sera automatiquement définie sur MauiFont. Cela crée une entrée correspondante dans votre fichier projet. Vous pouvez également inscrire toutes les polices de l’application à l’aide d’un caractère générique carte dans votre fichier projet :

<ItemGroup>
   <MauiFont Include="Resources\Fonts\*" />
</ItemGroup>

Les polices peuvent également être ajoutées à d’autres dossiers de votre projet d’application. Toutefois, dans ce scénario, leur action de génération doit être définie manuellement sur MauiFont dans la fenêtre Propriétés .

Au moment de la génération, les polices sont copiées dans votre package d’application. Pour plus d’informations sur la désactivation de l’empaquetage de polices, consultez Désactiver l’empaquetage de polices.

Remarque

Le * caractère générique carte indique que tous les fichiers du dossier seront traités comme étant des fichiers de police. En outre, si vous souhaitez également inclure des fichiers à partir de sous-dossiers, configurez-le à l’aide de caractères génériques supplémentaires carte, par exemple. Resources\Fonts\**\*

Consommer des polices

Les polices inscrites peuvent être consommées en définissant la propriété d’un contrôle qui affiche le FontFamily texte sur le nom de la police, sans l’extension de fichier :

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

Vous pouvez également le consommer en référençant son alias :

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

Le code C# équivalent est :

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

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

Sur Android, les polices système suivantes peuvent être consommées en les définissant comme valeur de la FontFamily propriété :

  • espacement fixe
  • serif
  • sans-serif (ou sansserif)
  • sans-serif-black (ou sansserif-noir)
  • sans-serif-condensé (ou sansserif-condensé)
  • sans-serif-condensed-light (ou sansserif-condensed-light)
  • sans-serif-light (ou sansserif-light)
  • sans-serif-medium (ou sansserif-medium)

Par exemple, la police système monospace peut être consommée avec le code XAML suivant :

<Label Text="Hello .NET MAUI"
       FontFamily="monospace" />

Le code C# équivalent est :

// Use font name
Label label1 = new Label
{
    Text = "Hello .NET MAUI!",
    FontFamily = "monospace"
};

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 :

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

Le code C# équivalent est :

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

Remarque

La FontSize valeur est mesurée en unités indépendantes de l’appareil.

Désactiver la mise à l’échelle automatique de police

Tous les contrôles qui affichent le texte ont une mise à l’échelle de police activée par défaut, ce qui signifie que l’interface utilisateur d’une application reflète les préférences de mise à l’échelle du texte définies dans le système d’exploitation. Toutefois, ce comportement peut être désactivé en définissant la FontAutoScalingEnabled propriété sur les contrôles textuels sur false:

<Label Text="Scaling disabled"
       FontSize="18"
       FontAutoScalingEnabled="False" />

Cette approche est utile lorsque vous souhaitez garantir que le texte est affiché à une taille spécifique.

Remarque

La mise à l’échelle automatique de police fonctionne également avec les icônes de police. Pour plus d’informations, consultez Afficher les icônes de police.

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 :

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

La propriété peut être utilisée dans le DeviceInfo.Platform 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 = DeviceInfo.Platform == DevicePlatform.iOS ? 20 :
    DeviceInfo.Platform == DevicePlatform.Android ? 22 : 24;  
label.FontFamily = DeviceInfo.Platform == DevicePlatform.iOS ? "MarkerFelt-Thin" :
    DeviceInfo.Platform == DevicePlatform.Android ? "Lobster-Regular" : "ArimaMadurai-Black";

Pour plus d’informations sur la fourniture de valeurs spécifiques à la plateforme, consultez Informations sur l’appareil. Pour plus d’informations sur l’extension de balisage, consultez Personnaliser l’apparence de l’interface OnPlatform utilisateur en fonction de la plateforme.

Afficher les icônes de police

Les icônes de police peuvent être affichées par les applications .NET MAUI 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.

Ces données sont utilisées pour créer une PNG, qui peut être affichée 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 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 &#xf30c;. Le code C# équivalent est :

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

La capture d’écran suivante montre plusieurs icônes de police affichées :

Screenshot of three font icons.

Vous pouvez également afficher une icône de police avec l’extension de FontImage balisage. Pour plus d’informations, consultez l’icône Charger une police.