Xamarin.Forms Esercitazione su CollectionView

Articolo
Developer (Principiante)
13 minuti per il completamento

Prima di provare questa esercitazione è necessario avere completato correttamente:

Creare la prima Xamarin.Forms guida introduttiva all'app .
Esercitazione su StackLayout.
Esercitazione su Grid.
Esercitazione su Label.
Esercitazione su Image.

In questa esercitazione apprenderai a:

Creare un Xamarin.FormsCollectionView oggetto in XAML.
Popolare l'elemento CollectionView con dati.
Rispondere alla selezioni di voci dell'elemento CollectionView.
Personalizzare l'aspetto degli elementi CollectionView.

Si userà Visual Studio 2019 o Visual Studio per Mac per creare un'applicazione semplice che dimostri come personalizzare l'aspetto di un CollectionView. Gli screenshot seguenti illustrano l'applicazione finale:

Creare un elemento CollectionView

12 minuti rimanenti

Visual Studio
Visual Studio per Mac

Per completare questa esercitazione è necessario Visual Studio 2019 (la versione più recente) con installato il carico di lavoro Sviluppo di applicazioni per dispositivi mobili con .NET. È inoltre necessario un Mac associato per compilare l'applicazione dell'esercitazione per iOS. Per informazioni sull'installazione della piattaforma Xamarin, vedere Installazione di Xamarin. Per informazioni sulla connessione di Visual Studio 2019 a un host di compilazione Mac, vedere Associa a Mac per lo sviluppo di Xamarin.iOS.

Avviare Visual Studio e creare una nuova app vuota Xamarin.Forms denominata CollectionViewTutorial.

Importante

I frammenti di codice C# e XAML in questa esercitazione richiedono che la soluzione sia denominata CollectionViewTutorial. Se si usa un nome diverso, si verificheranno errori di compilazione quando si copia il codice da questa esercitazione alla soluzione.

Per altre informazioni sulla libreria .NET Standard che viene creata, vedere Anatomia di un'applicazioneXamarin.Forms nell'approfondimento della Xamarin.Forms guida introduttiva.

In Esplora soluzioni, nel progetto CollectionViewTutorial, fare doppio clic su MainPage.xaml per aprire il file. In MainPage.xaml rimuovere tutto il codice del modello e sostituirlo con il codice seguente:

<?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>

Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina costituita da un CollectionView in uno StackLayout. La proprietà CollectionView.ItemsSource consente di specificare le voci da visualizzare che sono definite in una matrice di stringhe.

Nella barra degli strumenti di Visual Studio premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS remoto o dell'emulatore Android prescelto:

In Visual Studio arrestare l'applicazione.

Per completare questa esercitazione è necessario Visual Studio per Mac, la versione più recente, con installato il supporto della piattaforma Android e iOS. Sarà necessario anche Xcode, la versione più recente. Per altre informazioni sull'installazione della piattaforma Xamarin, vedere Installazione di Xamarin.

Avviare Visual Studio per Mac e creare una nuova app vuota Xamarin.Forms denominata CollectionViewTutorial.

Importante

I frammenti di codice C# e XAML in questa esercitazione richiedono che la soluzione sia denominata CollectionViewTutorial. Se si usa un nome diverso, si verificheranno errori di compilazione quando si copia il codice da questa esercitazione alla soluzione.

Per altre informazioni sulla libreria .NET Standard che viene creata, vedere Anatomia di un'applicazioneXamarin.Forms nell'approfondimento della Xamarin.Forms guida introduttiva.

Nel riquadro della soluzione, nel progetto CollectionViewTutorial, fare doppio clic su MainPage.xaml per aprire il file. In MainPage.xaml rimuovere tutto il codice del modello e sostituirlo con il codice seguente:

<?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>

Nella barra degli strumenti di Visual Studio per Mac premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS o dell'emulatore Android prescelto:

In Visual Studio per Mac arrestare l'applicazione.

Popolare con i dati

10 minuti rimanenti

Un elemento CollectionView viene popolato con dati mediante la proprietà ItemsSource che è di tipo IEnumerable. Il passaggio precedente ha popolato l'elemento CollectionView in XAML con una matrice di stringhe. Tuttavia, in genere un elemento CollectionView verrà popolato con dati di una raccolta, definita nel codice, che implementa IEnumerable.

In questo esercizio si modificherà il progetto CollectionViewTutorial per popolare l'elemento CollectionView con i dati di una raccolta di oggetti archiviati in un elemento List.

Visual Studio
Visual Studio per Mac

In Esplora soluzioni, nel progetto CollectionViewTutorial, aggiungere una classe denominata Monkey che contiene il codice seguente:
```
public class Monkey
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string ImageUrl { get; set; }

    public override string ToString()
    {
        return Name;
    }        
}
```
Questo codice definisce un oggetto Monkey che archivia un nome, una posizione e un URL di un'immagine che rappresenta la scimmia. Inoltre la classe esegue l'override del metodo ToString per restituire la proprietà Name.

In Esplora soluzioni, nel progetto CollectionViewTutorial, espandere MainPage.xaml e fare doppio clic su MainPage.xaml.cs per aprirlo. In MainPage.xaml.cs rimuovere quindi tutto il codice del modello e sostituirlo con il codice seguente:

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;
        }
    }
}

Questo codice definisce una proprietà Monkeys di tipo IList<Monkey> e la inizializza come elenco vuoto nel costruttore della classe. Gli oggetti Monkey vengono quindi aggiunti alla raccolta Monkeys e l'elemento BindingContext della pagina è impostato sull'oggetto MainPage. Per altre informazioni sulla BindingContext proprietà, vedere Binding con un contesto di associazione nella guida all'associazione Xamarin.Forms dati .

Importante

La proprietà BindingContext viene ereditata tramite la struttura ad albero visuale. Pertanto, dato che è stata impostata sull'oggetto ContentPage, il valore viene ereditato dagli oggetti figlio di ContentPage, incluso l'elemento CollectionView.

In MainPage.xaml modificare la dichiarazione CollectionView per impostare la proprietà ItemsSource sulla raccolta Monkeys:
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
Questo codice esegue l'associazione dei dati della proprietà ItemsSource alla raccolta Monkeys. Al runtime l'elemento CollectionView esaminerà il relativo elemento BindingContext per la raccolta Monkeys e sarà popolato con i dati di questa raccolta. Per altre informazioni sul data binding, vedere Xamarin.Forms Data Binding.
Nella barra degli strumenti di Visual Studio premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS remoto o dell'emulatore Android prescelto:

L'elemento CollectionView mostra la proprietà Name per ogni Monkey della raccolta Monkeys. Questo avviene perché, per impostazione predefinita, l'elemento CollectionView chiama il metodo ToString quando mostra gli oggetti di una raccolta, di cui è stato eseguito l'override nella classe Monkey per restituire il valore della proprietà Name.

In Visual Studio arrestare l'applicazione.

Nel riquadro della soluzione, nel progetto CollectionViewTutorial, aggiungere una classe denominata Monkey che contiene il codice seguente:
```
public class Monkey
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string ImageUrl { get; set; }

    public override string ToString()
    {
        return Name;
    }
}
```
Questo codice definisce un oggetto Monkey che archivia un nome, una posizione e un URL di un'immagine che rappresenta la scimmia. Inoltre la classe esegue l'override del metodo ToString per restituire la proprietà Name.

Nel riquadro della soluzione, nel progetto CollectionViewTutorial, espandere MainPage.xaml e fare doppio clic su MainPage.xaml.cs per aprire il file. In MainPage.xaml.cs rimuovere quindi tutto il codice del modello e sostituirlo con il codice seguente:

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;
        }
    }
}

Importante

In MainPage.xaml modificare la dichiarazione CollectionView per impostare la proprietà ItemsSource sulla raccolta Monkeys:
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
Questo codice esegue l'associazione dei dati della proprietà ItemsSource alla raccolta Monkeys. Al runtime l'elemento CollectionView esaminerà il relativo elemento BindingContext per la raccolta Monkeys e sarà popolato con i dati di questa raccolta. Per altre informazioni sul data binding, vedere Xamarin.Forms Data Binding.
Nella barra degli strumenti di Visual Studio per Mac premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS o dell'emulatore Android prescelto:

L'elemento CollectionView mostra la proprietà Name per ogni Monkey della raccolta Monkeys. Questo avviene perché, per impostazione predefinita, l'elemento CollectionView chiama il metodo ToString quando mostra gli oggetti di una raccolta, di cui è stato eseguito l'override nella classe Monkey per restituire il valore della proprietà Name.

In Visual Studio per Mac arrestare l'applicazione.

Rispondere alla selezione di elementi

6 minuti rimanenti

Visual Studio
Visual Studio per Mac

In MainPage.xaml modificare la dichiarazione CollectionView in modo che imposti la proprietà SelectionMode su Single e imposti un gestore per l'evento SelectionChanged:
```
<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged" />
```
Questo codice abilita la selezione di un singolo elemento in CollectionView e imposta l'evento di SelectionChanged su un gestore eventi denominato OnSelectionChanged. Il gestore dell'evento verrà creato nel passaggio successivo.
In Esplora soluzioni, nel progetto CollectionViewTutorial, espandere MainPage.xaml e fare doppio clic su MainPage.xaml.cs per aprirlo. In MainPage.xaml.cs aggiungere il gestore eventi OnSelectionChanged alla classe:
```
void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Monkey selectedItem = e.CurrentSelection[0] as Monkey;
}
```
Quando si seleziona un elemento in CollectionView viene generato l'evento SelectionChanged, che esegue il metodo OnSelectionChanged. L'argomento sender del metodo è l'oggetto CollectionView responsabile dell'attivazione dell'evento e può essere usato per accedere all'oggetto CollectionView. L'argomento SelectionChangedEventArgs del metodo OnSelectionChanged fornisce l'elemento selezionato.
Nella barra degli strumenti di Visual Studio premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS remoto o dell'emulatore Android prescelto:

Impostare un punto di interruzione nel gestore dell'evento OnSelectionChanged e selezionare un elemento in CollectionView. Esaminare il valore della variabile selectedItem per assicurarsi che contenga i dati per l'elemento selezionato.

In Visual Studio arrestare l'applicazione.

Per altre informazioni sulla selezione degli elementi, vedere Xamarin.Forms Selezione di CollectionView.

In MainPage.xaml modificare la dichiarazione CollectionView in modo che imposti la proprietà SelectionMode su Single e imposti un gestore per l'evento SelectionChanged:
```
<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged" />
```
Questo codice abilita la selezione di un singolo elemento in CollectionView e imposta l'evento di SelectionChanged su un gestore eventi denominato OnSelectionChanged. Il gestore dell'evento verrà creato nel passaggio successivo.
Nel riquadro della soluzione, nel progetto CollectionViewTutorial, espandere MainPage.xaml e fare doppio clic su MainPage.xaml.cs per aprire il file. In MainPage.xaml.cs aggiungere il gestore eventi OnSelectionChanged alla classe:
```
void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Monkey selectedItem = e.CurrentSelection[0] as Monkey;
}
```
Quando si seleziona un elemento in CollectionView viene generato l'evento SelectionChanged, che esegue il metodo OnSelectionChanged. L'argomento sender del metodo è l'oggetto CollectionView responsabile dell'attivazione dell'evento e può essere usato per accedere all'oggetto CollectionView. L'argomento SelectionChangedEventArgs del metodo OnSelectionChanged fornisce l'elemento selezionato.
Nella barra degli strumenti di Visual Studio per Mac premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS o dell'emulatore Android prescelto:

Impostare un punto di interruzione nel gestore dell'evento OnSelectionChanged e selezionare un elemento in CollectionView. Esaminare il valore della variabile selectedItem per assicurarsi che contenga i dati per l'elemento selezionato.

In Visual Studio per Mac arrestare l'applicazione.

Per altre informazioni sulla selezione degli elementi, vedere Xamarin.Forms Selezione di CollectionView.

Personalizzare l'aspetto dell'elemento

3 minuti rimanenti

In precedenza CollectionView veniva popolata con i dati tramite data binding. Tuttavia, nonostante il data binding in una raccolta in cui ogni oggetto definiva più elementi di dati, veniva visualizzato solo un singolo elemento di dati per ogni oggetto (proprietà Name dell'oggetto Monkey).

In questo esercizio il progetto CollectionViewTutorial verrà modificato in modo che CollectionView visualizzi più elementi di dati in ogni riga.

Visual Studio
Visual Studio per Mac

In MainPage.xaml modificare la dichiarazione CollectionView per personalizzare l'aspetto di ogni elemento dei dati:

<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>

Questo codice imposta la proprietà CollectionView.ItemTemplate su DataTemplate che definisce l'aspetto di ogni elemento in CollectionView. L'elemento figlio di DataTemplate è un Grid, che contiene un oggetto Image e due oggetti Label. I dati dell'oggetto Image associano la relativa proprietà Source alla proprietà ImageUrl di ogni oggetto Monkey, mentre gli oggetti Label associano le relative proprietà Text alle proprietà Name e Location di ogni oggetto Monkey.

Per altre informazioni sull'aspetto dell'elemento CollectionView, vedere Definire l'aspetto dell'elemento. Per altre informazioni sui modelli di dati, vedere Xamarin.Forms Modelli di dati.

Nella barra degli strumenti di Visual Studio premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS remoto o dell'emulatore Android prescelto:

In Visual Studio arrestare l'applicazione.

In MainPage.xaml modificare la dichiarazione CollectionView per personalizzare l'aspetto di ogni elemento dei dati:

<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>

Per altre informazioni sull'aspetto dell'elemento CollectionView, vedere Definire l'aspetto dell'elemento. Per altre informazioni sui modelli di dati, vedere Xamarin.Forms Modelli di dati.

Nella barra degli strumenti di Visual Studio per Mac premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS o dell'emulatore Android prescelto:

In Visual Studio per Mac arrestare l'applicazione.

Xamarin.Forms Esercitazione su CollectionView

Creare un elemento CollectionView

Popolare con i dati

Rispondere alla selezione di elementi

Personalizzare l'aspetto dell'elemento

Congratulazioni!

Passaggi successivi

Xamarin.Forms Esercitazione su CollectionView

Creare un elemento CollectionView

Popolare con i dati

Rispondere alla selezione di elementi

Personalizzare l'aspetto dell'elemento

Congratulazioni!

Passaggi successivi

Collegamenti correlati