Xamarin.Forms: Tutorial zu CollectionView

Artikel
Developer (Anfänger)
13 Minuten bis zum Abschluss

Bevor Sie mit diesem Tutorial fortfahren, sollten Sie zunächst Folgendes erfolgreich abgeschlossen haben:

Schnellstartanleitung Erstellen Ihrer ersten Xamarin.Forms-App
Das Tutorial zu StackLayout
Tutorial zu Grid.
Tutorial zu Label.
Tutorial zu Image.

In diesem Tutorial lernen Sie, wie die folgenden Aufgaben ausgeführt werden:

Erstellen eines Xamarin.FormsCollectionView-Elements in XAML
Füllen des CollectionView-Elements mit Daten
Reagieren auf ausgewählte CollectionView-Elemente
Anpassen der Darstellung von CollectionView-Elementen

Sie verwenden Visual Studio 2019 oder Visual Studio für Mac, um eine einfache Anwendung zu erstellen, die veranschaulicht, wie Sie die Darstellung von CollectionView anpassen können. Die folgenden Screenshots zeigen die finale Anwendung:

Erstellen einer CollectionView-Klasse

12 Minuten verbleibend

Visual Studio
Visual Studio für Mac

Für dieses Tutorial benötigen Sie das neueste Release von Visual Studio 2019 und die Workload Mobile-Entwicklung mit .NET. Außerdem müssen Sie über einen gekoppelten Mac verfügen, um die Tutorial-App unter iOS zu kompilieren. Informationen zur Installation der Xamarin-Plattform finden Sie unter Installieren von Xamarin. Informationen zum Verbinden von Visual Studio 2019 mit einem Mac-Buildhost finden Sie unter Durchführen einer Kopplung mit einem Mac für die Xamarin.iOS-Entwicklung.

Starten Sie Visual Studio, und erstellen Sie eine neue leere Xamarin.Forms-App mit dem Namen CollectionViewTutorial.

Wichtig

Für die C#- und XAML-Codeausschnitte in diesem Tutorial ist es erforderlich, dass die Projektmappe CollectionViewTutorial genannt wird. Die Verwendung eines anderen Namens führt zu Buildfehlern, wenn Sie Code aus diesem Tutorial in die Projektmappe kopieren.

Weitere Informationen zur .NET Standard-Bibliothek, die erstellt wird, finden Sie unter Struktur einer Xamarin.Forms-Anwendung im Artikel Xamarin.Forms: Ausführliche Erläuterungen zum Schnellstart.

Doppelklicken Sie im Projektmappen-Explorer im Projekt CollectionViewTutorial auf die Datei MainPage.xaml, um sie zu öffnen: Entfernen Sie dann in MainPage.xaml den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden:

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

In diesem Codeausschnitt wird die Benutzeroberfläche deklarativ für die Seite definiert, die ein CollectionView-Element in einem StackLayout enthält. Die CollectionView.ItemsSource-Eigenschaft legt fest, welche Elemente angezeigt werden sollen. Die Elemente werden wiederum über ein Array aus Zeichenfolgen definiert.

Klicken Sie in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten:

Beenden Sie die Anwendung in Visual Studio.

Für dieses Tutorial benötigen Sie Visual Studio für Mac (neuestes Release) mit Plattformunterstützung für iOS und Android. Zudem ist Xcode (neuestes Release) erforderlich. Weitere Informationen zur Installation der Xamarin-Plattform finden Sie unter Installieren von Xamarin.

Starten Sie Visual Studio für Mac, und erstellen Sie eine neue leere Xamarin.Forms-App mit dem Namen CollectionViewTutorial.

Wichtig

Für die C#- und XAML-Codeausschnitte in diesem Tutorial ist es erforderlich, dass die Projektmappe CollectionViewTutorial genannt wird. Die Verwendung eines anderen Namens führt zu Buildfehlern, wenn Sie Code aus diesem Tutorial in die Projektmappe kopieren.

Weitere Informationen zur .NET Standard-Bibliothek, die erstellt wird, finden Sie unter Struktur einer Xamarin.Forms-Anwendung im Artikel Xamarin.Forms: Ausführliche Erläuterungen zum Schnellstart.

Doppelklicken Sie im Lösungspad im Projekt CollectionViewTutorial auf die Datei MainPage.xaml, um sie zu öffnen: Entfernen Sie dann in MainPage.xaml den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden:

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

Klicken Sie in der Symbolleiste von Visual Studio für Mac auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Simulator oder Android-Emulator zu starten.

Beenden Sie die Anwendung in Visual Studio für Mac.

Auffüllen mit Daten

10 Minuten verbleibend

Eine CollectionView-Klasse wird unter Verwendung der Eigenschaft ItemsSource, die vom Typ IEnumerable ist, mit Daten aufgefüllt. Im vorherigen Schritt wurde die CollectionView-Klasse in XAML mit einem Zeichenfolgenarray aufgefüllt. Eine CollectionView-Klasse wird jedoch üblicherweise mit Daten aus einer Sammlung aufgefüllt, die in dem Code definiert ist, der IEnumerable implementiert.

In dieser Übung ändern Sie das Projekt CollectionViewTutorial so, dass die CollectionView-Klasse mit Daten aus einer Objektsammlung aufgefüllt wird, die in einer List-Klasse gespeichert ist.

Visual Studio
Visual Studio für Mac

Fügen Sie im Projektmappen-Explorer im Projekt CollectionViewTutorial eine Klasse mit dem Namen Monkey hinzu, die den folgenden Code enthält:
```
public class Monkey
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string ImageUrl { get; set; }

    public override string ToString()
    {
        return Name;
    }        
}
```
Dieser Code definiert ein Monkey-Objekt, das den Namen, den Speicherort und die URL eines Images speichert, das das Monkey-Objekt repräsentiert. Zudem überschreibt die Klasse die ToString-Methode, um die Name-Eigenschaft zurückzugeben.

Erweitern Sie MainPage.xaml im Projektmappen-Explorer im Projekt CollectionViewTutorial, und doppelklicken Sie dann auf die Datei MainPage.xaml.cs, um sie zu öffnen. Entfernen Sie dann in MainPage.xaml.cs den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden:

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

Dieser Code definiert eine Monkeys-Eigenschaft vom Typ IList<Monkey> und initialisiert sie in eine leere Liste im Klassenkonstruktor. Dann werden Monkey-Objekte der Sammlung Monkeys hinzugefügt, und die Eigenschaft BindingContext der Seite wird auf das MainPage-Objekt festgelegt. Weitere Informationen zur BindingContext-Eigenschaft finden Sie unter Bindungen mit Bindungskontext im Leitfaden zu Xamarin.Forms-Datenbindungen.

Wichtig

Die Eigenschaft BindingContext wird über die visuelle Struktur vererbt. Da sie auf das ContentPage-Objekt festgelegt wurde, erben deshalb untergeordnete Objekte von ContentPage ihren Wert, darunter auch die CollectionView-Klasse.

Ändern Sie in MainPage.xaml die CollectionView-Deklaration, um die Eigenschaft ItemsSource auf die Sammlung Monkeys festzulegen:
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
Dieser Code stellt eine Datenbindung zwischen der Eigenschaft ItemsSource und der Sammlung Monkeys her. Zur Laufzeit sucht die CollectionView-Klasse in ihrer BindingContext-Eigenschaft nach der Sammlung Monkeys und wird mit Daten aus dieser Sammlung aufgefüllt. Weitere Informationen zur Datenbindung finden Sie unter Xamarin.Forms-Datenbindung.
Klicken Sie in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten:

Die Klasse CollectionView zeigt die Eigenschaft Name für jedes Monkey-Objekt in der Monkeys-Sammlung an. Dies liegt daran, dass in der Standardeinstellung die CollectionView-Klasse die ToString-Methode aufruft, wenn sie die Objekte aus einer Sammlung anzeigt (dies wurde in der Monkey-Klasse überschrieben, um den Eigenschaftswert Name zurückzugeben).

Beenden Sie die Anwendung in Visual Studio.

Fügen Sie im Lösungspad im Projekt CollectionViewTutorial eine Klasse mit dem Namen Monkey hinzu, die den folgenden Code enthält:
```
public class Monkey
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string ImageUrl { get; set; }

    public override string ToString()
    {
        return Name;
    }
}
```
Dieser Code definiert ein Monkey-Objekt, das den Namen, den Speicherort und die URL eines Images speichert, das das Monkey-Objekt repräsentiert. Zudem überschreibt die Klasse die ToString-Methode, um die Name-Eigenschaft zurückzugeben.

Erweitern Sie MainPage.xaml im Lösungspad im Projekt CollectionViewTutorial, und doppelklicken Sie dann auf die Datei MainPage.xaml.cs, um sie zu öffnen. Entfernen Sie dann in MainPage.xaml.cs den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden:

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

Wichtig

Ändern Sie in MainPage.xaml die CollectionView-Deklaration, um die Eigenschaft ItemsSource auf die Sammlung Monkeys festzulegen:
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
Dieser Code stellt eine Datenbindung zwischen der Eigenschaft ItemsSource und der Sammlung Monkeys her. Zur Laufzeit sucht die CollectionView-Klasse in ihrer BindingContext-Eigenschaft nach der Sammlung Monkeys und wird mit Daten aus dieser Sammlung aufgefüllt. Weitere Informationen zur Datenbindung finden Sie unter Xamarin.Forms-Datenbindung.
Klicken Sie in der Symbolleiste von Visual Studio für Mac auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Simulator oder Android-Emulator zu starten.

Die Klasse CollectionView zeigt die Eigenschaft Name für jedes Monkey-Objekt in der Monkeys-Sammlung an. Dies liegt daran, dass in der Standardeinstellung die CollectionView-Klasse die ToString-Methode aufruft, wenn sie die Objekte aus einer Sammlung anzeigt (dies wurde in der Monkey-Klasse überschrieben, um den Eigenschaftswert Name zurückzugeben).

Beenden Sie die Anwendung in Visual Studio für Mac.

Reagieren auf Elementauswahl

6 Minuten verbleibend

Visual Studio
Visual Studio für Mac

Ändern Sie in MainPage.xaml die CollectionView-Deklaration, sodass die SelectionMode-Eigenschaft auf Single und ein Handler für das SelectionChanged-Ereignis festgelegt wird.
```
<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged" />
```
Dieser Code ermöglicht die Auswahl einzelner Elemente in CollectionView und legt das SelectionChanged-Ereignis auf den Ereignishandler OnSelectionChanged fest. Der Ereignishandler wird im nächsten Schritt erstellt.
Erweitern Sie MainPage.xaml im Projektmappen-Explorer im Projekt CollectionViewTutorial, und doppelklicken Sie dann auf die Datei MainPage.xaml.cs, um sie zu öffnen. Fügen Sie dann in der Datei MainPage.xaml.cs der Klasse den OnSelectionChanged-Ereignishandler hinzu:
```
void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Monkey selectedItem = e.CurrentSelection[0] as Monkey;
}
```
Wenn ein Element in der CollectionView-Klasse ausgewählt wird, wird das Ereignis SelectionChanged ausgelöst und führt die Methode OnSelectionChanged aus. Das sender-Argument, das an die Methode übergeben wird, ist das CollectionView-Objekt, das das Ereignis ausgelöst hat und für den Zugriff auf das CollectionView-Objekt verwendet werden kann. Das SelectionChangedEventArgs-Argument, das an die OnSelectionChanged-Methode übergeben wird, stellt das ausgewählte Element bereit.
Klicken Sie in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten:

Legen Sie im Ereignishandler OnSelectionChanged einen Breakpoint fest, und wählen Sie ein Element in der CollectionView-Klasse aus. Überprüfen Sie, ob die Variable selectedItem die Daten für Ihre ausgewählten Elemente enthält.

Beenden Sie die Anwendung in Visual Studio.

Weitere Informationen zur Elementauswahl finden Sie unter Xamarin.Forms: CollectionView-Auswahl.

Ändern Sie in MainPage.xaml die CollectionView-Deklaration, sodass die SelectionMode-Eigenschaft auf Single und ein Handler für das SelectionChanged-Ereignis festgelegt wird.
```
<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged" />
```
Dieser Code ermöglicht die Auswahl einzelner Elemente in CollectionView und legt das SelectionChanged-Ereignis auf den Ereignishandler OnSelectionChanged fest. Der Ereignishandler wird im nächsten Schritt erstellt.
Erweitern Sie MainPage.xaml im Lösungspad im Projekt CollectionViewTutorial, und doppelklicken Sie dann auf die Datei MainPage.xaml.cs, um sie zu öffnen. Fügen Sie dann in der Datei MainPage.xaml.cs der Klasse den OnSelectionChanged-Ereignishandler hinzu:
```
void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Monkey selectedItem = e.CurrentSelection[0] as Monkey;
}
```
Wenn ein Element in der CollectionView-Klasse ausgewählt wird, wird das Ereignis SelectionChanged ausgelöst und führt die Methode OnSelectionChanged aus. Das sender-Argument, das an die Methode übergeben wird, ist das CollectionView-Objekt, das das Ereignis ausgelöst hat und für den Zugriff auf das CollectionView-Objekt verwendet werden kann. Das SelectionChangedEventArgs-Argument, das an die OnSelectionChanged-Methode übergeben wird, stellt das ausgewählte Element bereit.
Klicken Sie in der Symbolleiste von Visual Studio für Mac auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Simulator oder Android-Emulator zu starten.

Legen Sie im Ereignishandler OnSelectionChanged einen Breakpoint fest, und wählen Sie ein Element in der CollectionView-Klasse aus. Überprüfen Sie, ob die Variable selectedItem die Daten für Ihre ausgewählten Elemente enthält.

Beenden Sie die Anwendung in Visual Studio für Mac.

Weitere Informationen zur Elementauswahl finden Sie unter Xamarin.Forms: CollectionView-Auswahl.

Anpassen der Elementdarstellung

3 Minuten verbleibend

Zuvor wurde die CollectionView mithilfe von Datenbindung mit Daten gefüllt. Trotz Datenbindung zu einer Auflistung, in der jedes Objekt der Auflistung mehrere Datenelemente definiert hat, wurde nur ein Datenelement pro Objekt angezeigt (die Name-Eigenschaft des Monkey-Objekts).

In dieser Übung ändern Sie das CollectionViewTutorial-Projekt so, dass das CollectionView-Element mehrere Datenelemente in jeder Zeile anzeigt.

Visual Studio
Visual Studio für Mac

Ändern Sie in MainPage.xaml die CollectionView-Deklaration, um die Darstellung der einzelnen Datenelemente anzupassen:

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

Dieser Code legt die CollectionView.ItemTemplate-Eigenschaft auf eine DataTemplate fest, die die Darstellung der einzelnen Elemente in der CollectionView-Klasse bestimmt. Das untergeordnete Element von DataTemplate ist eine Grid-Klasse, die ein Image-Objekt und zwei Label-Objekte enthält. Das Image-Objekt bindet seine Source-Eigenschaft an die ImageUrl-Eigenschaft von jedem Monkey-Objekt, während die Label-Objekte ihre Text-Eigenschaften an die Name- und Location-Eigenschaften von jedem Monkey-Objekt binden.

Weitere Informationen zur Darstellung von CollectionView-Elementen finden Sie unter Definieren der Elementdarstellung. Weitere Informationen zu Datenvorlagen finden Sie unter Xamarin.Forms-Datenvorlagen.

Klicken Sie in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten:

Beenden Sie die Anwendung in Visual Studio.

Ändern Sie in MainPage.xaml die CollectionView-Deklaration, um die Darstellung der einzelnen Datenelemente anzupassen:

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

Klicken Sie in der Symbolleiste von Visual Studio für Mac auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Simulator oder Android-Emulator zu starten.

Beenden Sie die Anwendung in Visual Studio für Mac.

Xamarin.Forms: Tutorial zu CollectionView

Erstellen einer CollectionView-Klasse

Auffüllen mit Daten

Reagieren auf Elementauswahl

Anpassen der Elementdarstellung

Herzlichen Glückwunsch!

Nächste Schritte

Xamarin.Forms: Tutorial zu CollectionView

Erstellen einer CollectionView-Klasse

Auffüllen mit Daten

Reagieren auf Elementauswahl

Anpassen der Elementdarstellung

Herzlichen Glückwunsch!

Nächste Schritte

Verwandte Links