Share via

Résumé du chapitre 19. Vues de collection

  • Article

Remarque

Ce livre a été publié au printemps 2016 et n’a pas été mis à jour depuis. Il y a beaucoup dans le livre qui reste précieux, mais certains documents sont obsolètes, et certains sujets ne sont plus entièrement corrects ou complets.

Xamarin.Forms définit trois vues qui conservent des collections et affichent leurs éléments :

  • Picker est une liste relativement courte d’éléments de chaîne qui permet à l’utilisateur de choisir un élément
  • ListView est souvent une longue liste d’éléments généralement du même type et de la mise en forme, ce qui permet également à l’utilisateur de choisir un
  • TableView est une collection de cellules (généralement de différents types et apparences) pour afficher des données ou gérer les entrées utilisateur

Il est courant pour les applications MVVM d’utiliser la ListView collection d’objets sélectionnable.

Options de programme avec sélecteur

Il Picker s’agit d’un bon choix lorsque vous devez autoriser l’utilisateur à choisir une option parmi une liste relativement courte d’éléments string .

Gestion des événements et du sélecteur

L’exemple PickerDemo montre comment utiliser XAML pour définir la PickerTitle propriété et ajouter string des éléments à la Items collection. Lorsque l’utilisateur sélectionne le Picker, il affiche les éléments de la collection de manière dépendante de la Items plateforme.

L’événement SelectedIndexChanged indique quand l’utilisateur a sélectionné un élément. La propriété de base SelectedIndex zéro indique ensuite l’élément sélectionné. Si aucun élément n’est sélectionné, SelectedIndex est égal à –1.

Vous pouvez également utiliser SelectedIndex pour initialiser l’élément sélectionné, mais il doit être défini une fois la Items collection remplie. En XAML, cela signifie que vous utiliserez probablement un élément de propriété pour définir SelectedIndex.

Liaison de données du sélecteur

La SelectedIndex propriété est soutenue par une propriété pouvant être liée, mais Items n’est pas, de sorte que l’utilisation de la liaison de données avec un Picker est difficile. Une solution consiste à utiliser la Picker combinaison avec une ObjectToIndexConverter telle que celle de la Xamarin.Formsbibliothèque Book.Shared Computer Toolkit. PickerBinding montre comment cela fonctionne.

Remarque

Inclut Xamarin.FormsPicker et SelectedItem propriétés ItemsSource qui prennent désormais en charge la liaison de données. Voir Sélecteur.

Rendu des données avec ListView

Il ListView s’agit de la seule classe qui dérive de ItemsView<TVisual> laquelle elle hérite des propriétés et ItemTemplate des ItemsSource propriétés.

ItemsSource est de type IEnumerable , mais il est null par défaut et doit être explicitement initialisé ou (plus couramment) défini sur une collection par le biais d’une liaison de données. Les éléments de cette collection peuvent être de n’importe quel type.

ListView définit une SelectedItem propriété définie sur l’un des éléments de la ItemsSource collection ou null si aucun élément n’est sélectionné. ListView déclenche l’événement ItemSelected lorsqu’un nouvel élément est sélectionné.

Collections et sélections

L’exemple ListViewList remplit une ListView valeur de 17 Color valeurs dans une List<Color> collection. Les éléments sont sélectionnables, mais par défaut, ils sont affichés avec leurs représentations inattractives ToString . Plusieurs exemples de ce chapitre montrent comment corriger cet affichage et le rendre aussi attrayant que souhaité.

Séparateur de lignes

Sur les écrans iOS et Android, une ligne mince sépare les lignes. Vous pouvez contrôler cela avec les propriétés et SeparatorColor les SeparatorVisibility propriétés. SeparatorVisibility est de type SeparatorVisibility, énumération avec deux membres :

Liaison de données de l’élément sélectionné

La SelectedItem propriété est sauvegardée par une propriété pouvant être liée. Il peut donc s’agir de la source ou de la cible d’une liaison de données. Sa valeur par défaut BindingMode est OneWayToSource, mais généralement elle est la cible d’une liaison de données bidirectionnelle, en particulier dans les scénarios MVVM. L’exemple ListViewArray illustre ce type de liaison.

Différence ObservableCollection

L’exemple ListViewLogger définit la ItemsSource propriété d’une List<DateTime>ListView collection, puis ajoute progressivement un nouvel DateTime objet à la collection à l’aide d’un minuteur.

Toutefois, le ListView fichier ne se met pas automatiquement à jour, car la List<T> collection n’a pas de mécanisme de notification pour indiquer quand les éléments sont ajoutés ou supprimés de la collection.

Une classe beaucoup mieux à utiliser dans ces scénarios est ObservableCollection<T> définie dans l’espace System.Collections.ObjectModel de noms. Cette classe implémente l’interface INotifyCollectionChanged et déclenche par conséquent un CollectionChanged événement lorsque des éléments sont ajoutés ou supprimés de la collection, ou lorsqu’ils sont remplacés ou déplacés dans la collection. Lorsque l’implémentation ListViewINotifyCollectionChanged d’une classe a été définie en interne sur sa ItemsSource propriété, elle attache un gestionnaire à l’événement CollectionChanged et met à jour son affichage lorsque la collection change.

L’exemple ObservableLogger illustre l’utilisation de ObservableCollection.

Modèles et cellules

Par défaut, un ListView élément affiche des éléments dans sa collection à l’aide de la méthode de ToString chaque élément. Une meilleure approche consiste à définir un modèle pour afficher les éléments.

Pour tester cette fonctionnalité, vous pouvez utiliser la NamedColor classe dans la Xamarin.Formsbibliothèque Book.Shared Computer Toolkit. Cette classe définit une propriété statique All de type IList<NamedColor> qui contient 141 NamedColor objets correspondant aux champs publics de la Color structure.

L’exemple NaiveNamedColorList définit l’un ListViewItemsSource sur cette NamedColor.All propriété, mais seuls les noms de classes complets des NamedColor objets sont affichés.

ListView a besoin d’un modèle pour afficher ces éléments. Dans le code, vous pouvez définir la ItemTemplate propriété définie par ItemsView<TVisual> un DataTemplate objet à l’aide du DataTemplate constructeur qui fait référence à un dérivé de la Cell classe. Cell a cinq dérivés :

  • TextCell — contient deux Label vues (conceptuellement parlant)
  • ImageCell — ajoute une Image vue à TextCell
  • EntryCell — contient une Entry vue avec un Label
  • SwitchCell — contient un Switch avec un Label
  • ViewCell — peut être n’importe quel View (probablement avec des enfants)

Appelez SetValue ensuite et SetBinding sur l’objet DataTemplate pour associer des valeurs aux Cell propriétés, ou pour définir des liaisons de données sur les Cell propriétés référençant les propriétés des éléments de la ItemsSource collection. Ceci est illustré dans l’exemple TextCellListCode .

Chaque élément étant affiché par l’arborescence ListViewvisuelle, une petite arborescence visuelle est construite à partir du modèle et les liaisons de données sont établies entre l’élément et les propriétés des éléments de cette arborescence visuelle. Vous pouvez avoir une idée de ce processus en installant des gestionnaires pour les événements et ItemDisappearing les ItemAppearing événements du ListView, ou en utilisant un constructeur alternatif DataTemplate qui utilise une fonction appelée chaque fois que l’arborescence visuelle d’un élément doit être créée.

TextCellListXaml affiche un programme entièrement identique en XAML. Une DataTemplate balise est définie sur la ItemTemplate propriété du ListView, puis la TextCell balise est définie sur le DataTemplate. Les liaisons aux propriétés des éléments de la collection sont définies directement sur les TextDetail propriétés de la TextCellcollection .

Cellules personnalisées

En XAML, il est possible de définir une ViewCellDataTemplate arborescence visuelle personnalisée comme View propriété .ViewCell (View est la propriété de contenu de ViewCell sorte que les ViewCell.View balises ne sont pas obligatoires.) L’exemple CustomNamedColorList illustre cette technique :

Capture d’écran triple de la liste de couleurs nommées personnalisée

Obtenir le dimensionnement approprié pour toutes les plateformes peut être difficile. La RowHeight propriété est utile, mais dans certains cas, vous voudrez recourir à la HasUnevenRows propriété, ce qui est moins efficace, mais force la ListView taille des lignes. Pour iOS et Android, vous devez utiliser l’une de ces deux propriétés pour obtenir un dimensionnement de ligne approprié.

Regroupement des éléments ListView

ListView prend en charge le regroupement d’éléments et la navigation entre ces groupes. La ItemsSource propriété doit être définie sur une collection de collections : l’objet défini ItemsSource à implémenter IEnumerable, et chaque élément de la collection doit également implémenter IEnumerable. Chaque groupe doit inclure deux propriétés : une description textuelle du groupe et une abréviation à trois lettres.

La NamedColorGroup classe de la Xamarin.Formsbibliothèque Book.Shared Computer Toolkit crée sept groupes d’objetsNamedColor. L’exemple ColorGroupList montre comment utiliser ces groupes avec la IsGroupingEnabled propriété définie ListViewtruesur , et les GroupDisplayBindingGroupShortNameBinding propriétés liées aux propriétés de chaque groupe.

En-têtes de groupe personnalisés

Il est possible de créer des en-têtes personnalisés pour les ListView groupes en remplaçant la GroupDisplayBinding propriété par la GroupHeaderTemplate définition d’un modèle pour les en-têtes.

ListView et interactivité

En règle générale, une application obtient une interaction utilisateur avec un ListView gestionnaire en attachant un gestionnaire à l’événement ou ItemTapped à l’événementItemSelected, ou en définissant une liaison de données sur la SelectedItem propriété. Toutefois, certains types de cellules (EntryCell et SwitchCell) autorisent l’interaction utilisateur, et il est également possible de créer des cellules personnalisées qui interagissent eux-mêmes avec l’utilisateur. InteractiveListView crée 100 instances et permet à l’utilisateur de ColorViewModel modifier chaque couleur à l’aide d’un trio d’élémentsSlider. Le programme utilise également le ColorToContrastColorConverterXamarin.Formslivre.Shared Computer Toolkit.

ListView et MVVM

ListView joue un rôle important dans les scénarios MVVM. Chaque fois qu’une IEnumerable collection existe dans un ViewModel, elle est souvent liée à un ListView. En outre, les éléments de la collection implémentent INotifyPropertyChanged souvent pour établir une liaison avec les propriétés d’un modèle.

Collection de ViewModels

Pour l’explorer, la bibliothèque SchoolOfFineArts crée plusieurs classes basées sur un fichier de données XML et des images d’étudiants fictifs à cette école fictive.

La classe Student est dérivée de ViewModelBase. La StudentBody classe est une collection d’objets Student et dérive également de ViewModelBase. Le SchoolViewModel fichier XML est téléchargé et assemble tous les objets.

Le programme StudentList utilise un ImageCell pour afficher les étudiants et leurs images dans un ListView:

Capture d’écran triple de la liste des étudiants

L’exemple ListViewHeader ajoute une Header propriété, mais elle s’affiche uniquement sur Android.

Sélection et contexte de liaison

Le programme SelectedStudentDetail lie l’un BindingContextStackLayout à la SelectedItem propriété du ListView. Cela permet au programme d’afficher des informations détaillées sur l’étudiant sélectionné.

Menu contextuels

Une cellule peut définir un menu contextuel implémenté de manière spécifique à la plateforme. Pour créer ce menu, ajoutez des MenuItem objets à la ContextActions propriété du Cell.

MenuItem définit cinq propriétés :

Les Command propriétés impliquent CommandParameter que ViewModel pour chaque élément contient des méthodes pour exécuter les commandes de menu souhaitées. Dans les scénarios non MVVM, MenuItem définit également un Clicked événement.

CellContextMenu illustre cette technique. La Command propriété de chacun MenuItem est liée à une propriété de type ICommand dans la Student classe. Définissez la IsDestructive propriété sur true une MenuItem valeur qui supprime ou supprime l’objet sélectionné.

Variation des visuels

Parfois, vous voudrez de légères variations dans les visuels des éléments dans la ListView base d’une propriété. Par exemple, lorsque la moyenne d’un étudiant tombe en dessous de 2,0, l’exemple ColorCodedStudents affiche le nom de l’étudiant en rouge. Pour ce faire, utilisez un convertisseur de valeur de liaison, ThresholdToObjectConverterdans la Xamarin.Formsbibliothèque Book.Shared Computer Toolkit.

Actualisation du contenu

Il ListView prend en charge un mouvement d’extraction pour actualiser ses données. Le programme doit définir la IsPullToRefresh propriété pour true l’activer. Répond ListView au mouvement d’extraction en définissant sa IsRefreshing propriété truesur , et en générant l’événement Refreshing et (pour les scénarios MVVM) appelant la Execute méthode de sa RefreshCommand propriété.

Le code qui gère l’événement ou l’événement met éventuellement à jour les données affichées par les ListView données et les rétablit IsRefreshingfalse.RefreshCommandRefresh

L’exemple RssFeed illustre l’utilisation d’une RssFeedViewModel méthode qui implémente et IsRefreshing de RefreshCommand propriétés pour la liaison de données.

TableView et ses intentions

Bien que l’affichage ListView général de plusieurs instances du même type, il TableView est généralement axé sur la fourniture d’une interface utilisateur pour plusieurs propriétés de différents types. Chaque élément est associé à son propre Cell dérivé pour afficher la propriété ou lui fournir une interface utilisateur.

Propriétés et hiérarchies

TableView définit seulement quatre propriétés :

L’énumération TableIntent indique la façon dont vous envisagez d’utiliser :TableView

Ces membres suggèrent également certaines utilisations pour le TableView.

Plusieurs autres classes sont impliquées dans la définition d’une table :

  • TableSectionBase est une classe abstraite qui dérive et BindableObject définit une Title propriété

  • TableSectionBase<T> est une classe abstraite qui dérive et TableSectionBase implémente IList<T> et INotifyCollectionChanged

  • TableSection dérive de TableSectionBase<Cell>

  • TableRoot dérive de TableSectionBase<TableSection>

En bref, TableView a une Root propriété que vous définissez sur un TableRoot objet, qui est une collection d’objets TableSection , chacune d’elles étant une collection d’objets Cell . Un tableau comporte plusieurs sections, et chaque section a plusieurs cellules. La table elle-même peut avoir un titre, et chaque section peut avoir un titre. Bien qu’il TableView utilise des Cell dérivés, il n’utilise DataTemplatepas .

Formulaire prosaïque

L’exemple EntryForm définit un modèle d’affichagePersonalInformation, une instance dont devient le TableViewBindingContext . Chaque Cell dérivé de sa TableSection classe peut alors avoir des liaisons aux propriétés de la PersonalInformation classe.

Cellules personnalisées

L’exemple ConditionalCells se développe sur EntryForm. La ProgrammerInformation classe inclut une propriété booléenne qui régit l’applicabilité de deux propriétés supplémentaires. Pour ces deux propriétés supplémentaires, le programme utilise une fonctionnalité personnalisée PickerCell basée sur un PickerCell.xaml et PickerCell.xaml.cs dans la Xamarin.Formsbibliothèque Book.Shared Computer Toolkit.

Bien que les IsEnabled propriétés des deux PickerCell éléments soient liées à la propriété booléenne dans ProgrammerInformation, cette technique ne semble pas fonctionner, ce qui invite l’exemple suivant.

Sections conditionnelles

L’exemple ConditionalSection place les deux éléments qui sont conditionnels à la sélection de l’élément booléen dans un élément distinctTableSection. Le fichier code-behind supprime cette section de la TableView propriété booléenne ou l’ajoute en fonction de la propriété booléenne.

Menu TableView

Une autre utilisation d’un TableView est un menu. L’exemple MenuCommands illustre un menu qui vous permet de déplacer un peu BoxView autour de l’écran.