RadRichTextBox pour WPF ajoute des mentions/suggestions automatiques

Familiarisez-vous avec la nouvelle fonctionnalité de RadRichTextBox pour WPF – Mentions.

Aujourd'hui, je voudrais vous présenter le dernier ajout à notre contrôle RadRichTextBox. La fonctionnalité s'appelle Mentions et elle vous permet d'ouvrir une liste de suggestions lorsque l'utilisateur tape un caractère spécifique dans le document. Et oui, le comportement par défaut est d'afficher une liste de personnes et d'insérer le nom de l'élu ainsi qu'un lien hypertexte avec son adresse e-mail.

Mais attendez, ce n'est pas tout ! 🤗 La fonctionnalité est à peu près personnalisable, vous pouvez donc l'utiliser pour insérer une mention à une personne, ou un contenu prédéfini avec des images, des tableaux, etc.

Dans cet article, je vais vous montrer à la fois la fonctionnalité intégrée et un exemple de configuration personnalisée.

Introduction à l'API

Avant de vous montrer à quoi ressemblent les mentions, prenons un peu de recul afin que je puisse vous familiariser avec les membres les plus importants de l'API et de la terminologie.

Tous les paramètres des mentions résident dans la propriété MentionContext de la classe RadRichTextBox. À ce stade, il existe deux propriétés à l'intérieur du contexte :

• Providers : les fournisseurs de mentions sont les classes chargées de conserver une collection d'éléments, de les filtrer et de les insérer dans le document. Chaque fournisseur de mention doit être associé à un caractère de mention unique. Le caractère de mention est le symbole qui, lorsqu'il est inséré dans le document, déclenche la visibilité de la liste avec les suggestions. Vous pouvez ajouter autant de fournisseurs que vous le souhaitez.
• Modèles : RadRichTextBox doit savoir comment visualiser les objets dans la liste de suggestions. Pour l'instruire, vous pouvez créer un DataTemplate et définir les propriétés que vous souhaitez que les utilisateurs voient lorsque la liste avec les suggestions s'ouvre. Chaque modèle de mention doit être associé au type d'élément qu'il représente. Il couvre le cas d'utilisation le plus courant : marquer les personnes avec leur nom et leur adresse e-mail. Le caractère de mention par défaut pour ce fournisseur est « @ » et, lorsqu'il est enfoncé, la liste des personnes enregistrées s'affiche. L'utilisateur peut sélectionner une personne dans la liste ou continuer à taper davantage pour filtrer les suggestions. Chaque personne de la liste est visualisée avec son image et son nom. Lorsqu'une personne spécifique est sélectionnée, le fournisseur insère le nom de la personne et un lien hypertexte avec son e-mail, précédé du "@".

  Tout dans la fonctionnalité et la présentation de PersonMentionProvider est personnalisable – vous pouvez contrôler l'insertion de contenu après la sélection, le filtrage des enregistrements, la visualisation. Il est également possible de modifier le caractère de mention qui déclenche le fournisseur.

  Pour configurer le fournisseur par défaut, il vous suffit de lui attribuer des données et de l'ajouter à la collection Fournisseurs :

  List personMentionItems = new List() {

  new PersonMentionItem() { Name = "Maria Anders"[19659020]Mail = "manders@somecompany.com"ImageSource = new BitmapImage(new Uri("../../. ./../Images/manders.png"UriKind.Relative)) },

  nouveau PersonMentionItem() { Name = "Antonio Taquería"Mail = "ataqueria@somecompany.com"ImageSource = new BitmapImage(new[19659016]Uri("../../../../Images/ataqueria.png"[19659020]UriKind.Relative)) },

  new PersonMentionItem() { Name = "Thomas Hardy "Mail = "thardy@somecompany.com"ImageSource = new BitmapImage(new Uri("../.. /../../Images/thardy.png"UriKind.Relative)) },

  nouveau[19659016]PersonMentionItem() { Name = "Anabela Domingues"Mail = "adomingues@somecompany.com"ImageSource = new BitmapImage(new Uri("../../../../Images/adomingues.png"UriKind.Relative)) }

  } ;

  PersonMentionProvider personMentionProvider = new PersonMentionProvider();

  personMentionProvider.ItemsSource = personMentionItems;

  this.radRichTextBox.MentionContext.Providers.Add(personMentionProvider);

  Et il est prêt à briller :

  

  Comportement personnalisé—Suggestions pour la saisie semi-automatique

  Comme je l'ai mentionné au début de cet article, la fonctionnalité est assez personnalisable et peut également être utilisée pour suggestions pour la saisie semi-automatique des titres longs, des descriptions et de tout contenu dont vos utilisateurs pourraient avoir besoin. Cette flexibilité est obtenue grâce aux fournisseurs de mentions – vous pouvez en utiliser autant que vous le souhaitez. La seule exigence pour eux est d'attribuer un caractère de mention unique pour chaque fournisseur.

  Pour activer le comportement personnalisé, vous devez implémenter un fournisseur de mention personnalisé en héritant de la classe MentionProviderBase où T est le type de éléments que vous devez énumérer. La classe nécessite que vous implémentiez deux méthodes : une pour définir comment les éléments doivent être filtrés dans la liste lorsque les utilisateurs tapent après le caractère de mention, et une contenant la logique pour quoi et comment il doit être inséré lorsqu'un élément est sélectionné.[19659003] La deuxième étape consiste à définir un DataTemplate qui indique à RadRichTextBox comment il doit visualiser les éléments de vos objets dans la liste avec les suggestions. Notez que chaque modèle doit être lié à un type d'élément unique. Il n'est pas possible d'ajouter plus d'un DataTemplate pour le même type d'élément.

  Lorsque vous êtes prêt avec les implémentations, ajoutez-les aux propriétés respectives de MentionContext et surprenez vos clients avec la nouvelle fonctionnalité !

  Ce qui suit Le GIF montre deux fournisseurs de mentions en action :

  pour des instructions détaillées sur la configuration des comportements par défaut et personnalisés.

  Essayez-le et partagez vos commentaires

  Si vous n'avez toujours pas essayé Telerik UI for WPFutilisez le bouton ci-dessous pour obtenir une version d'essai et explorer tous les composants et leurs innombrables fonctionnalités.

  Télécharger un essai gratuit

  Si vous connaissez déjà le package, n'oubliez pas que nous sommes impatient d'entendre vos commentaires et sera très heureux si vous le partagez. N'hésitez pas à nous laisser un commentaire ci-dessous avec vos réflexions. Ou visitez notre Interface utilisateur Telerik pour le portail de commentaires WPF et faites-nous savoir si vous avez des suggestions ou si vous avez besoin de fonctionnalités particulières.