Prise en main du contrôle BadgeView pour Xamarin.Forms

R2 2021 de Telerik UI pour Xamarin est sorti et il apporte notre tout nouveau contrôle BadgeView. Avec lui, vous pouvez facilement afficher des badges sur votre application dans un scénario mobile où une notification ou une mise à jour peut être illustrée par un badge.

Vous avez vu des badges partout, indiquant le nombre d'e-mails non lus, affichant des mises à jour sur une application professionnelle ou présentant l'état d'une application de messagerie indiquant si une personne est en ligne, hors ligne ou absente. Quel que soit le scénario que vous essayez de réaliser, le Xamarin BadgeView regorge de toutes les fonctionnalités dont vous aurez besoin !

Get Started

Le moyen le plus simple d'utiliser RadBadgeView consiste à ajouter notre Telerik.UI.for.Xamarin NuGet package à votre solution Xamarin.Forms.

Ensuite, ajoutez une référence à l'espace de noms Telerik.XamarinForms.Primitives :

Enfin, ajoutez le contrôle BadgeView à la page. Dans l'exemple ci-dessous, le badge serait attaché à un contrôle RadBorder avec une étiquette :

Consulter le résultat sur la simulation iOS ou :

Utiliser des badges prédéfinis

Nous avons pensé aux scénarios les plus courants où un badge serait nécessaire et avons proposé un ensemble de badges prédéfinis types que vous pouvez utiliser directement dans votre application. Choisissez entre « Disponible », « Ne pas déranger », « Absent du bureau » et plus encore. Consultez la liste complète dans la rubrique de documentation Types de badges.

Voici un exemple rapide avec un badge prédéfini marquant le statut d'un utilisateur d'application :

Et le résultat avec différents types de badges sur iOS :

Créez votre propre badge

Vous pouvez également définir manuellement le texte affiché à l'intérieur du badge - c'est très utile lorsque vous devez afficher le nombre de nouveaux e-mails ou messages, ou ajouter une balise spécifique, telle que « nouveau », « mis à jour », etc.

Si l'affichage du texte à l'intérieur du badge n'est pas suffisant pour obtenir le scénario souhaité, vous pouvez modifier complètement le Badge ControlTemplate et ajouter n'importe quel contenu à l'intérieur. Accédez à la page de sujet Badge Customization pour plus d'informations si vous souhaitez explorer cette option.

Positionnez-le comme vous le souhaitez

Profitez des paramètres de position et d'alignement flexibles, afin que vous puissiez placer le badge à l'endroit exact où vous souhaitez qu'il apparaisse. Vous pouvez définir sa position en fonction de la vue à laquelle il est attaché, appliquer un alignement et un décalage horizontaux et verticaux. Pour des informations détaillées sur les options disponibles, consultez notre page de sujet BadgeView : Position et alignement.

Découvrez différentes options de position dans l'image ci-dessous :

Stylisez-le selon votre propre design

Comme toujours, RadBadgeView est livré avec une variété de paramètres de style, il s'adaptera donc parfaitement au design de l'application que vous avez appliqué. Vous pouvez modifier les paramètres de police, différentes couleurs (couleur du texte, couleur d'arrière-plan, couleur de la bordure), la taille du badge et le rayon du coin.

Consultez ci-dessous un exemple rapide de BadgeView avec quelques propriétés de style appliquées. Pour la BadgeFontFamily, j'ai utilisé notre fichier Telerik ttf. Pour plus de détails à ce sujet, consultez la page de sujet Telerik UI for Xamarin Font Icons.