Badgez-le comme un pro ! Découvrez le nouveau RadBadge pour WPF

Assurez-vous que les utilisateurs voient les mises à jour importantes : informez-les avec le contrôle RadBadge intuitif et élégant dans l'interface utilisateur pour WPF.

Êtes-vous fatigué de toutes les notifications intrusives qui entourent votre vie quotidienne ? Vous voulez quand même être averti. Et—besoin de l'être. 🤓 Sinon, vous pouvez et manquerez sûrement des nouvelles, des mises à jour et des événements importants. Cool, mais laissez cela se produire d'une manière plus intuitive, discrète et élégante. Par exemple, avec l'un des derniers ajouts à l'interface utilisateur de la suite WPF, le contrôle RadBadge le plus petit mais le plus significatif de la R3 2021 Release. 👶

Apprenons à le connaître ensemble.

Badging Essentials

Les notifications de badges sont utiles et, par conséquent, recherchées et largement utilisées dans de nombreuses applications, qu'elles soient de bureau, Web ou mobiles. Et bien sûr, ils ne sont pas limités à représenter uniquement des notifications (par exemple, un nouveau message). Le badge peut également être utilisé pour alerter (par exemple, pour les mises à jour disponibles), indiquer un nouveau contenu (par exemple, dans une application d'actualités) et ainsi de suite.

Au moins dans ma tête, un badge doit être perçu comme un tampon qui peut être collé à n'importe quel élément de l'interface utilisateur (bien sûr, le cas échéant et raisonnable de le faire). Oui, c'est une entité autonome, pourtant elle s'intègre mieux en duo, et personnellement je ne l'utiliserais pas en solo. Son pouvoir est de s'intégrer dans un grand nombre de contrôles et d'éléments de contrôle pour fournir une grande variété de cas d'utilisation. 💪

Scénarios de badge

Il existe de nombreuses situations et contrôles dans lesquels un contrôle de badge peut être utile. Dieu merci (et l'équipe de développement 😅), il est suffisamment flexible pour s'adapter à de nombreux modèles différents !

Voici le top trois des scénarios les plus populaires dans lesquels un badge peut être repéré :

• ListBox/NavigationView—peut-être le scénario le plus populaire—affichant des alertes/indicateurs liés à l'élément respectif et à son contenu.
• Menu/ToolBar—indiquant les nouvelles options de menu/commande et/ou les problèmes rencontrés.
• TabControl — informer l'utilisateur du contenu non lu, des notifications ou des alertes qui s'affichent sur un onglet qui n'est actuellement pas actif, par exemple. Mais si vous êtes impatient d'en savoir plus à ce sujet, n'hésitez pas à consulter son article de documentation.

  Voici les principales choses que vous devez savoir.

  Il permet de contrôler le ]Position—vous pouvez la spécifier par rapport à l'élément auquel vous souhaitez l'attacher.

  

  Vous pouvez définir son apparence en choisissant parmi les différentes options BadgeTypes et Géométrie prédéfinies ou en créant celle qui vous convient le mieux.

  

  Oh, voici les géométries – assurez-vous de vérifier les Propriétés clés section dans l'article de documentation du contrôle pour un extrait de code prêt à copier. Triangle, Pentagone, Hexagone, Heptagone, Octogone, Star5, Cloud, Oval. » title= »Badge Geometries »/>

  Jusqu'à présent, tout va bien. N'oublions pas que la première impression dure souvent et qu'une partie cruciale de celle-ci est l'entrée que fait quelque chose ou quelqu'un. Dans le contexte des badges, je veux dire l'Animation et le choix qui vous est donné d'en jouer un tout en affichant le contrôle. les couleurs, l'alignement du texte, etc. J'ai pris la base de l'exemple Sub Items de RadNavigationView dans l'application demos. L'ingrédient secret que j'ai ajouté était le RadBadge dans le cadre du ContentTemplate modifié dans le ItemStyle.

  Oh, j'ai également étendu le NavigationViewItemModel pour contenir un propriété int NotificationsCount.

  Voici les étapes :

  1. Ajoutez une propriété int pour le nombre de notifications :

     public class NavigationViewItemModel

     {

     public chaîne Icône { get; ensemble  ; }

     public string Titre { get; ensemble  ; }

     public int NotificationsCount { get; ensemble  ; }

     public ObservableCollection SubItems { get; ensemble  ; }

     }

  2. Mettre à jour certains éléments du ViewModel avec ce qui précède dans la méthode GetItems() :

     private List GetItems()

     {

     var inboxItem = [19659036]new NavigationViewItemModel() { Icon = ""Title = "Inbox"NotificationsCount = 99 } ;

     // Le reste est découpé pour économiser de l'espace 😊

     }
  3. Modifiez l'ItemStyle pour fournir un nouveau ContentTemplate qui inclut le contrôle RadBadge :

     <Style x:Key[19659037]="ItemStyle" TargetType="telerik:RadNavigationViewItem" BasedOn="{StaticResource ItemBaseStyle}"> Setter Property="Contenu" Valeur="{Binding}" />

     <Setter Propriété="ItemContainerStyle" Value="{StaticResource ItemBaseStyle}"/>

     <Setter Propriété=[19659068]"ContentTemplate">

     <Setter.Value>

     <DataTemplate>

     <TextBlock x:Name[19659037]="TextBlock" Text="{Reliure Titre}">

     <telerik:RadBadge.Badge>

     <telerik:RadBadge x:Name="Badge"[19659134]Contenu="{Binding NotificationsCount}"

     Foreground="{telerik:FluentResource ResourceKey=AccentBrush}"

     FontWeight="Bold "

     BadgeType="ContentOnly"

     Position="1.5,0.5"/>

     </telerik:RadBadge.Badge[19659037]>

     </TextBlock>

     <DataTemplate.Triggers>

     <DataTrigger Binding=" {Binding NotificationsCount}" Value="0">

     <Setter TargetName="TextBlock" Property[19659037]="telerik:RadBadge.Badge" Valeur="{x:Null}"/>

     </[19659036]DataTrigger>

     </DataTemplate.Triggers>

     </DataTemplate>

     </Setter.Value>

     </Setter>

     </Style>

  Maintenant, asseyez-vous confortablement et profitez du repas.

  

  Suivez-moi pour plus de recettes. 😆

  Gardez de la place pour le dessert et vos commentaires

  J'espère que vous avez apprécié cette lecture et que vous avez gardé de la place pour le dessert, et que vous n'hésiterez pas à en partager. D'accord, je ne suis pas si méchant. Gardez votre dessert pour vous-même, mais déposez vos pensées et vos impressions dans la section des commentaires ci-dessous ou dirigez-vous vers le Portail de commentaires pour WPF.

  Oh, et n'oubliez pas de rêver, d'explorer et de découvrir. Et dans ce train de pensée, assurez-vous de :

  Explorez la dernière interface utilisateur pour WPF