Xamarin.Forms Samouczek CollectionView

Artykuł
Developer (Początkujący)
Czas do ukończenia: 13 min

Zanim podejmiesz próbę ukończenia tego samouczka, musisz pomyślnie ukończyć następujące szkolenia:

Skompiluj swój pierwszy Xamarin.Forms przewodnik Szybki start dotyczący aplikacji .
Samouczek dotyczący obiektu StackLayout.
Samouczek dotyczący obiektu Grid.
Samouczek dotyczący obiektu Label.
Samouczek dotyczący obiektu Image.

Z tego samouczka dowiesz się, jak wykonywać następujące czynności:

Utwórz element Xamarin.FormsCollectionView w języku XAML.
Wypełnianie obiektu CollectionView danymi.
Reagowanie na zaznaczanie elementów obiektu CollectionView.
Dostosowywanie wyglądu elementów obiektu CollectionView.

Użyjesz programu Visual Studio 2019 lub Visual Studio dla komputerów Mac, aby utworzyć prostą aplikację, która pokazuje, jak dostosować wygląd obiektu CollectionView. Na poniższych zrzutach ekranu przedstawiono ostateczną wersję aplikacji:

Tworzenie obiektu CollectionView

Pozostały czas: 12 min

Program Visual Studio
Visual Studio dla komputerów Mac

Do ukończenia tego samouczka jest potrzebny program Visual Studio 2019 (najnowsza wersja) z zainstalowanym pakietem roboczym Opracowywanie aplikacji mobilnych za pomocą środowiska .NET. Ponadto będzie potrzebny sparowany komputer Mac w celu kompilowania aplikacji samouczka w systemie iOS. Aby uzyskać informacje na temat instalowania platformy Xamarin, zobacz Instalowanie platformy Xamarin. Aby uzyskać informacje na temat łączenia programu Visual Studio 2019 z hostem kompilacji Mac, zobacz Parowanie z komputerem Mac w celu opracowywania aplikacji platformy Xamarin.iOS.

Uruchom program Visual Studio i utwórz nową pustą Xamarin.Forms aplikację o nazwie CollectionViewTutorial.

Ważne

Fragmenty kodu w języku C# i XAML w tym samouczku wymagają, aby rozwiązanie miało nazwę CollectionViewTutorial. Użycie innej nazwy spowoduje błędy kompilacji po skopiowaniu kodu z tego samouczka do rozwiązania.

Aby uzyskać więcej informacji na temat tworzonej biblioteki .NET Standard, zobacz Anatomia Xamarin.Forms aplikacji w przewodnikuXamarin.Forms Szybki start — szczegółowe omówienie.

W Eksploratorze rozwiązań w projekcie CollectionViewTutorial kliknij dwukrotnie plik MainPage.xaml, aby go otworzyć. Następnie w pliku MainPage.xaml usuń cały kod szablonu i zastąp go następującym kodem:

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

Ten kod deklaratywnie definiuje interfejs użytkownika dla strony, która składa się z obiektu CollectionView w obiekcie StackLayout. Właściwość CollectionView.ItemsSource określa elementy do wyświetlenia, które są zdefiniowane w tablicy ciągów.

Na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym zdalnym symulatorze systemu iOS lub emulatorze systemu Android:

Zatrzymaj aplikację w programie Visual Studio.

Do ukończenia tego samouczka jest potrzebny program Visual Studio dla komputerów Mac (najnowsza wersja) z zainstalowaną obsługą platform iOS i Android. Ponadto będzie również potrzebne środowisko Xcode (najnowsza wersja). Aby uzyskać więcej informacji na temat instalowania platformy Xamarin, zobacz Instalowanie platformy Xamarin.

Uruchom Visual Studio dla komputerów Mac i utwórz nową pustą Xamarin.Forms aplikację o nazwie CollectionViewTutorial.

Ważne

Fragmenty kodu w języku C# i XAML w tym samouczku wymagają, aby rozwiązanie miało nazwę CollectionViewTutorial. Użycie innej nazwy spowoduje błędy kompilacji po skopiowaniu kodu z tego samouczka do rozwiązania.

Aby uzyskać więcej informacji na temat tworzonej biblioteki .NET Standard, zobacz Anatomia Xamarin.Forms aplikacji w przewodnikuXamarin.Forms Szybki start — szczegółowe omówienie.

W okienku rozwiązania w projekcie CollectionViewTutorial kliknij dwukrotnie plik MainPage.xaml, aby go otworzyć. Następnie w pliku MainPage.xaml usuń cały kod szablonu i zastąp go następującym kodem:

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

Na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android:

Zatrzymaj aplikację w programie Visual Studio dla komputerów Mac.

Wypełnianie danymi

Pozostały czas: 10 min

Obiekt CollectionView jest wypełniany przy użyciu danych za pomocą właściwości ItemsSource, która jest typu IEnumerable. W poprzednim kroku wypełniono obiekt CollectionView w języku XAML przy użyciu tablicy ciągów. Jednak zazwyczaj obiekt CollectionView będzie wypełniany przy użyciu danych z kolekcji zdefiniowanych w kodzie, który implementuje interfejs IEnumerable.

W tym ćwiczeniu zmodyfikujesz projekt CollectionViewTutorial, aby wypełniać obiekt CollectionView przy użyciu danych z kolekcji obiektów przechowywanych w obiekcie List.

Program Visual Studio
Visual Studio dla komputerów Mac

W Eksploratorze rozwiązań w projekcie CollectionViewTutorial dodaj klasę o nazwie Monkey zawierającą następujący kod:
```
public class Monkey
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string ImageUrl { get; set; }

    public override string ToString()
    {
        return Name;
    }        
}
```
Ten kod definiuje obiekt Monkey, który przechowuje nazwę, lokalizację i adres URL obrazu reprezentującego małpę. Ponadto klasa przesłania metodę ToString w celu zwrócenia właściwości Name.

W Eksploratorze rozwiązań w projekcie CollectionViewTutorial rozwiń węzeł MainPage.xaml i kliknij dwukrotnie plik MainPage.xaml.cs, aby go otworzyć. Następnie w pliku MainPage.xaml.cs usuń cały kod szablonu i zastąp go następującym kodem:

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

Ten kod definiuje właściwości Monkeys typu IList<Monkey> i inicjuje ją na pustą listę w konstruktorze klasy. Obiekty Monkey są następnie dodawane do kolekcji Monkeys, a właściwość BindingContext strony jest ustawiona na obiekt MainPage. Aby uzyskać więcej informacji na temat BindingContext właściwości, zobacz Powiązania z kontekstem powiązania w przewodniku Xamarin.Forms Powiązanie danych.

Ważne

Właściwość BindingContext jest dziedziczona przez drzewo wizualne. W związku z tym, ponieważ jest ona ustawiana na obiekt ContentPage, obiekty podrzędne obiektu ContentPage dziedziczą jej wartość, w tym klasę CollectionView.

W pliku MainPage.xaml zmodyfikuj deklarację CollectionView, aby ustawić właściwość ItemsSource na kolekcję Monkeys:
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
Te dane kodu wiążą właściwość ItemsSource z kolekcją Monkeys. W czasie wykonywania obiekt CollectionView będzie korzystał ze swojej właściwości BindingContext na potrzeby kolekcji Monkeys i zostanie wypełniony przy użyciu danych z tej kolekcji. Aby uzyskać więcej informacji na temat powiązania danych, zobacz Xamarin.Forms Powiązanie danych.
Na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikacje wewnątrz swojego wybranego zdalnego symulatora systemu iOS lub emulatora systemu Android:

Obiekt CollectionView wyświetla właściwość Name dla każdego elementu Monkey w kolekcji Monkeys. Jest to spowodowane tym, że domyślnie obiekt CollectionView wywołuje metodę ToString podczas wyświetlania obiektów z kolekcji (które zostały zastąpione w klasie Monkey w celu zwracania wartość właściwości Name).

Zatrzymaj aplikację w programie Visual Studio.

W okienku rozwiązania w projekcie CollectionViewTutorial dodaj klasę o nazwie Monkey zawierającą następujący kod:
```
public class Monkey
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string ImageUrl { get; set; }

    public override string ToString()
    {
        return Name;
    }
}
```
Ten kod definiuje obiekt Monkey, który przechowuje nazwę, lokalizację i adres URL obrazu reprezentującego małpę. Ponadto klasa przesłania metodę ToString w celu zwrócenia właściwości Name.

W okienku rozwiązania w projekcie CollectionViewTutorial rozwiń węzeł MainPage.xaml i kliknij dwukrotnie plik MainPage.xaml.cs, aby go otworzyć. Następnie w pliku MainPage.xaml.cs usuń cały kod szablonu i zastąp go następującym kodem:

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

Ważne

W pliku MainPage.xaml zmodyfikuj deklarację CollectionView, aby ustawić właściwość ItemsSource na kolekcję Monkeys:
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
Te dane kodu wiążą właściwość ItemsSource z kolekcją Monkeys. W czasie wykonywania obiekt CollectionView będzie korzystał ze swojej właściwości BindingContext na potrzeby kolekcji Monkeys i zostanie wypełniony przy użyciu danych z tej kolekcji. Aby uzyskać więcej informacji na temat powiązania danych, zobacz Xamarin.Forms Powiązanie danych.
Na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android:

Obiekt CollectionView wyświetla właściwość Name dla każdego elementu Monkey w kolekcji Monkeys. Jest to spowodowane tym, że domyślnie obiekt CollectionView wywołuje metodę ToString podczas wyświetlania obiektów z kolekcji (które zostały zastąpione w klasie Monkey w celu zwracania wartość właściwości Name).

Zatrzymaj aplikację w programie Visual Studio dla komputerów Mac.

Odpowiadanie na wybór elementu

Pozostały czas: 6 min

Program Visual Studio
Visual Studio dla komputerów Mac

W pliku MainPage.xaml zmodyfikuj deklarację obiektu CollectionView tak, aby ustawiała właściwość SelectionMode na wartość Single oraz ustawiała procedurę obsługi dla zdarzenia SelectionChanged:
```
<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged" />
```
Ten kod umożliwia wybranie pojedynczego elementu w obiekcie CollectionView i ustawia zdarzenie SelectionChanged na procedurę obsługi zdarzeń o nazwie OnSelectionChanged. Procedura obsługi zdarzeń zostanie utworzona w następnym kroku.
W Eksploratorze rozwiązań w projekcie CollectionViewTutorial rozwiń węzeł MainPage.xaml i kliknij dwukrotnie plik MainPage.xaml.cs, aby go otworzyć. Następnie w pliku MainPage.xaml.cs dodaj do klasy program obsługi zdarzeń OnSelectionChanged:
```
void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Monkey selectedItem = e.CurrentSelection[0] as Monkey;
}
```
Po wybraniu elementu w obiekcie CollectionView wyzwalane jest zdarzenie SelectionChanged, które wykonuje metodę OnSelectionChanged. Argumentem sender metody jest obiekt CollectionView odpowiedzialny za wyzwolenie zdarzenia i można go użyć do uzyskania dostępu do obiektu CollectionView. Argument SelectionChangedEventArgs metody OnSelectionChanged udostępnia wybrany element.
Na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym zdalnym symulatorze systemu iOS lub emulatorze systemu Android:

Ustaw punkt przerwania w procedurze obsługi zdarzeń OnSelectionChanged i wybierz element w obiekcie CollectionView. Sprawdź wartość zmiennej selectedItem, aby upewnić się, że zawiera ona dane wybranego elementu.

Zatrzymaj aplikację w programie Visual Studio.

Aby uzyskać więcej informacji na temat zaznaczenia elementu, zobacz Xamarin.Forms Wybór obiektu CollectionView.

W pliku MainPage.xaml zmodyfikuj deklarację obiektu CollectionView tak, aby ustawiała właściwość SelectionMode na wartość Single oraz ustawiała procedurę obsługi dla zdarzenia SelectionChanged:
```
<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged" />
```
Ten kod umożliwia wybranie pojedynczego elementu w obiekcie CollectionView i ustawia zdarzenie SelectionChanged na procedurę obsługi zdarzeń o nazwie OnSelectionChanged. Procedura obsługi zdarzeń zostanie utworzona w następnym kroku.
W okienku rozwiązania w projekcie CollectionViewTutorial rozwiń węzeł MainPage.xaml i kliknij dwukrotnie plik MainPage.xaml.cs, aby go otworzyć. Następnie w pliku MainPage.xaml.cs dodaj do klasy program obsługi zdarzeń OnSelectionChanged:
```
void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Monkey selectedItem = e.CurrentSelection[0] as Monkey;
}
```
Po wybraniu elementu w obiekcie CollectionView wyzwalane jest zdarzenie SelectionChanged, które wykonuje metodę OnSelectionChanged. Argumentem sender metody jest obiekt CollectionView odpowiedzialny za wyzwolenie zdarzenia i można go użyć do uzyskania dostępu do obiektu CollectionView. Argument SelectionChangedEventArgs metody OnSelectionChanged udostępnia wybrany element.
Na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android:

Ustaw punkt przerwania w procedurze obsługi zdarzeń OnSelectionChanged i wybierz element w obiekcie CollectionView. Sprawdź wartość zmiennej selectedItem, aby upewnić się, że zawiera ona dane wybranego elementu.

Zatrzymaj aplikację w programie Visual Studio dla komputerów Mac.

Aby uzyskać więcej informacji na temat zaznaczenia elementu, zobacz Xamarin.Forms Wybór obiektu CollectionView.

Dostosowywanie wyglądu elementu

Pozostały czas: 3 min

Wcześniej obiekt CollectionView został wypełniony danymi za pomocą powiązania danych. Jednak mimo powiązania danych z kolekcją, w którym każdy obiekt w kolekcji zdefiniował wiele elementów danych, dla każdego obiektu był wyświetlany tylko pojedynczy element (właściwość Name obiektu Monkey).

W tym ćwiczeniu zmodyfikujesz projekt CollectionViewTutorial tak, aby w obiekcie CollectionView było wyświetlanych wiele elementów danych w każdym wierszu.

Program Visual Studio
Visual Studio dla komputerów Mac

W pliku MainPage.xaml zmodyfikuj deklarację CollectionView, aby dostosować wygląd każdego elementu danych:

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

Ten kod powoduje ustawienie właściwości CollectionView.ItemTemplate na element DataTemplate, aby zdefiniować wygląd każdego elementu w obiekcie CollectionView. Element podrzędny elementu DataTemplate to element Grid, który zawiera obiekt Image i dwa obiekty Label. Dane obiektu Image wiążą jego właściwość Source z właściwością ImageUrl każdego obiektu Monkey, natomiast obiekty Label łączą swoje właściwości Text z właściwościami Name i Location każdego obiektu Monkey.

Aby uzyskać więcej informacji na temat wyglądu elementu CollectionView, zobacz Definiowanie wyglądu elementu. Aby uzyskać więcej informacji na temat szablonów danych, zobacz Xamarin.Forms Szablony danych.

Na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym zdalnym symulatorze systemu iOS lub emulatorze systemu Android:

Zatrzymaj aplikację w programie Visual Studio.

W pliku MainPage.xaml zmodyfikuj deklarację CollectionView, aby dostosować wygląd każdego elementu danych:

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

Na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android:

Zatrzymaj aplikację w programie Visual Studio dla komputerów Mac.

Udostępnij za pośrednictwem

Xamarin.Forms Samouczek CollectionView

Tworzenie obiektu CollectionView

Wypełnianie danymi

Odpowiadanie na wybór elementu

Dostosowywanie wyglądu elementu

Gratulacje!

Następne kroki

Udostępnij za pośrednictwem

Xamarin.Forms Samouczek CollectionView

Tworzenie obiektu CollectionView

Wypełnianie danymi

Odpowiadanie na wybór elementu

Dostosowywanie wyglądu elementu

Gratulacje!

Następne kroki

Pokrewne łącza