Changez votre police, changez votre application. Voici comment utiliser une police externe dans votre application .NET MAUI pour correspondre à votre image de marque et à votre style.
Saviez-vous que changer une police peut améliorer la perception de l’expérience utilisateur dans votre application ? Bien sûr! Car si vous utilisez une police très difficile à lire, l’utilisateur finira par se sentir frustré et découragé.
Dans le développement d’applications, toute une équipe travaille ensemble pour éviter ce genre de problèmes. Outre les développeurs, un rôle extrêmement important est celui du concepteur, la personne qui crée cette « image » de l’apparence de l’application : couleurs, styles, TOUT ! Et dans ce cadre, le concepteur précise également quel polices que nous devrions utiliser dans l’application.
En tant que développeurs, nous sommes responsables de la prise de ces décisions de conception, même si cela implique l’ajout d’une police externe au projet !
Et c’est exactement pourquoi, dans cet article, vous apprendrez comment ajouter des polices externes dans .NET MAUI d’une manière très simple et rapide.
Alors prenez votre tasse de café (ou de chocolat chaud) et mettons-nous au travail ! ☕✨
Gestion des polices .NET MAUI
Lorsque vous ajoutez un composant qui affiche du texte, .NET MAUI inclut déjà une police par défaut appelée Open Sans pour toutes les plateformes. Cela signifie que si vous ne souhaitez pas ajouter une police différente, .NET MAUI la gérera automatiquement pour vous.
Cependant, vous pouvez également ajouter des polices externes chaque fois que vous en avez besoin. Une seule police peut inclure plusieurs styles visuels, tels que gras, italique ou des épaisseurs et tailles différentes.
Toutes ces variations peuvent être contrôlées grâce à des propriétés telles que Attributs de police et taille de police dans .NET MAUI. Même lorsque vous utilisez des polices externes, vous pouvez toujours appliquer ces propriétés pour ajuster facilement l’apparence et le style de votre texte.
Alors… que devez-vous faire pour ajouter des polices externes à votre projet .NET MAUI ? 🤔
Se détendre! Nous pouvons le faire en quelques étapes simples. Cette explication sera divisée en les points suivants :
1️⃣ Ajout de la police à votre projet
2️⃣ Enregistrement de la police
3️⃣ Et utilisez-le dans votre application !
Passons maintenant à l’explication de chaque étape !
Étape 1 : Ajout de la police à votre projet
⚠️ Avant d’ajouter une police à votre projet, assurez-vous qu’elle utilise un format supporté par .NET MAUI :
- TrueType (.ttf) : Le format de police le plus courant, largement pris en charge sur toutes les plateformes
- OpenType (.otf) : Très similaire à TTF, mais avec des options de style plus avancées telles que des ligatures, des caractères alternatifs et une prise en charge étendue des symboles.
Si vous n’avez pas de police disponible pour le moment, ne vous inquiétez pas ! Pour pratiquer, je recommande DaFontil contient des tonnes de polices super cool que vous pouvez utiliser ! 😎✨ – Pour cet exemple, j’ai téléchargé le Police super joyeuse.
Une fois que vous avez téléchargé la police, accédez à votre projet et accédez au Répertoire Ressources/Polices. Placez-y le fichier de police.
Cette étape définit automatiquement l’action de construction sur MauiFont, qui enregistre la police dans votre projet. Cependant, je recommande toujours de revérifier juste pour être sûr.
Ouvrez les propriétés de la police dans l’Explorateur de solutions. Ensuite, localisez le Créer une action paramètre et vérifiez qu’il est défini sur MauiFont. Cela confirme que la police est correctement enregistrée dans votre projet. Si ce n’est pas le cas, sélectionnez-le et vous êtes prêt !
Ci-dessous une image qui illustre la configuration :
Cet enregistrement sera reflété dans votre fichier .csproj comme vous pouvez le voir dans l’exemple suivant :
<ItemGroup>
<MauiFont Include="Resources\Fonts\*" />
</ItemGroup>
Étape 2 : Il est maintenant temps d’enregistrer la police ! 🎉
Ouvrez le PIPART classe dans votre projet et localisez le CréerMauiApp méthode. Là, nous appellerons le Configurer les polices méthode sur l’instance MauiAppBuilder.
En utilisant le IFontCollection objet, appelez le Ajouter une police méthode. Cela vous permet d’inclure votre fichier de police. Il accepte les paramètres suivants :
- Nom du fichier de police : Le nom exact de votre fichier de police tel qu’il apparaît dans le projet
- Alias (facultatif): Un nom pratique que vous pouvez utiliser pour référencer la police
Dans le code, votre PIPART la classe devrait ressembler à l’exemple suivant :
namespace MyMauiApp
{
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("Super Joyful.ttf", "SuperJ");
});
return builder.Build();
}
}
}
Étape 3 : Comment utiliser la police précédemment ajoutée ? 🤔
Pour utiliser votre police externe, utilisez simplement le FontFamily propriété. Vous pouvez référencer la police soit par le nom de fichier inclus dans le projet, soit par l’alias que vous avez défini lors de l’enregistrement.
Par exemple:
En utilisant le nom du fichier de police :
<Label Text="Hello .NET MAUI!"
FontFamily="Super Joyful.ttf" />
En utilisant l’alias :
<Label Text="Hello .NET MAUI!"
FontFamily="SuperJ" />
Fait! 👏 Nous avons intégré avec succès la police Super Joyful. Voyons maintenant comment elle apparaît dans un exemple d’interface utilisateur ! 👀✨
✍️ Conseils sur la plateforme
Sur Androïde, outre l’Open Sans par défaut, plusieurs polices sont déjà installées sur l’appareil. Grâce à cela, .NET MAUI vous permet de les utiliser sans ajouter de fichiers de polices au dossier Fonts et sans les enregistrer dans le projet.
Pour référencer ces polices système, il suffit de définir leur nom comme valeur du FontFamily propriété. 🙌 Les polices qui incluent des traits d’union peuvent être référencées avec ou sans le trait d’unionet ils fonctionneront exactement de la même manière !
Les polices disponibles sont :
Et vous pouvez les utiliser dans votre projet exactement de la même manière que n’importe quelle autre police !
<Label Text="Hello .NET MAUI"
FontFamily="monospace" />
Conclusion
Et c’est tout! 🎉 En quelques étapes simples, vous avez appris comment ajouter des polices externes à vos applications .NET MAUI et comment profiter des polices système déjà fournies par Android. Vous êtes maintenant prêt à donner à votre interface utilisateur un look plus personnalisé et plus soigné ! ✨
J’espère que ce guide vous aidera à améliorer l’expérience visuelle de vos applications à partir d’aujourd’hui.
Si vous avez des questions, n’hésitez pas à les laisser dans les commentaires. J’aimerais aider! 💚✨ Rendez-vous dans le prochain article ! 🙋♀️
Références
Source link