Xamarin.Forms Didacticiel CollectionView

Article
Developer (Débutant)
13 minutes avant achèvement

Avant de tenter ce didacticiel, vous devez avoir suivi les guides et didacticiels suivants :

Créez votre premier Xamarin.Forms démarrage rapide d’application .
Didacticiel StackLayout.
Didacticiel Grid.
Didacticiel Label.
Didacticiel Image.

Dans ce tutoriel, vous allez apprendre à :

Créez un Xamarin.FormsCollectionView code XAML.
Remplir l’élément CollectionView avec des données.
Répondre aux éléments CollectionView sélectionnés.
Personnaliser l’apparence des éléments d’une CollectionView.

Vous allez utiliser Visual Studio 2019 ou Visual Studio pour Mac pour créer une application simple qui montre comment personnaliser l’apparence d’une CollectionView. Les captures d’écran suivantes montrent l’application finale :

Créer une CollectionView

12 minutes restantes

Visual Studio
Visual Studio pour Mac

Pour suivre ce didacticiel, vous devez disposer de Visual Studio 2019 (dernière version) sur lequel est installée la charge de travail Développement mobile en .NET. Vous aurez également besoin d’un Mac couplé pour générer l’application du didacticiel sur iOS. Pour plus d’informations sur l’installation de la plateforme Xamarin, consultez Installation de Xamarin. Pour plus d’informations sur la connexion de Visual Studio 2019 à un hôte de build Mac, consultez l’article Appairer avec un Mac pour le développement Xamarin.iOS.

Lancez Visual Studio et créez une application vide Xamarin.Forms nommée CollectionViewTutorial.

Important

Pour les extraits C# et XAML de ce tutoriel, la solution doit se nommer CollectionViewTutorial. L’utilisation d’un autre nom entraîne des erreurs de build quand vous copiez le code à partir de ce didacticiel dans la solution.

Pour plus d’informations sur la bibliothèque .NET Standard créée, consultez Anatomie d’une Xamarin.Forms application dans le Xamarin.Forms guide de démarrage rapide Deep Dive.

Dans l’Explorateur de solutions, dans le projet CollectionViewTutorial, double-cliquez sur MainPage.xaml pour l’ouvrir. Puis, dans MainPage.xaml, supprimez tout le code du modèle et remplacez-le par le code suivant :

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CollectionViewTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <CollectionView>
            <CollectionView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                  <x:String>Baboon</x:String>
                  <x:String>Capuchin Monkey</x:String>
                  <x:String>Blue Monkey</x:String>
                  <x:String>Squirrel Monkey</x:String>
                  <x:String>Golden Lion Tamarin</x:String>
                  <x:String>Howler Monkey</x:String>
                  <x:String>Japanese Macaque</x:String>
                </x:Array>
            </CollectionView.ItemsSource>
        </CollectionView>
    </StackLayout>
</ContentPage>

Ce code définit de manière déclarative l’interface utilisateur de la page, qui comprend un élément CollectionView dans StackLayout. La propriété CollectionView.ItemsSource spécifie les éléments à afficher, lesquels sont définis dans un tableau de chaînes.

Dans la barre d’outils Visual Studio, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application à l’intérieur du simulateur iOS distant ou de l’émulateur Android de votre choix :

Dans Visual Studio, arrêtez l’application.

Pour suivre ce didacticiel, vous devez disposer de Visual Studio pour Mac (dernière version) avec une prise en charge des plateformes iOS et Android. Vous aurez également besoin de Xcode (dernière version). Pour plus d’informations sur l’installation de la plateforme Xamarin, consultez Installation de Xamarin.

Lancez Visual Studio pour Mac et créez une application vide Xamarin.Forms nommée CollectionViewTutorial.

Important

Pour les extraits C# et XAML de ce tutoriel, la solution doit se nommer CollectionViewTutorial. L’utilisation d’un autre nom entraîne des erreurs de build quand vous copiez le code à partir de ce didacticiel dans la solution.

Pour plus d’informations sur la bibliothèque .NET Standard créée, consultez Anatomie d’une Xamarin.Forms application dans le Xamarin.Forms guide de démarrage rapide Deep Dive.

Dans le Panneau Solutions, dans le projet CollectionViewTutorial, double-cliquez sur MainPage.xaml pour l’ouvrir. Puis, dans MainPage.xaml, supprimez tout le code du modèle et remplacez-le par le code suivant :

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CollectionViewTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <CollectionView>
            <CollectionView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                  <x:String>Baboon</x:String>
                  <x:String>Capuchin Monkey</x:String>
                  <x:String>Blue Monkey</x:String>
                  <x:String>Squirrel Monkey</x:String>
                  <x:String>Golden Lion Tamarin</x:String>
                  <x:String>Howler Monkey</x:String>
                  <x:String>Japanese Macaque</x:String>
                </x:Array>
            </CollectionView.ItemsSource>
        </CollectionView>
    </StackLayout>
</ContentPage>

Dans la barre d’outils Visual Studio pour Mac, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application dans le simulateur iOS ou dans l’émulateur Android de votre choix :

Dans Visual Studio pour Mac, arrêtez l’application.

Remplir de données

10 minutes restantes

L’élément CollectionView est renseigné avec les données à l’aide de la propriété ItemsSource, de type IEnumerable. L’étape précédente a permis de remplir l’élément CollectionView dans XAML avec un tableau de chaînes. En général cependant, une CollectionView va contenir des données provenant d’une collection, définie dans le code, qui implémente IEnumerable.

Dans cet exercice, vous allez modifier le projet CollectionViewTutorial pour remplir la CollectionView avec des données provenant d’une collection d’objets stockés dans une List.

Visual Studio
Visual Studio pour Mac

Dans l’Explorateur de solutions, dans le projet CollectionViewTutorial, ajoutez une classe nommée Monkey qui contient le code suivant :
```
public class Monkey
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string ImageUrl { get; set; }

    public override string ToString()
    {
        return Name;
    }        
}
```
Ce code définit un objet Monkey qui stocke le nom, l’emplacement et l’URL d’une image qui représente le monkey. De plus, la classe substitue la méthode ToString pour retourner la propriété Name.

Dans l’Explorateur de solutions, dans le projet CollectionViewTutorial, développez MainPage.xaml, puis double-cliquez sur MainPage.xaml.cs pour l’ouvrir. Ensuite, dans MainPage.xaml.cs, supprimez tout le code du modèle et remplacez-le par le code suivant :

using System.Collections.Generic;
using Xamarin.Forms;

namespace CollectionViewTutorial
{
    public partial class MainPage : ContentPage
    {
        public IList<Monkey> Monkeys { get; private set; }

        public MainPage()
        {
            InitializeComponent();

            Monkeys = new List<Monkey>();
            Monkeys.Add(new Monkey
            {
                Name = "Baboon",
                Location = "Africa & Asia",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Capuchin Monkey",
                Location = "Central & South America",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Blue Monkey",
                Location = "Central and East Africa",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/BlueMonkey.jpg/220px-BlueMonkey.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Squirrel Monkey",
                Location = "Central & South America",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Saimiri_sciureus-1_Luc_Viatour.jpg/220px-Saimiri_sciureus-1_Luc_Viatour.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Golden Lion Tamarin",
                Location = "Brazil",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Golden_lion_tamarin_portrait3.jpg/220px-Golden_lion_tamarin_portrait3.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Howler Monkey",
                Location = "South America",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Alouatta_guariba.jpg/200px-Alouatta_guariba.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Japanese Macaque",
                Location = "Japan",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Macaca_fuscata_fuscata1.jpg/220px-Macaca_fuscata_fuscata1.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Mandrill",
                Location = "Southern Cameroon, Gabon, Equatorial Guinea, and Congo",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Mandrill_at_san_francisco_zoo.jpg/220px-Mandrill_at_san_francisco_zoo.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Proboscis Monkey",
                Location = "Borneo",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Proboscis_Monkey_in_Borneo.jpg/250px-Proboscis_Monkey_in_Borneo.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Red-shanked Douc",
                Location = "Vietnam, Laos",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Portrait_of_a_Douc.jpg/159px-Portrait_of_a_Douc.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Gray-shanked Douc",
                Location = "Vietnam",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Cuc.Phuong.Primate.Rehab.center.jpg/320px-Cuc.Phuong.Primate.Rehab.center.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Golden Snub-nosed Monkey",
                Location = "China",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Golden_Snub-nosed_Monkeys%2C_Qinling_Mountains_-_China.jpg/165px-Golden_Snub-nosed_Monkeys%2C_Qinling_Mountains_-_China.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Black Snub-nosed Monkey",
                Location = "China",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/RhinopitecusBieti.jpg/320px-RhinopitecusBieti.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Tonkin Snub-nosed Monkey",
                Location = "Vietnam",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Tonkin_snub-nosed_monkeys_%28Rhinopithecus_avunculus%29.jpg/320px-Tonkin_snub-nosed_monkeys_%28Rhinopithecus_avunculus%29.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Thomas's Langur",
                Location = "Indonesia",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Thomas%27s_langur_Presbytis_thomasi.jpg/142px-Thomas%27s_langur_Presbytis_thomasi.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Purple-faced Langur",
                Location = "Sri Lanka",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Semnopithèque_blanchâtre_mâle.JPG/192px-Semnopithèque_blanchâtre_mâle.JPG"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Gelada",
                Location = "Ethiopia",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Gelada-Pavian.jpg/320px-Gelada-Pavian.jpg"
            });

            BindingContext = this;
        }
    }
}

Ce code définit une propriété Monkeys de type IList<Monkey>, et l’initialise sur une liste vide dans le constructeur de classe. Les objets Monkey sont ensuite ajoutés à la collection Monkeys et l’élément BindingContext de la page est défini sur l’objet MainPage. Pour plus d’informations sur la BindingContext propriété, consultez Liaisons avec un contexte de liaison dans le guide de Xamarin.Forms liaison de données.

Important

La propriété BindingContext est héritée via l’arborescence d’éléments visuels. Par conséquent, comme elle a été définie sur l’objet ContentPage, les objets enfants de l’élément ContentPage héritent de sa valeur, y compris de CollectionView.

Dans MainPage.xaml, modifiez la déclaration CollectionView pour définir la propriété ItemsSource sur la collection Monkeys :
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
Ces données de code lient la propriété ItemsSource à la collection Monkeys. Lors de l’exécution, l’élément CollectionView examine BindingContext à la recherche de la collection Monkeys, et sera renseigné à l’aide des données de cette collection. Pour plus d’informations sur la liaison de données, consultez Xamarin.Forms Liaison de données.
Dans la barre d’outils Visual Studio, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application à l’intérieur du simulateur iOS distant ou de l’émulateur Android de votre choix :

L’élément CollectionView affiche la propriété Name pour chaque élément Monkey de la collection Monkeys. En effet, par défaut, l’élément CollectionView appelle la méthode ToString lors de l’affichage des objets à partir d’une collection (qui a été remplacée dans la classe Monkey pour retourner la valeur de propriété Name).

Dans Visual Studio, arrêtez l’application.

Dans Panneau Solutions, dans le projet CollectionViewTutorial, ajoutez une classe nommée Monkey qui contient le code suivant :
```
public class Monkey
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string ImageUrl { get; set; }

    public override string ToString()
    {
        return Name;
    }
}
```
Ce code définit un objet Monkey qui stocke le nom, l’emplacement et l’URL d’une image qui représente le monkey. De plus, la classe substitue la méthode ToString pour retourner la propriété Name.

Dans le Panneau Solutions, dans le projet CollectionViewTutorial, développez MainPage.xaml, puis double-cliquez sur MainPage.xaml.cs pour l’ouvrir. Ensuite, dans MainPage.xaml.cs, supprimez tout le code du modèle et remplacez-le par le code suivant :

using System.Collections.Generic;
using Xamarin.Forms;

namespace CollectionViewTutorial
{
    public partial class MainPage : ContentPage
    {
        public IList<Monkey> Monkeys { get; private set; }

        public MainPage()
        {
            InitializeComponent();

            Monkeys = new List<Monkey>();
            Monkeys.Add(new Monkey
            {
                Name = "Baboon",
                Location = "Africa & Asia",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Capuchin Monkey",
                Location = "Central & South America",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Blue Monkey",
                Location = "Central and East Africa",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/BlueMonkey.jpg/220px-BlueMonkey.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Squirrel Monkey",
                Location = "Central & South America",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Saimiri_sciureus-1_Luc_Viatour.jpg/220px-Saimiri_sciureus-1_Luc_Viatour.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Golden Lion Tamarin",
                Location = "Brazil",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Golden_lion_tamarin_portrait3.jpg/220px-Golden_lion_tamarin_portrait3.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Howler Monkey",
                Location = "South America",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Alouatta_guariba.jpg/200px-Alouatta_guariba.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Japanese Macaque",
                Location = "Japan",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Macaca_fuscata_fuscata1.jpg/220px-Macaca_fuscata_fuscata1.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Mandrill",
                Location = "Southern Cameroon, Gabon, Equatorial Guinea, and Congo",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Mandrill_at_san_francisco_zoo.jpg/220px-Mandrill_at_san_francisco_zoo.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Proboscis Monkey",
                Location = "Borneo",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Proboscis_Monkey_in_Borneo.jpg/250px-Proboscis_Monkey_in_Borneo.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Red-shanked Douc",
                Location = "Vietnam, Laos",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Portrait_of_a_Douc.jpg/159px-Portrait_of_a_Douc.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Gray-shanked Douc",
                Location = "Vietnam",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Cuc.Phuong.Primate.Rehab.center.jpg/320px-Cuc.Phuong.Primate.Rehab.center.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Golden Snub-nosed Monkey",
                Location = "China",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Golden_Snub-nosed_Monkeys%2C_Qinling_Mountains_-_China.jpg/165px-Golden_Snub-nosed_Monkeys%2C_Qinling_Mountains_-_China.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Black Snub-nosed Monkey",
                Location = "China",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/RhinopitecusBieti.jpg/320px-RhinopitecusBieti.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Tonkin Snub-nosed Monkey",
                Location = "Vietnam",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Tonkin_snub-nosed_monkeys_%28Rhinopithecus_avunculus%29.jpg/320px-Tonkin_snub-nosed_monkeys_%28Rhinopithecus_avunculus%29.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Thomas's Langur",
                Location = "Indonesia",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Thomas%27s_langur_Presbytis_thomasi.jpg/142px-Thomas%27s_langur_Presbytis_thomasi.jpg"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Purple-faced Langur",
                Location = "Sri Lanka",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Semnopithèque_blanchâtre_mâle.JPG/192px-Semnopithèque_blanchâtre_mâle.JPG"
            });

            Monkeys.Add(new Monkey
            {
                Name = "Gelada",
                Location = "Ethiopia",
                ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Gelada-Pavian.jpg/320px-Gelada-Pavian.jpg"
            });

            BindingContext = this;
        }
    }
}

Important

Dans MainPage.xaml, modifiez la déclaration CollectionView pour définir la propriété ItemsSource sur la collection Monkeys :
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
Ces données de code lient la propriété ItemsSource à la collection Monkeys. Lors de l’exécution, l’élément CollectionView examine BindingContext à la recherche de la collection Monkeys, et sera renseigné à l’aide des données de cette collection. Pour plus d’informations sur la liaison de données, consultez Xamarin.Forms Liaison de données.
Dans la barre d’outils Visual Studio pour Mac, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application dans le simulateur iOS ou dans l’émulateur Android de votre choix :

L’élément CollectionView affiche la propriété Name pour chaque élément Monkey de la collection Monkeys. En effet, par défaut, l’élément CollectionView appelle la méthode ToString lors de l’affichage des objets à partir d’une collection (qui a été remplacée dans la classe Monkey pour retourner la valeur de propriété Name).

Dans Visual Studio pour Mac, arrêtez l’application.

Répondre à la sélection d’un élément

6 minutes restantes

Visual Studio
Visual Studio pour Mac

Dans MainPage.xaml, modifiez la déclaration CollectionView pour qu’elle définisse la propriété SelectionMode sur Single et un gestionnaire pour l’événement SelectionChanged :
```
<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged" />
```
Ce code définit la sélection d’un seul élément dans la CollectionView et définit l’événement SelectionChanged sur un gestionnaire d’événements nommé OnSelectionChanged. Le gestionnaire d’événements sera créé à l’étape suivante.
Dans l’Explorateur de solutions, dans le projet CollectionViewTutorial, développez MainPage.xaml, puis double-cliquez sur MainPage.xaml.cs pour l’ouvrir. Puis, dans MainPage.xaml.cs, ajoutez le gestionnaire d’événements OnSelectionChanged à la classe :
```
void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Monkey selectedItem = e.CurrentSelection[0] as Monkey;
}
```
Quand un élément de la CollectionView est sélectionné, l’événement SelectionChanged est déclenché, ce qui exécute la méthode OnSelectionChanged. L’argument sender de la méthode est l’objet CollectionView chargé de déclencher l’événement, qui peut être utilisé pour accéder à l’objet CollectionView. L’argument SelectionChangedEventArgs de la méthode OnSelectionChanged fournit l’élément sélectionné.
Dans la barre d’outils Visual Studio, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application à l’intérieur du simulateur iOS distant ou de l’émulateur Android de votre choix :

Définissez un point d’arrêt dans le gestionnaire d’événements OnSelectionChanged et sélectionnez un élément dans la CollectionView. Examinez la valeur de la variable selectedItem pour vérifier qu’elle contient les données de l’élément sélectionné.

Dans Visual Studio, arrêtez l’application.

Pour plus d’informations sur la sélection d’éléments, consultez Xamarin.Forms la sélection de CollectionView.

Dans MainPage.xaml, modifiez la déclaration CollectionView pour qu’elle définisse la propriété SelectionMode sur Single et un gestionnaire pour l’événement SelectionChanged :
```
<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged" />
```
Ce code définit la sélection d’un seul élément dans la CollectionView et définit l’événement SelectionChanged sur un gestionnaire d’événements nommé OnSelectionChanged. Le gestionnaire d’événements sera créé à l’étape suivante.
Dans le Panneau Solutions, dans le projet CollectionViewTutorial, développez MainPage.xaml, puis double-cliquez sur MainPage.xaml.cs pour l’ouvrir. Puis, dans MainPage.xaml.cs, ajoutez le gestionnaire d’événements OnSelectionChanged à la classe :
```
void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Monkey selectedItem = e.CurrentSelection[0] as Monkey;
}
```
Quand un élément de la CollectionView est sélectionné, l’événement SelectionChanged est déclenché, ce qui exécute la méthode OnSelectionChanged. L’argument sender de la méthode est l’objet CollectionView chargé de déclencher l’événement, qui peut être utilisé pour accéder à l’objet CollectionView. L’argument SelectionChangedEventArgs de la méthode OnSelectionChanged fournit l’élément sélectionné.
Dans la barre d’outils Visual Studio pour Mac, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application dans le simulateur iOS ou dans l’émulateur Android de votre choix :

Définissez un point d’arrêt dans le gestionnaire d’événements OnSelectionChanged et sélectionnez un élément dans la CollectionView. Examinez la valeur de la variable selectedItem pour vérifier qu’elle contient les données de l’élément sélectionné.

Dans Visual Studio pour Mac, arrêtez l’application.

Pour plus d’informations sur la sélection d’éléments, consultez Xamarin.Forms la sélection de CollectionView.

Personnaliser l’apparence des éléments

3 minutes restantes

CollectionView était auparavant rempli avec des données à l’aide d’un mécanisme de liaison de données. Cependant, malgré la liaison de données à une collection, où chaque objet de la collection définissait plusieurs éléments de données, un seul élément de données était affiché par objet (la propriété Name de l’objet Monkey).

Dans cet exercice, vous allez modifier le projet CollectionViewTutorial pour que CollectionView affiche plusieurs éléments de données dans chaque ligne.

Visual Studio
Visual Studio pour Mac

Dans MainPage.xaml, modifiez la déclaration CollectionView pour personnaliser l’apparence de chaque élément de données :

<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10"
                  RowDefinitions="Auto, *"
                  ColumnDefinitions="Auto, *">
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Ce code définit la propriété CollectionView.ItemTemplate sur un DataTemplate, qui définit l’apparence de chaque élément dans la CollectionView. L’enfant du DataTemplate est une Grid, qui contient un objet Image et deux objets Label. Les données de l’objet Image relient leur propriété Source à la propriété ImageUrl de chaque objet Monkey, tandis que les objets Label relient leurs propriétés Text aux propriétés Name et Location de chaque objet Monkey.

Pour plus d’informations sur l’apparence des éléments d’une CollectionView, consultez Définir l’apparence des éléments. Pour plus d’informations sur les modèles de données, consultez Xamarin.Forms Modèles de données.

Dans la barre d’outils Visual Studio, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application à l’intérieur du simulateur iOS distant ou de l’émulateur Android de votre choix :

Dans Visual Studio, arrêtez l’application.

Dans MainPage.xaml, modifiez la déclaration CollectionView pour personnaliser l’apparence de chaque élément de données :

<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10"
                  RowDefinitions="Auto, *"
                  ColumnDefinitions="Auto, *">
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Dans la barre d’outils Visual Studio pour Mac, appuyez sur le bouton Démarrer (le bouton triangulaire qui ressemble à un bouton de lecture) pour lancer l’application dans le simulateur iOS ou dans l’émulateur Android de votre choix :

Dans Visual Studio pour Mac, arrêtez l’application.

Partager via

Xamarin.Forms Didacticiel CollectionView

Créer une CollectionView

Remplir de données

Répondre à la sélection d’un élément

Personnaliser l’apparence des éléments

Félicitations !

Étapes suivantes

Partager via

Xamarin.Forms Didacticiel CollectionView

Créer une CollectionView

Remplir de données

Répondre à la sélection d’un élément

Personnaliser l’apparence des éléments

Félicitations !

Étapes suivantes

Liens connexes