Une plongée profonde dans le premier contrôle TreeView du monde pour Xamarin

Apprenez à tirer parti du contexte des éléments du contrôle TreeView dans l'interface utilisateur Telerik pour Xamarin – le premier contrôle Xamarin TreeView sur le marché.

Cet article de blog est la suite de ma publication initiale À la sortie du contrôle TreeView dans Telerik UI pour Xamarin . Ci-dessous, je vais passer en revue comment démarrer avec le contrôle TreeView, en définissant les exigences et en voyant les résultats. J'espère que cela vous donnera une plongée profonde dans le contrôle, de sorte que vous pouvez commencer à l'utiliser pour le développement de votre application mobile.

Mise en route

Deux conditions importantes pour la visualisation de la hiérarchie sont les ItemsSource et HierarchyAdapter . Sur la base de ce qui est prévu, chaque objet métier est indexé et un contexte dédié est créé. Le contexte est une classe qui contient des méta-informations décrivant la hiérarchie. Il optimise et simplifie également les opérations telles que l'ajout, la suppression, l'extension et la réduction des éléments.

Après avoir créé tous les contextes, la disposition de RadTreeView les utilise à la place des éléments métier. Chaque contexte est de type TreeViewDataItem et est défini en tant que BindingContext de la représentation visuelle respective de l'objet métier, et expose les propriétés suivantes:

• Item : objet contient l'objet métier
• En-tête : chaîne contient le texte extrait de la propriété défini comme DisplayMemberPath
• Niveau : uint décrit la profondeur de la hiérarchie de l'élément
• IsExpanded : bool true si les enfants de l'élément sont visibles, sinon faux
• IsChecked : nullable bool true si la case à cocher de l'élément est cochée, false s'il n'est pas coché, null si les enfants sont cochés et non cochés
• IsLeaf : bool true si l'élément n'a pas d'enfants, sinon false

Cette métadonnée peut être utilisée lorsqu'un ItemTe personnalisé Le mplate est utilisé. Avec l'aide de déclencheurs et / ou de convertisseurs, vous pouvez modifier dynamiquement le DataTemplate.

Explication du modèle par défaut

Le ItemTemplate par défaut de RadTreeView utilise également cette approche pour obtenir l'aspect hiérarchique. L'indentation sur les différents niveaux est juste à gauche Marge appliquée à l'étiquette visualisant l'en-tête . L'indicateur expand / collapse est une autre étiquette dont le texte est modifié en fonction des propriétés IsExpanded et IsLeaf . Et enfin, un RadCheckBox est lié au IsChecked en mode TwoWay pour maintenir l'interface utilisateur synchronisée avec l'état actuel de l'élément et vice versa.

Définition des exigences et des actions

Je vais créer un ItemTempate personnalisé pour couvrir les exigences:

• Les éléments avec et sans enfants devraient avoir TextColor différent
• Tous les éléments, sauf les niveaux 0 et 1, devraient visualiser aligné à droite Switch à la place RadCheckBox
• Le commutateur devrait servir à vérifier l'article

Voici comment je vais couvrir les exigences:

• En gardant à l'esprit que toutes les feuilles d'une structure arborescente n'ont pas d'enfants, je vais utiliser le drapeau IsLeaf pour différencier les éléments avec et sans enfants
• Pour comprendre si le Switch doit être visualisé, j'utiliserai la propriété Level .
• Je lierai en mode TwoWay la propriété IsToggled du Switch à la propriété IsChecked du contexte. Pour tester si la fonctionnalité de vérification fonctionne, j'imprimerai le contenu de la collection CheckedItems de RadTreeView.

Présentation de la solution

La DataTemplate suivante couvre toutes les exigences:

Voici à quoi ça ressemble avec un simple ItemsSource :

Wrapping Up

Vous devez maintenant savoir exploiter tout le potentiel du sous-jacent TreeViewDataItem objet.Plus d'informations sur l'implémentation spécifique peuvent être trouvés dans la petite application que j'ai créé spécialement pour cette démo.

En conclusion, nous aimerions savoir ce que vous pensez du contrôle TreeView et comment nous pouvons continuer à l'améliorer. Il fait partie de l'interface utilisateur Telerik pour Xamarin, dont vous pouvez en apprendre plus sur la page produit ou télécharger un essai gratuit de 30 jours et jouer avec les 70+ Xamarin disponibles Contrôles et modèles Visual Studio.

Vous pouvez toujours consulter la documentation détaillée pour plus d'exemples de développeurs, et nous nous vous invitons toujours à nous aider ou à partager vos commentaires via notre portail de commentaires .

Merci et j'ai hâte de voir toutes les super applications mobiles que vous allez créer!