Fermer

octobre 13, 2023

Tout ce dont vous avez besoin dans une liste déroulante

Tout ce dont vous avez besoin dans une liste déroulante


Telerik ComboBox pour .NET MAUI est conçu pour offrir une interface intuitive permettant aux utilisateurs de sélectionner un ou plusieurs éléments dans une liste déroulante. Il est livré avec une API de style flexible, des personnalisations de listes déroulantes et bien plus encore.

Sélectionnez la ville à visiter dans la liste déroulante : New York, Londres, Los Angeles, Paris, Berlin, chacune avec une petite icône du drapeau de son pays.

Le Composant ComboBox du Progrès Interface utilisateur Telerik pour .NET MAUI présente aux utilisateurs une interface intuitive où ils peuvent sélectionner un ou plusieurs éléments dans une liste déroulante. Le contrôle est livré avec un riche ensemble de fonctionnalités :

  • Sélection simple et multiple
  • Prise en charge des jetons
  • Filtrage et recherche
  • Une API de style flexible
  • Personnalisations des listes déroulantes
  • Et plus

Voyons-les en détail, mais nous commencerons d’abord par ajouter Telerik ComboBox pour la première fois à notre application .NET MAUI :

Ajouter Telerik Combobox à l’application .NET MAUI

Premièrement, nous devons téléchargez et installez l’interface utilisateur Telerik pour .NET MAUI.

Note! Appelez UseTelerik();

N’oubliez pas d’appeler le UseTelerik() méthode dans le fichier MauiProgram.cs de votre projet .NET MAUI.

Une fois l’application .NET MAUI configurée, vous êtes prêt à ajouter un contrôle ComboBox à votre page avec XAML ou C# :

XAML

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
<telerik:RadComboBox x:Name="combobox" />

ou

C#

using Telerik.Maui;
using Telerik.Maui.Controls;
...
RadComboBox combobox = new RadComboBox();

Remplissez Telerik ComboBox pour .NET MAUI avec des données

L’étape suivante consiste à remplir la ComboBox avec certains éléments. Pour ce faire, vous devez préparer vos données en tant que collection de IEnumerable et les définir sur le contrôle. ArticlesSource. Dans le cas où les données proviennent d’un type d’objet complexe, vous devez également utiliser le AfficherCheminMembre propriété.

Pour les besoins de cet article, nous lierons la ComboBox à une liste de villes.

Nous pouvons le faire avec du XAML statique comme ceci :

<telerik:RadComboBox  >  
  <telerik:RadComboBox.ItemsSource>  
    <x:Array  Type="{x:Type x:String}">  
      <x:String>Tokyo</x:String>  
      <x:String>Uganda</x:String>  
      <x:String>Ukraine</x:String>  
      <x:String>Canada</x:String>  
      <x:String>France</x:String>  
      <x:String>Italy</x:String>  
      <x:String>United Kingdom</x:String>  
      <x:String>China</x:String>  
      <x:String>Japan</x:String>  
    </x:Array>  
  </telerik:RadComboBox.ItemsSource>  
</telerik:RadComboBox>

Ou en utilisant le modèle MVVM et en liant le contexte de données de la liste déroulante à une instance d’un modèle de vue.

<telerik:RadComboBox  >  
  <telerik:RadComboBox.BindingContext>  
    <local:ViewModel/>  
  </telerik:RadComboBox.BindingContext>  
</telerik:RadComboBox>

Nous continuerons l’article en utilisant cette approche où les éléments sont une collection de villes définies dans la classe ViewModel. Pour afficher les noms, nous utiliserons dans ce cas la propriété Name :

<telerik:RadComboBox  ItemsSource="{Binding Items}"  
DisplayMemberPath="Name" />

public  class  ViewModel  
  {  
    public  ViewModel()  
    {  
      this.Items  =  new  ObservableCollection<City>  
      {  
        new  City  {  Name  =  "Tokyo",  Population  =  13929286  },  
        new  City  {  Name  =  "New York",  Population  =  8623000  },  
        new  City  {  Name  =  "London",  Population  =  8908081  },  
        new  City  {  Name  =  "Madrid",  Population  =  3223334  },  
        new  City  {  Name  =  "Los Angeles",  Population  =  4000000},  
        new  City  {  Name  =  "Paris",  Population  =  2141000  },  
        new  City  {  Name  =  "Beijing",  Population  =  21540000  },  
        new  City  {  Name  =  "Singapore",  Population  =  5612000  },  
        new  City  {  Name  =  "New Delhi",  Population  =  18980000  },  
        new  City  {  Name  =  "Bangkok",  Population  =  8305218  },  
        new  City  {  Name  =  "Berlin",  Population  =  3748000  },  
      };  
    }  
  
  public  ObservableCollection<City>  Items  { get;  set;  }  
}

Configurer la sélection

Vous pouvez choisir si l’utilisateur peut sélectionner un ou plusieurs éléments en configurant le Mode de selection propriété à Célibataire ou Plusieurs valeur.

Dans cet article, nous continuerons avec la sélection multiple comme ceci :

<telerik:RadComboBox  ItemsSource="{Binding Items}"  
  DisplayMemberPath="Name"  
  SelectionMode="Multiple">  
 
</telerik:RadComboBox>

Lorsque Telerik ComboBox 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 les suppriment facilement de la sélection.

Les villes sélectionnées sont Tokyo et Madrid. Chacun a un X à côté dans le champ de texte pour faciliter la désélection

API de sélection pour des scénarios plus avancés

Pour gérer des scénarios plus avancés, SélectionModifiée un événement et un tas de propriétés viennent en aide.

L’événement SelectionChanged vous donne accès aux éléments ajoutés et supprimés de la sélection :

private void comboBox_SelectionChanged(object sender, ComboBoxSelectionChangedEventArgs e)
{
  
}

Et les propriétés que vous pouvez utiliser pour lire la sélection sont :

  • IndexSélectionné – Spécifie l’index du premier élément de la sélection actuelle ou -1 si la sélection est vide.
  • Élément sélectionné – Définit le premier élément de la sélection actuelle, ou null si la sélection est vide.
  • Éléments sélectionnés – Obtient la collection d’éléments actuellement sélectionnés.

Vous pouvez également répondre à deux commandes pour sélectionner des éléments que vous pouvez utiliser en dehors de la ComboBox :Commande SélectionnerTout et Commande EffacerSélection.

Configurer les Sodes d’édition et de recherche

Par défaut, Telerik ComboBox pour .NET MAUI le contrôle n’est pas modifiable et l’utilisateur peut choisir parmi les éléments affichés sans taper.

Toutefois, cela peut être facilement modifié grâce au EstModifiable Propriété booléenne. Lorsqu’il est réglé sur Vrail’utilisateur peut saisir le texte saisi et ainsi lancer une recherche dans les éléments de la ComboBox.

Telerik ComboBox prend en charge le placement d’un Espace réservé texte pour guider l’utilisateur sur ce qu’il doit taper.

Taper dans la ComboBox est très utile pour une sélection rapide, surtout dans le cas où plusieurs éléments sont disponibles.

Vous pouvez également définir si le Mode de recherche sera:

  • « Commence avec » (celui par défaut)
  • « Contient »
  • « ContientCaseSensitive »
  • « Commence avec CaseSensitive »

Note: Dans le cas où le ComboBox est lié à un objet complexe et que vous pouvez utiliser AfficherCheminMembrevous pouvez utiliser le Chemin de recherche du texte property pour définir le nom de la propriété sur laquelle la recherche sera effectuée.

Un autre avantage est que le résultat de la recherche peut être mis en surbrillance dans différentes couleurs que vous pouvez définir sur le Couleur en surbrillance propriété.

Un exemple de ComboBox avec l’édition activée, le mode de recherche configuré, l’espace réservé et la mise en surbrillance est présenté ci-dessous :

<telerik:RadComboBox  x:Name="comboBox"  
  ItemsSource="{Binding Items}"  
  DisplayMemberPath="Name"  
  Placeholder="Select City!"  
  HighlightTextColor="Red"  
  IsEditable="True"/>

Sélectionnez une ville! vient d'être ouvert.L'utilisateur a tapé « Lo » dans le champ de texte, et Londres et Los Angeles ont toutes deux leur « Lo » en rouge

Stylisez et personnalisez Telerik ComboBox

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

Les propriétés que vous pouvez utiliser pour contrôler la couleur, les styles et les polices de différents éléments incluent :

  • PlaceholderColor – Définit la couleur du texte d’espace réservé.
  • Couleur du texte – Définit la couleur du texte lorsque le champ est modifiable et la couleur de la rubrique sélectionnée lorsque le champ n’est pas modifiable et que le mode de sélection est unique.
  • Couleur de l’arrière plan – Définit la couleur de fond du contrôle.
  • Couleur de la bordure – Définit la couleur de la bordure.
  • Épaisseur de la bordure – Définit l’épaisseur de la bordure.
  • EffacerStyleBouton – Définit le style du bouton d’effacement.
  • Options de police (FontAttributes, FontFamily, FontSize) – Définissez les options de police pour le texte de RadComboBox.

Les propriétés suivantes stylisent la liste déroulante ComboBox :

  • DropDownBorderColor
  • DropDownBorderThickness
  • DropDownBorderCornerRadius
  • DropDownContexteCouleur
  • Style de bouton déroulant
  • DropDownVerticalOffset

Modèles, modèles, modèles

De plus, il existe des modèles plus personnalisables que vous pouvez utiliser pour contrôler entièrement l’apparence visuelle du contrôle RadComboBox :

  • Modèle d’élément – Contrôle les éléments visualisés dans la liste déroulante.
  • Modèle d’élément sélectionné – Définit le modèle des éléments sélectionnés qui sont visualisés dans la liste déroulante.
  • Modèle de jeton – Définit le modèle des jetons visualisés lors de la sélection multiple.
  • AfficherPlusModèle – Définit le modèle de l’interface utilisateur Afficher plus qui est visualisé lorsque le contrôle n’est pas ciblé et que l’espace n’est pas suffisant pour afficher tous les jetons lors de l’utilisation du mode de sélection multiple.
  • Modèle de boîte de sélection – Définit le modèle de la rubrique sélectionnée dans la section boîte du champ.

Vous pouvez ajouter un en-tête et un pied de page à la liste DropDown du contrôle ComboBox via les propriétés suivantes :

  • Modèle d’en-tête
  • Modèle de pied de page

Pour illustrer tout cela, le code suivant montre comment nous pouvons améliorer notre démo en ajoutant des images de drapeaux à chaque ville, en ajoutant de la population à l’élément sélectionné et en ajoutant un en-tête et un pied de page :

<telerik:RadComboBox ItemsSource="{Binding Items}"
    DisplayMemberPath="Name"
    IsEditable="True"
    SearchMode="Contains"
    SearchTextPath="Name"
    Placeholder="Select city to visit"
    SelectionMode="Multiple"
    DropDownHeight="300"
    x:Name="comboBox">
  <telerik:RadComboBox.ItemTemplate>
    <DataTemplate>
      <telerik:RadBorder
          MinimumWidthRequest="300">
        <HorizontalStackLayout>
          <Image Source="{Binding Flag}" WidthRequest="20"  HeightRequest="10"  />
          <Label Text="{Binding Name}"
          Padding="8, 7, 0, 7"
          TextColor="Black"/>
        </HorizontalStackLayout>
      </telerik:RadBorder>
    </DataTemplate>
  </telerik:RadComboBox.ItemTemplate>
  <telerik:RadComboBox.SelectedItemTemplate>
    <DataTemplate>
      <telerik:RadBorder BorderColor="MediumPurple" BorderThickness="2"
          MinimumWidthRequest="200">
        <HorizontalStackLayout>
          <Label Text="{Binding Name}"
            Padding="8, 7, 0, 7"
            TextColor="Black"/>
          <Label Text="{Binding Population}"
            FontSize="12"
            Padding="8, 7, 0, 7"/>
        </HorizontalStackLayout>
      </telerik:RadBorder>
    </DataTemplate>
  </telerik:RadComboBox.SelectedItemTemplate>
  <telerik:RadComboBox.HeaderTemplate>
    <DataTemplate>
      <StackLayout BackgroundColor="MediumPurple">
        <Label Text="To Visit List!"
          FontSize="20"
          TextColor="Black"
          BackgroundColor="MediumPurple"
          VerticalOptions="Center"
          HorizontalOptions="Center"/>
      </StackLayout>
    </DataTemplate>
  </telerik:RadComboBox.HeaderTemplate>
  <telerik:RadComboBox.FooterTemplate>
    <DataTemplate>
      <StackLayout>
        <Button Text="Add Items"
          Clicked="Button_Clicked"
          BackgroundColor="MediumPurple"/>
      </StackLayout>
    </DataTemplate>
  </telerik:RadComboBox.FooterTemplate>
  <telerik:RadComboBox.TokenTemplate>
    <DataTemplate>
      <telerik:RadBorder BackgroundColor="MediumPurple"
        CornerRadius="10"
        Margin="2" Padding="8">
        <HorizontalStackLayout>
          <Image Source="{Binding Flag}" WidthRequest="20" HeightRequest="10"  />
          <Label Text="{Binding Name}" Padding="8, 7, 0, 7" TextColor="Black"/>
        </HorizontalStackLayout>
      </telerik:RadBorder>
    </DataTemplate>
  </telerik:RadComboBox.TokenTemplate>
</telerik:RadComboBox>

La liste déroulante Sélectionner la ville à visiter comporte désormais un en-tête violet avec « Liste à visiter » et un pied de page violet avec « Ajouter des éléments ». Les villes ont aussi un drapeau.Londres est sélectionnée et sa population est affichée

Migration depuis Xamarin

La ComboBox pour .NET MAUI partage la même API avec Telerik ComboBox pour Xamarin, donc aucune modification supplémentaire, puis la modification de l’espace de noms, n’est nécessaire si vous prévoyez une telle migration.

Cependant, pour rester informé des modifications apportées à l’API, vous pouvez vous référer au article sur la documentation sur la migration.

Davantage de ressources

D’autres exemples illustrant la puissance de l’interface utilisateur Telerik pour .NET MAUI Combobox peuvent être trouvés dans SDK Telerik et Exemples de contrôles Telerik. De plus, vous pouvez récupérer le code source des applications de démonstration Telerik .NET MAUI et emmenez-les faire un tour !

Plus de détails sur l’API et l’utilisation du composant peuvent être trouvés dans le Documentation Telerik.

Essayez-le vous-même

Telerik ComboBox n’est que l’un des composants puissants et riches en fonctionnalités du Interface utilisateur Telerik pour .NET MAUI suite, conçue pour vous aider à développer des applications multiplateformes exceptionnelles. Essayez-le gratuitement maintenant, et si vous avez besoin de quelque chose, n’hésitez pas à partager vos commentaires et vos idées avec l’équipe Telerik sur Portail de commentaires Telerik ou Forums Telerik.

Essayez l’interface utilisateur Telerik pour .NET MAUI

Le meilleur outil 2023 pour ta croissance Instagram !



Source link

octobre 13, 2023