L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Nouveau AutoCompleteView pour Xamarin.Forms
Cela fait un moment que la version R3 2018 de l'interface utilisateur Telerik pour Xamarin est le moment idéal pour attirer votre attention sur un nouveau composant qui pourrait intéresser beaucoup d'entre vous.
RadAutoComplete est tout à fait le cas. contrôle populaire pour diverses applications mobiles et cas d'utilisation – encore plus que prévu initialement. Nous avons reçu beaucoup de demandes de fonctionnalités pour le contrôle, nous avons donc entrepris un voyage pour voir comment répondre à tous les besoins de nos clients. Après avoir examiné attentivement les différentes réactions que nous avons reçues et eu égard à l’utilisation actuelle du contrôle, nous avons décidé qu’il serait préférable de créer un contrôle tout neuf.
Alors, sans plus tarder, rencontrez AutoCompleteView. Ce nouveau composant est plus facile à utiliser, plus intuitif et plus riche en fonctionnalités. Dans cet article de blog, je vais vous présenter le contrôle AutoCompleteView pour Xamarin.Forms. Vous apprendrez également les nouvelles fonctionnalités qui vont suivre et comment les utiliser.
Commençons par comment utiliser le contrôle. L'extrait ci-dessous montre comment ajouter le nouveau contrôle à vos fichiers XAML dans votre projet:
< telerikInput: RadAutoCompleteView x: Name = "autoCompleteView" [19659000] Watermark ] = "Rechercher ici ..." />
Caractéristiques
Le logiciel AutoCompleteView comporte notamment les fonctionnalités suivantes:
Les recherches à distance et Les suggestions d’affichage / masquage figurent parmi les scénarios les plus demandés par nos clients et sont désormais disponibles dans le jeu de fonctions du nouveau contrôle. Laissez-moi vous guider à travers ces fonctionnalités et comment commencer à les utiliser. Pour les autres fonctionnalités, utilisez simplement les liens ci-dessus pour obtenir plus de détails.
Fonctionnalité de recherche à distance
La fonctionnalité de recherche à distance du contrôle RadAutoCompleteView vous permet de saisir facilement les données de l'utilisateur, de déclencher l'algorithme de recherche et d'affecter les résultats. à la ItemsSource du contrôle.
Le contrôle expose maintenant un nouvel événement qui se produit lorsque le texte est modifié: événement TextChanged . Cet événement reçoit un argument TextChangedEventArgs contenant des données liées à l'événement. C’est à cet endroit que votre algorithme de recherche peut être implémenté pour obtenir la fonctionnalité de recherche à distance.
L'image ci-dessous montre le contrôle dans l'état de la recherche à distance:
Afficher / masquer les suggestions
Les méthodes ShowSuggestions et HideSuggestions sont une autre fonctionnalité fournie dans le nouveau contrôle AutoCompleteView. En utilisant ces méthodes, vous pouvez facilement afficher / masquer toutes les suggestions immédiatement lorsque l'utilisateur se concentre sur le champ de saisie. Cette fonctionnalité vous permet d'utiliser le contrôle AutoCompleteView en tant que contrôle ComboBox.
L'exemple suivant montre comment utiliser la méthode ShowSuggestions () .
Pour afficher toutes les suggestions, affectez un gestionnaire à l'événement ciblé. Par exemple:
this .autoCompleteView.Focused + = this .AutoCompleteView_Focused;
… et appelez la méthode ShowSuggestions () dans AutoCompleteView_Focused:
private . AutoCompleteView_Focused ( objet expéditeur, FocusEventArgs e)
{
. ] this .autoCompleteView.ShowSuggestions ();
Pour plus d'informations sur les suggestions d'exposition / de masquage, vous pouvez consulter notre . ] Méthodes [article.
Création de modèles personnalisés
Si les modèles par défaut du contrôle ne répondent pas à vos besoins, vous pouvez facilement définir un modèle personnalisé. Les modèles disponibles pour la personnalisation sont:
- Modèle SuggestionItem
- Modèle ShowMore (pour la prise en charge des jetons)
- Modèle NoResult
- Modèle de chargement (pour la fonctionnalité de recherche à distance)
Créons un exemple simple à l'aide du . ] Modèle ShowMore et Modèle NoResult .
Pour notre exemple, nous allons créer un objet métier à partir du type Ville avec la propriété Name:
public classe Ville . ]
{
public chaîne de caractères Nom { de {{nom 19659006]; set ; }
public Ville ( chaîne de caractères nom)
{
[19459065] { ]
}
[19459065]} [19459065] [19459072] [19459072]
Dans notre ViewModel, nous pouvons créer le collection, qui contiendra les villes et ajoutera le nom de la ville:
public class ViewModel
{
. public List get ; set ; }
public VoirModèle () [1945919]. {
ce .Source = nouveau observableCollection
this .Source.Add ( nouveau Ville () {Nom = de Londres. " });
this .Source.Add ( new Ville () () {Nom = "Madrid" });
.Source.Add ( nouveau Ville () {Name = "Paris" [196590]])
this .Source.Add ( new Ville () {Name = "Tokyo" })
. ceci .Source.Add ( new Ville () {Name = "New York" })
Source link