Découvrez l'interface utilisateur Telerik pour Xamarin RadComboBox

La version R3 2020 apporte le contrôle ComboBox tant attendu à notre Telerik UI for Xamarin suite qui vous permet de présenter à vos utilisateurs une liste d'options parmi lesquelles choisir dans un moyen convivial et pratique grâce à une liste déroulante. RadComboBox pour Xamarin est livré avec un ensemble de fonctionnalités avancées: édition, recherche, sélection unique et multiple, modèles personnalisés et API de style flexible, pour n'en nommer que quelques-uns.

Dans ce billet de blog, je vais vous présenter les principales fonctionnalités du contrôle Telerik Xamarin ComboBox. Commençons!

Liaison de données

Premièrement, nous devons alimenter la ComboBox avec quelques données, afin qu'elle affiche correctement les options disponibles pour l'utilisateur final. Vous pouvez définir des éléments statiques sur le ItemsSource du contrôle ou le lier à un objet complexe à l'aide de la propriété DisplayMemberPath . Jetons un coup d'œil à l'exemple rapide suivant montrant des voitures dans une application Rent a Car.

Créez un exemple de classe de voiture:

 public   class   Car 
 {
  public   string   Modèle { get ;  set ; } 
  public   chaîne   CarLogo { get ;  set ; } 
} 

Ajoutez une classe ViewModel avec une collection d'objets Car:

 public   class   ViewModel 
 {
  public   ViewModel () [19659018]  {
  this  .Cars =  new   ObservableCollection  () 
  {
  new   Car { Model =  "Ford" CarLogo =  "ford1.png" }, 
  new   Car {Model =  "Citroen"  , CarLogo =  "citr.png" }, 
  new   Car {Model =  "VW" CarLogo =  "vw1.png" }, 
  new   Car {Model =  "Mazda" CarLogo =  "mazda.png" }, 
  nouveau   Car {Model =  "Honda" CarLogo =  "honda.png" }, [19659018]  nouvelle   Voiture {Modèle =  "Renault" CarLogo =  "ren1.png" }, 
  nouvelle   Voiture { Model =  "BMW" CarLogo =  "bmw.png" }, 
  new   Car {Model =  "Mercedes"  , CarLogo =  "merc.png" }, 
  new   Car {Model =  "Audi" CarLogo =  "audi.png" }, 
  new   Car {Model =  "Opel" CarLogo =  "opel.png" } 
 } ; 
 } 
 
  public   ObservableCollection  Cars { get ;  set ; } 
} 

Passons à la partie UI – ajoutez une instance RadComboBox, liez son I temsSource et définissez DisplayMemberPath de sorte que les noms des voitures soient affichés:

 < telerikInput: RadComboBox   x: Name  =  "comboBox" 
  ItemsSource  =  "{Binding Cars}" 
 [19659134] DisplayMemberPath  =  "Model"   /> 

C'est tout ce dont vous avez besoin pour inclure le contrôle RadComboBox à votre page. Vérifiez ci-dessous le résultat sur un émulateur iOS:

Édition et recherche

Par défaut, le contrôle RadComboBox n'est pas modifiable. , cependant, peuvent être facilement modifiés via la propriété booléenne IsEditable . Lorsque le contrôle est en mode d'édition, les utilisateurs peuvent taper dans la saisie de texte et ainsi lancer la recherche dans la zone de liste déroulante ItemsSource. Cette fonction est très utile pour sélection, en particulier dans le cas où plus d'éléments sont disponibles. Vous pouvez également définir si le mode de recherche sera "StartsWith" ou "Contains" – par défaut, RadComboBox utilise le mode "StartsWith" et les résultats de la recherche ne seront renvoyés que s'ils contiennent un mot commence par le terme de recherche. Les autres options pouvant être appliquées à la propriété SearchMode sont "Contains", "ContainsCaseSensitive" et "StartsWithCaseSensitive".

Donc, pour activer la recherche, vous devez configurer IsEditable et SearchMode ainsi que la propriété SearchTextPath cette dernière définit le nom de la propriété sur laquelle la recherche sera effectuée.

De plus, le contrôle met en évidence le texte correspondant dans la liste déroulante en fonction de l'entrée donnée après l'exécution de la recherche.

Revenons à notre exemple avec l'application Rent a Car. Voici la définition de RadComboBox mise à jour avec modification et recherche activées:

 < telerikInput: RadComboBox   x: Name  =  "comboBox" 
  ItemsSource  = [19659047] "{Binding Cars}" 
  DisplayMemberPath  =  "Model" 
  IsEditable  =  "True" 
 SearchMode = "Contains" 
  SearchTextPath  =  "Model"  /> 

Sélection simple et multiple

Parfois, vous souhaiterez peut-être avoir un éditeur de liste déroulante permettant la sélection multiple. Vous n'avez plus à attendre, car notre Telerik Xamarin ComboBox propose une sélection simple et multiple. Tout ce que vous devez définir est la propriété SelectionMode à "Single" ou «Multiple», respectivement. L'API liée à la fonction de sélection comprend également les propriétés pouvant être liées SelectedItem / SelectedItems et SelectedIndex ainsi que l'événement SelectionChanged pour que vous puissiez facilement adaptez le contrôle au scénario que vous avez sous la main.

Lorsque RadComboBox est en mode de sélection «multiple», les éléments sélectionnés sont visualisés sous forme de jetons avec un bouton «supprimer» (x), afin que les utilisateurs puissent les «désélectionner» rapidement et intuitivement.

Voyons la sélection multiple en action:

 < telerikInput: RadComboBox   x: Name  =  "comboBox" 
  ItemsSource  =  "{Binding Cars}" 
  DisplayMemberPath  =  "Model" 
  IsEditable  =  "True" 
  SearchTextPath  =  "Model" 
  SelectionMode  =  "Multiple" 
  SelectedItems  =  "{Binding SelectedCars}"  /> [19659142] Les images ci-dessous montrent RadComboBox avec sélection multiple dans et hors focus: 


 
 
 Personnalisations et modèles 
 RadComboBox offre une API de style flexible que vous pouvez utiliser pour améliorer l'apparence et la convivialité de votre application — y Vous pouvez modifier la couleur d’arrière-plan de la zone de liste déroulante, styliser la liste déroulante du contrôle et modifier les boutons d’effacement et de liste déroulante. De plus, vous pouvez modifier la couleur du texte de l'espace réservé et la couleur du texte en surbrillance. 

 De plus, grâce aux modèles personnalisables fournis - ItemTemplate, SelectedItemTemplate, TokenTemplate et ShowMoreTemplate, vous pouvez contrôler entièrement l'apparence visuelle du contrôle RadComboBox.
Je vais revenir à mon application Rent a Car et essayer de décorer la ComboBox utilisée pour afficher les modèles de voitures.
Tout d'abord, ajoutez les styles suivants à la section Ressources de votre page: 
 < Color   x: Key  =  "ComboBoxBackgroundColor" > # F7F7F7 </  Color > 
 < Style   x: Key  =  "ComboBoxStyle"   TargetType  =  "telerikInput: RadComboBox" > [19659010]  < Setter   Propriété  =  "CornerRadius"   Value  =  "12, 12, 0, 0"  /> [19659018]  < Setter   Property  =  "DropDownBackgroundColor"   Value  =  "# F8F8F8"  /> 
  <  Setter   Property  =  "DropDownBorderThickness"   Value  =  "0, 0, 0, 1"  /> 
  <  Setter   Propriété  =  "DropDownBorderColor"   Value  =  "# D9D9D9"  /> [19659018]  < Setter   Property  =  "BorderColor"   Value  =  "# D9D9D9"  /> 
  < Setter   Propriété  =  "FocusedBorderColor"   Value  =  "# D9D9D9"  /> 
  < Setter   Propriété  =  "BorderThickness"   Value  =  "0, 0, 0, 1"  /> 
 </  Style  ]> 
 < Style   x: Key  =  "ComboBoxButtonStyle"   TargetType  =  "Button" > 
  < Setter   Property  =  "HeightRequest" > 
  < Setter.Value > 
  < OnPlatform   x: TypeArguments  =  "x: Double" > 
  < On   Platform [19659015] =  "UWP, Android" > 50 </  On > 
  < On   Platform  =  "iOS "> 34 </  On > 
  </  OnPlatform > 
  </  Setter.Value > 
  </  Setter > 
 </  Style > 
 Ensuite, mettez à jour la définition de la ComboBox, elle inclut désormais les modèles modifiés:
 <[19659014] telerikInput: RadComboBox   x: Name  =  "comboBox" 
  ItemsSource  =  "{Binding Cars}" 
  DisplayMemberPath  ] =  "Make" 
  IsEditable  =  "True" 
  SearchTextPath  =  "Make" 
  SelectionMode [19659015] =  "Multiple" [19659018]  Placeholder  =  "Sélectionnez un modèle" 
  SelectedItems  =  "{Binding SelectedCars}" 



  


               




  BackgroundColor  = [19659047] "{StaticResource ComboBoxBackgroundColor}" 
  Style  =  "{StaticResource ComboBoxStyle}" 
  ClearButtonStyle  =  "ComboStyleButton}" {StaticResource "ComboBoxStyle}" ]> 
  < telerikInput: RadComboBox.ItemTemplate > 
  < DataTemplate > 
  < StackLayout   Padding  =  "16, 15, 0, 15" 
  Orientation  =  "Horizontal" 
  BackgroundColor  =  "# F8F8F8 "> 
  < Image   Source [19659015] =  "{Binding CarLogo}" 
  HorizontalOptions  =  "Center" 
  VerticalOptions  =  "Center" 
 [19659438] HeightRequest  =  "20" 
  WidthRequest  =  "20"   
  Margin  =  "0, 0, 10, 0"  /> 
  < Label   Text  =  "{Binding Model}" 
  FontSize [19659015] =  "14" 
  VerticalTextAlignment  =  "Center" 
  VerticalOptions  =  "Center" 
  TextColor  =  "Noir"  /> [19659018]  </  StackLayout > 
  </  DataTemplate > 
  </  telerikInput: RadComboBox.ItemTemplate  > 
  < telerikInput: RadComboBox.SelectedItemTemplate > 
  < DataTemplate > 
  < StackLayout   Padding  =  "16, 15, 0, 15" 
  Orientation  =  "Horizontal" 
  BackgroundColor  =  "# "> 
  < Image   Source  = " {Binding CarLogo} "
  HorizontalOptions  = " Centre " 
  VerticalOptions  =  "Centre" 
  HeightRequest  = [19659047] "20" 
  WidthRequest  =  "20"   
  Margin  =  "0, 0, 10, 0 " /> 
  < Label   Text  = " {Binding Model} "
  FontSize  = " 14 "
  VerticalTextAlignment  = " Center "
  VerticalOptions  = " Center "
  TextColor  = " Noir " /> 
  </  StackLayout > 
  </  DataTemplate > 
  </  telerikInput: RadComboBox.SelectedItemTemplate > 
  < telerikInput: RadComboBox.TokenTe mplate > 
  < DataTemplate > 
  < telerikPrimitives: RadBorder   BackgroundColor  =  "# A9E8F1" 
 ]  CornerRadius  =  "15" 
  Margin  =  "2" > 
  < StackLayout   Orientation  =  "Horizontal" 
  Marge  =  "3" > 
  < Libellé   Texte  =  "{Binding Model}" 
  TextColor  =  "Black" 
  VerticalTextAlignment  =  "Center" 
  Marge  =  "2"   FontSize  =  "14"   /> [19659018]  < Label   FontFamily  =  "{StaticResource IconsFontFamily}" 
  Text  =  ""   FontSize  ] =  "10" 
  VerticalTextAlignment  =  "Center" 
  TextColor  =  "Black" 
  Marge [19659015] =  "2" > 
  < Label.GestureRecognizers > 
  < TapGestureRecognizer   Tapped  = [19659047] "TapGestureRecognizer_Tapped"  /> 
  </  Label.GestureRecognizers > 
  </  Label > 
  </  StackLayout > 
  </  telerikPrimitives: RadBorder > 
  </  DataTemplate > 
  </  telerikInput: RadComboBox.TokenTemplate  > 
 </  telerikInput: RadComboBox > 
 Ajoutez le gestionnaire d'événements TapGestureRecognizer_Tapped dans le code derrière:
 private   void   TapGestureRecognizer_Tapped (, [196590014] objet [196590014]) System.EventArgs e) 
 {
  var closeLabel = sender  as   Label; 
  if   (closeLabel! =  null ) 
  {
  var item = closeLabel.BindingContext  as   Car; 
  if   (item! =  null ) 
  {
  this  .comboBox.SelectedItems.Remove (élément); 
 } 
 } [19659026]} 
 La ​​courte capture d'écran ci-dessous montre le résultat sur l'émulateur iOS:
 
 Faites-nous savoir ce que vous pensez
 Nous aimerions savoir ce que vous pensez de nos commandes et comment nous pouvons les améliorer. Si vous avez des idées de fonctionnalités à ajouter, n'hésitez pas à partager ces informations avec nous sur notre  Telerik UI for Xamarin Feedback portal .
 N'oubliez pas de consulter les différentes démos du contrôle dans notre  SDK Sample Browser  et dans Telerik UI for Xamarin  Demos  application.
 Si vous n'avez pas encore essayé la suite  Telerik UI for Xamarin prenez-la Faites un essai avec un  essai gratuit de 30 jours offrant toutes les fonctionnalités et commandes à votre disposition à un coût nul. De plus, vous pouvez  récupérer le code source de nos applications de démonstration Xamarin  et les essayer! Assurez-vous de consulter également notre  guide technique pour les développeurs Xamarin !
 Bon codage avec nos commandes!
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
 
   
 
Source link 
Partager :
Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)
Articles similaires