Présentation de l'interface utilisateur CardView Control for Telerik pour WPF

Avec la version R1 2021 nous avons introduit un tout nouveau contrôle dans la suite Telerik UI pour WPF . Le contrôle CardView est là pour bousculer vos dispositions de données! Placez les cartes sur la table et classez-les dans un tableau sympa dans cet article.

Voulez-vous faire quelque chose de différent concernant la visualisation de vos données? Ou peut-être que vos clients ont besoin d'afficher leurs cartes de visite de manière plus efficace et élégante qu'avec la grille de données standard? Alors CardView est la solution idéale pour vous. La conception des composants est inspirée de la vue Carte de visite Microsoft Outlook, mais elle apporte plusieurs fonctionnalités supplémentaires telles que le regroupement, l'agrandissement / réduction des cartes et autres bonbons.

Outre les fonctionnalités spécifiques aux composants, le package contient également une localisation intégrée traduit automatiquement les textes des paramètres du contrôle en fonction de la culture d'interface utilisateur actuellement appliquée. Une autre chose qui est incluse est la virtualisation rapide et furieuse de l'interface utilisateur qui vous permet de charger de grandes quantités de données, mais de ne rendre que les cartes affichées dans la fenêtre, améliorant ainsi les performances. Et en plus de cela, vous bénéficiez d'un support de thématisation qui vous permet de choisir parmi l'un des designs prédéfinis et de rendre votre interface utilisateur aussi jolie qu'une image.

Dans les lignes suivantes, Je voudrais plonger dans les fonctionnalités du contrôle et vous présenter ses capacités.

Une liste déroulante pour les gérer tous

Toutes les fonctionnalités intéressantes de CardView sont placées sous la commande du menu déroulant situé sur son côté supérieur droit. Cela inclut le regroupement, où l'utilisateur peut organiser de manière interactive les données avec une simple action de glisser-déposer. Tri, où vous pouvez réorganiser les cartes et les groupes. Et le filtrage, qui vous permet d'afficher vos cartes en fonction d'une ou plusieurs conditions.

Si vous voulez prendre le contrôle total de cet ensemble de fonctionnalités, ou en d'autres termes, si vous voulez les manipuler en code-behind, vous pouvez profiter de la classe QueryableCollectionView comme décrit dans la documentation d'aide .

Pick a Card

La ​​sélection d'une carte est aussi simple que de cliquer dessus dans l'interface utilisateur. Cela le met en évidence et vous permet de commencer à modifier ses champs de données. Avec les modèles d'éditeur personnalisables, chaque champ de données peut utiliser un éditeur différent.

Cachez vos cartes

Le support intégré d'expansion et de réduction des cartes et des groupes est un excellent moyen pour masquer toutes les informations de la carte et ne laisser que la partie d'en-tête visible. De cette façon, vous pouvez donner le focus uniquement à une ou plusieurs cartes ou groupes spécifiques dans la vue.

Personnaliser les cartes

Au cas où vous voudriez remplacer certaines informations ou parties du UI dans les cartes, vous pouvez facilement le faire en utilisant les capacités de personnalisation intégrées du composant. Vous pouvez échanger les éditeurs standard de TextBox pour un ComboBox, un NumericUpDown ou tout ce qui fait flotter votre bateau. En plus de cela, les en-têtes de carte et de groupe sont également personnalisables. Sans parler de la partie contrôle du filtrage. Astuce, astuce: Consultez la documentation d'aide .

Dessinez-moi comme l'un de vos contrôles français

L'une des fonctionnalités les plus importantes de tous les contrôles Telerik, y compris CardView, est le riche ensemble de commandes intégrées thèmes que vous pouvez facilement changer, même au moment de l'exécution. Toutes les images de cet article présentent la variation de couleur de lumière du thème Fluent . Il n'est pas nécessaire de créer un projet greenfield pour tester les différentes conceptions. Consultez plutôt la Démonstration de l'interface utilisateur Telerik pour WPF Controls où la plupart des exemples vous donnent la possibilité de changer le thème actuel et d'être étonné par les superbes designs.

] Partout dans le monde

Certaines entreprises jugent essentiel de traduire l'interface utilisateur de leur application dans différentes langues afin de pouvoir toucher un public plus large. Dans cette relation, CardView traduit les textes de ses paramètres d'interface utilisateur dans plusieurs langues différentes, dont l'allemand, l'espagnol, le français et quelques autres. L'interface utilisateur est automatiquement traduite en fonction de la culture actuelle de l'application. Accédez à le train de documentation d'aide pour une liste complète des langues prises en charge et des informations supplémentaires sur la façon d'implémenter la localisation personnalisée. la documentation où toutes les fonctionnalités du composant sont décrites avec des extraits de code exécutables. Quoi qu'il en soit, j'essaierais de vous faciliter un peu la tâche et de créer une petite démonstration dans les prochaines lignes. L'exemple suivant vous montre comment créer une vue de cartes de visite simple remplie d'objets métier personnalisés.

Commençons par référencer les assemblages Telerik requis. Ce sont:

• Telerik.Windows.Controls.dll
• Telerik.Windows.Controls.Data.dll
• Telerik.Windows.Controls.Input.dll
• Telerik.Windows.Data.dll

L'étape suivante consiste à créer une classe qui décrit les cartes.

 public   class   BusinessCard  
   { 
    public   string   ContactName { get ;  set ; }   
    public   string   PhoneNumber { get ;  set ; }   
    public   string   Email { get ;  set ; }   
    public   string   Site Web { get ;  set ; }   
    public   string   Title { get ;  set ; }   
  } 

Par souci de simplicité, nous pouvons renseigner la source dans la fenêtre principale de l'application.

 private   static   Random rndNumberGenerator =  new   Random (0);  
   public   MainWindow ()  
   { [19659002]    InitializeComponent ();   
    var firstNames =  new   List < string [19659040]> () { "Laura"  "Anne"  "Margaret"  "Michael"  " Robert "" Steven " };   



  


               




    var lastNames =  new   List < string > () { "Suyama"  "Davolio"  "Buchanan" [19659093] "King"  "Peacock"  "Leverling"  };   
    var titres =  new   List < string > () { "Sales Representative"  "Sales Manager"  "Inside Sales Coordinator "" Vice-président, Ventes " };   
    var source =  new   ObservableCollection  ] ();   
    pour   ( int   i = 0; i <10; i ++)   
    {  
    var firstName = firstNames [rndNumberGenerator.Next(0, firstNames.Count)];   
    var lastName = lastNames [rndNumberGenerator.Next(0, lastNames.Count)];   
    source.Add ( new [19659033] Carte de visite ()   
    {  
    ContactName = firstName +  " "  + lastName,   
    PhoneNumber = " (71) 555-4444 "  [19659002]    E-mail = firstName.ToLower () [0] +  "."   + lastName.ToLower () +  "@ telerikdemo.com"   
    Site Web = premier Name.ToLower () + lastName.ToLower () +  ". Com"   
    Title = titres [rndNumberGenerator.Next(0, titles.Count)]   
   });   
   }   
    DataContext = source;   
  } 

Et la dernière étape serait de définir le contrôle CardView en XAML et de définir ses propriétés.

 <  telerik: RadCardView   ItemsSource  =  "{Binding}"  
    CardHeaderBinding  =  "{Binding ContactName} "  
    MinorLength  = " 250 "  
    AutoGenerateDataFieldDescriptors [19659040] =  "False" >   
    < telerik: RadCardView.DataFieldDescriptors >   
    < telerik: CardDataFieldDescriptor   DataMemberBinding  =  "{Binding Title}"   />   
    < telerik: CardDataFieldDescriptor   DataMemberBinding  =  "{Binding PhoneNumber}"   Header  =  "Phone"  />   
    < telerik: CardDataFieldDescriptor   DataMemberBinding  =  "{Binding Email}"   />   
    < telerik: CardDataFieldDescriptor   DataMemberBinding  =  "{Binding Website}"   />   [19659002]    </  telerik: RadCardView.DataFieldDescriptors >   
   </  telerik: RadCardView > 

Finale

J'espère que cet aperçu des fonctionnalités vous sera utile. À partir de ce moment, vous devriez être en mesure de commencer à concevoir des solutions d'interface utilisateur intelligentes avec le composant. Commencez votre voyage avec Telerik UI pour WPF avec un téléchargement rapide depuis votre compte telerik.com. Si vous êtes nouveau sur le produit, vous pouvez obtenir un essai gratuit de 30 jours:

Essayez UI for WPF

Si vous avez des commentaires ou des questions sur les commandes, je vous encourage vivement à Envoyez-nous vos commentaires. Vous pouvez le faire dans la section commentaires ci-dessous ou dans le Feedback Portal .