Fermer

octobre 8, 2020

Suggéré pour vous: le tout nouveau RadAutoSuggestBox pour WPF2 minutes de lecture



Jusqu'ici tout va bien, et où aller maintenant? Aucune suggestion? N'importe qui? D'accord, je vais commencer par la différence entre deux espèces similaires: la saisie semi-automatique et la suggestion automatique.

Saisie semi-automatique vs suggestion automatique

Les chances de se tromper complètement sont élevées. Heureusement, Merriam-Webster Inc. (l'un des principaux fournisseurs américains d'informations linguistiques) a pris grand soin d'éviter de confondre les deux. Jetons un coup d'œil à leur merveilleuse définition:

«La saisie semi-automatique, comme son nom l'indique, est la fonctionnalité qui complète une requête de recherche partielle en faisant correspondre la chaîne de caractères saisie par l'utilisateur. Autosuggest est la petite fonctionnalité intelligente qui donne l'impression que Google est niché dans votre cerveau, prédisant ce que vous voulez rechercher avant même de le savoir vous-même.

Maintenant que nous l'avons clarifié, je pense que nous sommes prêts pour la section suivante où je m'assurerai de couvrir tous les éléments importants liés au contrôle RadAutoSuggestBox. Nous avons RadAutoCompleteBox alors restez concentré et ne les mélangez pas.

L'action vaut toujours mieux que les mots, alors devons-nous commencer par mettre en place une application avec RadAutoSuggestBox? Oui? D'accord.

Configuration de RadAutoSuggestBox

Heureusement, il suffit de référencer les assemblages Telerik.Windows.Controls et Telerik.Windows.Controls.Input dans un WPF vide application. Et déclarez la RadAutoSuggestBox, bien sûr. En prime, je vais également créer un exemple de fournisseur de données. Commençons par lui.

public static class CountryDataProvider

{

private static List CountriesThatINeverGetToVisitThisYear { get ; set ; }

static CountryDataProvider ()

{

CountriesThatINeverGetToVisitThisYear = newList ();

var cultures = CultureInfo.Get (CultureTypes.SpecificCultures);

foreach (CultureInfo culture in cultures)

{

var regionInfo = new ] RegionInfo (culture.LCID);

if (! CountriesThatINeverGetToVisitThisYear.Any (x => x.Name.Equals (regionInfo.EnglishName)))

{

[19659017] CountriesThatINeverGetToVisitThisYear.Add (newCountryInfo () {Name = regionInfo.EnglishName});

}

}

}

public static List GetCountriesByText (stringsearchText)

{

var result = new List ();

var lowerText = searchText.ToLowerInvariant ();

return CountriesThatINeverGetToVisitThisYear.Where (x => x.Name.ToLowerInvariant ().) Contient (lowerText) .ToList ();

}

public class CountryInfo

{

public string Name { get [19659017]; set ; }

}

Maintenant, définissons notre boîte de suggestion automatique:

Ce sera moyen de garder la gestion de TextChanged juste pour moi, alors voilà:

 private void OnRadAutoSuggestBoxTextChanged (expéditeur de l'objet , Telerik.Windows.Controls.AutoSuggestBox.TextChangedEventArgs e)
{
if (e.Reason == TextChangeReason.UserInput)
{
this.radAutoSuggestBox.ItemsSource = CountryDataProvider.GetCountriesByText (this.radAutoSuggestBox.Text);
}
} 

Tant de cuisine, et pourtant pas un seul morceau de notre RadAutoSuggestBox. Il est temps de le goûter (virtuellement, bien sûr, pour que vous puissiez retirer votre 😷):

Oui, cet exemple contient certains de mes endroits personnels à explorer , pourtant les plus visités cette année sont… surprise-surprise… mon lit, mon canapé, ma chaise de bureau 😅. Mais ce n'est pas pour cela que nous sommes réunis ici, alors passons à la section suivante.
Examen de RadAutoSuggestBox

Dans les sous-sections suivantes, je couvrirai les principales caractéristiques de RadAutoSuggestBox, les événements qui se produisent lors de l'interaction avec elle et ses capacités de personnalisation.

Principales caractéristiques

La RadAutoSuggestBox peut sembler minuscule- minuscule, mais il a un riche ensemble de fonctionnalités.

  • Il fournit un support intégré pour plusieurs touches du clavier
  • Sa liste déroulante a une virtualisation d'interface utilisateur intégrée – les conteneurs pour les éléments sont générés uniquement pour ceux dans la fenêtre (= performances améliorées pour une plus grande quantité de données)
  • Les actions de recherche et d'effacement sont implémentées via des commandes qui peuvent être personnalisées ou remplacées
  • Elle permet de regrouper via la fonction de regroupement de ICollectionView [19659078] Que se passe-t-il lorsqu'aucun résultat de recherche n'est présent? Eh bien, alors le ContentPresenter sans résultats est affiché. En fait, nous l'avons vu dans le guide de démarrage ci-dessus.

    Comment vos utilisateurs sauront-ils quoi taper dans la case? En spécifiant le WatermarkContent bien sûr. Vous pouvez totalement contrôler le WatermarkBehavior et créer un WatermarkTemplate .

    Événements en vedette

    Les événements que la boîte de suggestion automatique expose sont TextChanged QuerySubmitted et SuggestionChosen . Trois est un nombre heureux, tout comme la quantité de souhaits de poisson rouge – juste assez pour en tirer le meilleur parti. Le TextChanged se produit pour une raison, qui vous est accessible via la propriété TextChangeReason utile pour identifier si le texte a été modifié par programmation, suite à l'entrée de l'utilisateur ou parce qu'une suggestion a été choisie. Je pense que les deux suivants sont explicites. Eh bien, s'ils ne le sont pas, veuillez consulter la documentation détaillée du contrôle .

    Capacités de personnalisation

    J'ai déjà couvert certains des points de personnalisation dans la section des fonctionnalités clés, je ne pouvais pas m'en empêcher… Mais dans cette section, nous examinerons d'autres manières possibles de personnaliser l'apparence du contrôle.

    Semblable aux autres contrôles de Telerik UI pour WPF celui-ci est également livré avec l'ensemble complet de thèmes prédéfinis . Vous avez le droit absolu de le repenser complètement, en fonction de vos besoins.

    Si vous avez seulement besoin de modifier le contenu des boutons d'effacement et de requête, vous pouvez le faire en utilisant la propriété correspondante ( ClearButtonContent / QueryButtonContent ). Une chose à savoir est que leur modèle par défaut contient un RadGlyph, ce qui signifie que vous pouvez choisir un code de glyphe dans notre aide-mémoire pratique et vous êtes prêt. Par code glyphe, j'entends la dernière colonne de la feuille de triche. Si par hasard vous n'êtes pas satisfait des RadGlyphs, vous pouvez toujours prédéfinir le QueryButtonContentTemplate ou le ClearButtonContentTemplate pour supprimer les modèles de contenu par défaut. Dernière chose ici: c'est vous qui contrôlez la visibilité des deux boutons. La ClearButtonVisibility est un peu plus spéciale – si elle est définie sur Auto (qui est le comportement par défaut), le bouton ne s'affiche que lorsque le contrôle est mis au point et qu'un texte est présent.

    L'interface utilisateur des éléments affichés dans la liste déroulante est également entièrement personnalisable via les propriétés ItemTemplate et ItemTemplateSelector de RadAutoSuggestBox. Il y a un très bel exemple dans la documentation en ligne du contrôle pour cela – je vous recommande de le vérifier.

    Oh, il existe également une propriété TextBoxStyle pour contrôler l'apparence de la zone de texte – utilisez-la à bon escient et faites attention à son TargetType, RadWatermarkTextBox .

    Emplacement commercial 🔥! Assurez-vous d'explorer toutes les merveilleuses démos préparées par mes coéquipiers:

    Interface utilisateur Telerik pour l'application de démonstration WPF Controls . Continuez, téléchargez-le et installez-le!

    Sharing = Caring

    Nous aimerions avoir de vos nouvelles. Je ne me lasserai jamais de vous rappeler que vos commentaires honnêtes et directs sont pour nous le moyen le plus efficace de nous améliorer. Envoyez vos commentaires dans la section des commentaires ci-dessous et partagez vos suggestions sur notre portail de commentaires .

    Essayez la dernière version de Telerik UI pour WPF et profitez-en!




Source link

0 Partages