Placement facile des icônes sur les boutons .NET MAUI

Ce petit détail peut vraiment peaufiner votre application : placer les icônes juste à l’intérieur de vos boutons. Découvrez comment procéder dans .NET MAUI.

Beaucoup d’entre nous savent comment ajouter une icône à un bouton dans nos applications, mais contrôler sa position et son espacement par rapport au texte est moins courant. Ce détail mineur peut influencer considérablement le respect des directives de conception fournies par votre concepteur. Dans cet article, je vais démontrer une propriété simple pour contrôler ces aspects. 🚀

La propriété ImageSource

Si vous ne la connaissez pas, la classe Button a le ImageSource propriété qui vous permet d’afficher une image Bitmap sur un Button. L’image peut être chargée à partir de diverses sources comme un fichier, une ressource intégrée, un URI ou un flux.

Il est important de comprendre que les bitmaps ne s’adaptent pas automatiquement à un bouton. Selon les directives officielles, la taille idéale de telles images se situe généralement entre 32 et 64 unités indépendantes de l’appareil. La sélection de la taille doit reposer sur vos dimensions bitmap préférées. Le respect de ces directives peut garantir que vos images s’adaptent parfaitement à vos boutons.

<Button Text="Click for help"
  ImageSource="help_circled.png"/>

⚠️ Gardez à l’esprit: Lorsque vous nommez une image, assurez-vous de respecter les règles de dénomination des ressources Android, qui sont les suivantes :

• Les noms de fichiers image doivent être en minuscules.
• Ils doivent commencer et se terminer par une lettre et contenir uniquement des caractères alphanumériques ou des traits de soulignement.

Pour plus d’informations sur ces règles, je vous invite à lire le document de présentation des ressources de l’application.

Positionner l’image sur le bouton 🤓

Pour cela, vous devez connaître ContenuMise en page.

Le ContentLayout La propriété gère la disposition de l’image et/ou du texte dans un bouton. Cette propriété n’est pertinente que lorsque les éléments qu’elle affecte sont présents. Par exemple, pour ajuster l’espacement du texte, le Text La propriété doit être attribuée au bouton. La même règle s’applique à ImageSource. ContentLayout est du genre ButtonContentLayout et son constructeur a deux arguments, qui sont les suivants :

• Position de l’image : Spécifie où le bitmap sera affiché par rapport au texte du bouton. La position par défaut est sur le gauche. Il accepte l’une des valeurs de l’énumération ImagePosition, qui inclut les valeurs suivantes :

• Espacement: Cela représente l’écart entre le bitmap et le texte. Il accepte une valeur double.

Chaque valeur peut être ajoutée indépendamment ou ensemble. Si vous souhaitez modifier la position de l’icône sans affecter l’espacement du texte, vous pouvez le faire, et la même chose s’applique en sens inverse. Notez que si vous modifiez uniquement l’espacement, il sera relatif à la position par défaut de l’icône, qui est à gauche.

Vous pouvez également utiliser les deux valeurs, mais elles doivent être séparées par une virgule. Par exemple, ContentLayout="Bottom, 20". Voir l’exemple complet ci-dessous :

<Button Text="Click for help"
  ImageSource="help_circled.png"
  ContentLayout="Right, 10"/>

Utilisation du code C#

Vous pouvez ajuster la position soit en la définissant directement dans le code XAML, comme démontré ci-dessus, soit en utilisant du code C#. Choisissez l’approche qui correspond le mieux à vos préférences et à votre flux de travail de développement.

Button button = new Button 
{ 
  Text = "Click for help", 
  ImageSource = new FileImageSource 
  { 
    File = "help_circled.png" 
  }, 
  ContentLayout = new Button.ButtonContentLayout(Button.ButtonContentLayout.ImagePosition.Right, 10) 
};

Et voila! 🎉 Avec cette propriété simple, vous pouvez contrôler le positionnement et l’espacement des icônes de vos boutons. Ci-dessous, je fournirai des exemples visuels de chaque option de positionnement disponible. Explorons!

Conclusion

C’est ça! 🎉 Vous avez maintenant appris à gérer efficacement les positions des icônes sur vos boutons .NET MAUI. J’espère que vous avez trouvé cet article utile ! N’hésitez pas à commencer à mettre en œuvre cette propriété dans vos projets quotidiens ! 💚💕

À la prochaine! 💁‍♀️

Les références

Cet article était basé sur la documentation officielle :