Fermer

juin 21, 2018

Premières impressions – TreeView dans Telerik UI pour Xamarin


Cet article vous familiarisera avec le composant TreeView de la suite Telerik UI pour Xamarin – comment il peut être utilisé, certaines de ses fonctionnalités clés et comment le configurer pour vos applications mobiles.

Une des raisons pour lesquelles le composant TreeView (par exemple RadTreeView) a été créé est de couvrir les scénarios où une présentation de données hiérarchique est nécessaire. Bien sûr, ce n'est pas le seul scénario dans lequel le contrôle peut être utilisé, mais c'est le meilleur.

Le contrôle comprend les fonctionnalités intégrées suivantes:

  • Navigation hiérarchique
  • API Expand / collapse
  • Prise en charge des commandes
  • Prise en charge de CheckBox
  • DataBinding
  • Virtualisation de l'interface utilisateur
  • ItemTemplateSelectors
  • Theming

Nous allons examiner de plus près l'exemple Customization de notre TreeView QSF (framework de démarrage rapide) et voir comment est configuré TreeView.

Définir le scénario

L'exemple montre toutes les villes du monde dans lesquelles une organisation a au moins un bureau. Les villes sont regroupées par pays et les pays sont regroupés par leur continent.

Mise en place des données

Les deux étapes les plus importantes ici sont les suivantes: ItemsSource et HierarchyAdapter En d'autres termes, les utilisateurs doivent fournir les données brutes qui seront visualisées et un adaptateur qui peut récupérer les enfants de chaque entrée de données. Sur cette base, RadTreeView crée la hiérarchie. Dans l'exemple ci-dessous, ItemsSource est une simple ObservableCollection contenant des objets métier décrivant un continent.

Sans HiearchyAdapter, RadTreeView n'affiche que les éléments de niveau racine de ItemsSource. Pour afficher correctement la hiérarchie, l'interface Telerik.XamarinForms.Common.IHierarchyAdapter doit être implémentée. Il a deux méthodes – GetItems () et GetItemAt () . Dans GetItems (), l'adaptateur doit renvoyer tous les enfants de l'élément passé comme seul paramètre. GetItemAt () doit renvoyer un enfant spécifique d'un élément fourni. Pour plus de détails, vous pouvez vous référer au code source de l'exemple . Une fois ces étapes effectuées, les données hiérarchiques seront visualisées

Très probablement, à ce stade, le résultat visualisé ne correspondra pas à vos exigences de conception. En effet, lorsqu'aucun ItemTemplate ou ItemTemplateSelector n'est appliqué, RadTreeView affiche la méthode ToString () renvoyée par chaque objet métier. Pour embellir la visualisation, des mesures supplémentaires doivent être prises

Création de modèles d'éléments

Maintenant que les données sont définies, nous pouvons procéder à la personnalisation de l'apparence des éléments. RadTreeView vous permet d'appliquer un DataTemplate différent pour chaque élément via un DataTemplateSelector. Dans l'exemple, ceci est réalisé par la classe ItemTemplateSelector. La mise en œuvre spécifique peut être vu dans le rapport GitHub . Comme vous pouvez le voir, en plus de la logique de sélection, la classe expose plusieurs propriétés de type DataTemplate . Cela permet de définir les propriétés dans XAML comme suit:

< telerikDataControls: RadTreeView.ItemTemplateSelector >

< local: ItemTemplateSelector >

< local: ItemTemplateSelector.ContinentTemplate > [19659003Scripte] < Type de données >

...

</ Modèle de données >

</ local: ItemTemplateSelector.ContinentTemplate >

< local: ItemTemplateSelector.CountryTemplate >

< Type de données >

...

</ Modèle de données >

</ local: ItemTemplateSelector.CountryTemplate >

[ local: ItemTemplateSelector.CityTemplate >

< Type de données >

...

</ Modèle de données >

</ local: ItemTemplateSelector.CityTemplate >

local: ItemTemplateSelector >

< /telerikDataControls:RadTreeView.ItemTemplateSelector>

Admiring the Result

Dans les différents DataTemplates, vous pouvez créer la conception requise pour chacun des éléments de la hiérarchie. Une fois cela fait, vous pouvez vous asseoir, vous détendre et profiter de votre travail.

 RadTreeView QSF Personnalisation Demo "title =" RadTreeView QSF Personnalisation Demo "style =" vertical-align: middle; "/></p data-recalc-dims=

Wrapping Up

Vous devriez maintenant pouvoir envoyer correctement des données à RadTreeView et implémenter un design personnalisé pour les éléments.Comme toujours, vous trouverez plus d'informations sur le reste des fonctionnalités du composant dans notre site en ligne documentation Vous pouvez également partager vos commentaires et suggestions pour la suite via le portail de commentaires .

Si c'est la première fois que vous entendez parler de l'interface Telerik pour Xamarin suite et que vous voulez essayez-le pour le développement de votre application mobile, vous pouvez le faire en allant sur le site Web ou directement en téléchargeant un essai gratuit .

Merci et heureux codage!


Les commentaires sont désactivé en mode de prévisualisation.




Source link