Xamarin.Forms Kurz CollectionView

Článek
Developer (Začátečník)
13 min do dokončení

Než se pustíte do tohoto kurzu, měli byste úspěšně dokončit tyto položky:

Vytvořte svůj první Xamarin.Forms rychlý start k aplikaci .
Kurz k objektu StackLayout
Kurz k objektu Grid
Kurz k objektu Label
Kurz k objektu Image

V tomto kurzu se naučíte:

Vytvořte v XAML.Xamarin.FormsCollectionView
Naplnit objekt CollectionView daty
Reagovat na vybrané položky objektu CollectionView
Přizpůsobit vzhled položek objektu CollectionView

V sadě Visual Studio 2019 nebo Visual Studio pro Mac vytvoříte jednoduchou aplikaci, která bude ukazovat, jak přizpůsobit vzhled objektu CollectionView. Na následujících snímcích obrazovky je zachycena finální aplikace:

Vytvoření objektu collectionview

12 min zbývá

Visual Studio
Visual Studio pro Mac

K dokončení tohoto kurzu byste měli mít Visual Studio 2019 (nejnovější vydanou verzi) s nainstalovanou sadou funkcí Vývoj mobilních aplikací pomocí .NET. Kromě toho budete potřebovat spárovaný Mac pro sestavení aplikace z kurzu v iOSu. Informace o instalaci platformy Xamarin najdete v článku Instalace Xamarinu. Informace o připojení sady Visual Studio 2019 k hostiteli buildu pro Mac najdete v článku Spárování s počítačem Mac pro vývoj na platformě Xamarin.iOS.

Spusťte Visual Studio a vytvořte novou prázdnou Xamarin.Forms aplikaci s názvem CollectionViewTutorial.

Důležité

Fragmenty kódu C# a XAML v tomto kurzu vyžadují, aby řešení mělo název CollectionViewTutorial. Použití jiného názvu způsobí při kopírování kódu z tohoto kurzu do řešení chyby sestavení.

Další informace o knihovně .NET Standard, která se vytvoří, najdete v tématu Anatomie Xamarin.Forms aplikace v podrobném Xamarin.Forms kurzu Rychlý start.

V Průzkumníkovi řešení v projektu CollectionViewTutorial poklikáním otevřete soubor MainPage.xaml. Pak v souboru MainPage.xaml odeberte veškerý kód šablony a nahraďte ho následujícím kódem:

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

Tento kód deklarativně definuje uživatelské rozhraní pro stránku, která se skládá z objektu CollectionView v objektu StackLayout. Vlastnost CollectionView.ItemsSource určuje položky, které se mají zobrazit. Jsou definované v poli řetězců.

Na panelu nástrojů sady Visual Studio stiskněte tlačítko Spustit (trojúhelníkové tlačítko, která se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném vzdáleném simulátoru iOSu nebo emulátoru Androidu:

V sadě Visual Studio zastavte aplikaci.

K dokončení tohoto kurzu byste měli mít Visual Studio pro Mac (nejnovější vydanou verzi) s nainstalovanou podporou pro platformy iOS a Android. Kromě toho budete také potřebovat Xcode (nejnovější vydanou verzi). Další informace o instalaci platformy Xamarin najdete v článku Instalace Xamarinu.

Spusťte Visual Studio pro Mac a vytvořte novou prázdnou Xamarin.Forms aplikaci s názvem CollectionViewTutorial.

Důležité

Fragmenty kódu C# a XAML v tomto kurzu vyžadují, aby řešení mělo název CollectionViewTutorial. Použití jiného názvu způsobí při kopírování kódu z tohoto kurzu do řešení chyby sestavení.

Další informace o knihovně .NET Standard, která se vytvoří, najdete v tématu Anatomie Xamarin.Forms aplikace v podrobném Xamarin.Forms kurzu Rychlý start.

V Oblasti řešení v projektu CollectionViewTutorial poklikáním otevřete soubor MainPage.xaml. Pak v souboru MainPage.xaml odeberte veškerý kód šablony a nahraďte ho následujícím kódem:

<?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 panelu nástrojů sady Visual Studio pro Mac stiskněte tlačítko Spustit (trojúhelníkové tlačítko, které se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném simulátoru iOSu nebo emulátoru Androidu:

V sadě Visual Studio pro Mac zastavte aplikaci.

Naplnění daty

10 min zbývá

Objekt CollectionView se naplní daty pomocí vlastnosti ItemsSource, která je typu IEnumerable. Předchozí krok naplnil objekt CollectionView v XAML polem řetězců. Obvykle se ale objekt CollectionView naplní daty z kolekce definované v kódu, který implementuje IEnumerable.

V tomto cvičení upravíte projekt CollectionViewTutorial a naplníte objekt CollectionView daty z kolekce objektů uložené v objektu List.

Visual Studio
Visual Studio pro Mac

V Průzkumníkovi řešení v projektu CollectionViewTutorial přidejte třídu s názvem Monkey, která obsahuje následující kód:
```
public class Monkey
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string ImageUrl { get; set; }

    public override string ToString()
    {
        return Name;
    }        
}
```
Tento kód definuje objekt Monkey, který uchovává název, umístění a adresu URL obrázku znázorňujícího opici. Třída dále přepíše metodu ToString pro vrácení vlastnosti Name.

V Průzkumníkovi řešení v projektu CollectionViewTutorial rozbalte uzel MainPage.xaml a poklikáním otevřete soubor MainPage.xaml.cs. Pak v souboru MainPage.xaml.cs odeberte veškerý kód šablony a nahraďte ho následujícím kódem:

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

Tento kód definuje vlastnost Monkeys typu IList<Monkey> a inicializuje ji do prázdného seznamu v konstruktoru třídy. Objekty Monkey se potom přidají do kolekce Monkeys a vlastnost BindingContext stránky se nastaví na objekt MainPage. Další informace o BindingContext vlastnosti naleznete v části Vazby s kontextem vazby v průvodci datovými Xamarin.Forms vazbami .

Důležité

Vlastnost BindingContext se dědí prostřednictvím vizuálního stromu. Je nastavená u objektu ContentPage, a proto podřízené objekty objektu ContentPage dědí jeho hodnotu, včetně objektu CollectionView.

V souboru MainPage.xaml můžete upravit deklaraci CollectionView tak, aby nastavila vlastnost ItemsSource na kolekci Monkeys:
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
Tento kód vytvoří datovou vazbu mezi vlastností ItemsSource a kolekcí Monkeys. Objekt CollectionView za běhu zkontroluje svou vlastnost BindingContext pro kolekci Monkeys a naplní se daty z této kolekce. Další informace o datové vazbě naleznete v tématu Xamarin.Forms Datové vazby.
Na panelu nástrojů sady Visual Studio stiskněte tlačítko Spustit (trojúhelníkové tlačítko, která se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném vzdáleném simulátoru iOSu nebo emulátoru Androidu:

Objekt CollectionView zobrazuje vlastnost Name pro každý objekt Monkey v kolekci Monkeys. Je to proto, že ve výchozím nastavení objekt CollectionView volá metodu ToString při zobrazení objektů z kolekce (která byla ve třídě Monkey přepsána za účelem vrácení hodnoty vlastnosti Name).

V sadě Visual Studio zastavte aplikaci.

V Oblasti řešení v projektu CollectionViewTutorial přidejte třídu s názvem Monkey, která obsahuje následující kód:
```
public class Monkey
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string ImageUrl { get; set; }

    public override string ToString()
    {
        return Name;
    }
}
```
Tento kód definuje objekt Monkey, který uchovává název, umístění a adresu URL obrázku znázorňujícího opici. Třída dále přepíše metodu ToString pro vrácení vlastnosti Name.

V Oblasti řešení v projektu CollectionViewTutorial rozbalte uzel MainPage.xaml a poklikáním otevřete soubor MainPage.xaml.cs. Pak v souboru MainPage.xaml.cs odeberte veškerý kód šablony a nahraďte ho následujícím kódem:

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

Důležité

V souboru MainPage.xaml můžete upravit deklaraci CollectionView tak, aby nastavila vlastnost ItemsSource na kolekci Monkeys:
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
Tento kód vytvoří datovou vazbu mezi vlastností ItemsSource a kolekcí Monkeys. Objekt CollectionView za běhu zkontroluje svou vlastnost BindingContext pro kolekci Monkeys a naplní se daty z této kolekce. Další informace o datové vazbě naleznete v tématu Xamarin.Forms Datové vazby.
Na panelu nástrojů sady Visual Studio pro Mac stiskněte tlačítko Spustit (trojúhelníkové tlačítko, které se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném simulátoru iOSu nebo emulátoru Androidu:

Objekt CollectionView zobrazuje vlastnost Name pro každý objekt Monkey v kolekci Monkeys. Je to proto, že ve výchozím nastavení objekt CollectionView volá metodu ToString při zobrazení objektů z kolekce (která byla ve třídě Monkey přepsána za účelem vrácení hodnoty vlastnosti Name).

V sadě Visual Studio pro Mac zastavte aplikaci.

Reakce na výběr položek

6 min zbývá

Visual Studio
Visual Studio pro Mac

V souboru MainPage.xaml upravte deklaraci objektu CollectionView tak, aby nastavila vlastnost SelectionMode na Single a obslužnou rutinu pro událost SelectionChanged:
```
<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged" />
```
Tento kód nastaví výběr jedné položky v objektu CollectionView a nastaví událost SelectionChanged na obslužnou rutinu události s názvem OnSelectionChanged. Obslužná rutina události se vytvoří v dalším kroku.
V Průzkumníkovi řešení v projektu CollectionViewTutorial rozbalte uzel MainPage.xaml a poklikáním otevřete soubor MainPage.xaml.cs. Potom v souboru MainPage.xaml.cs přidejte obslužnou rutinu události OnSelectionChanged do třídy:
```
void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Monkey selectedItem = e.CurrentSelection[0] as Monkey;
}
```
Když je vybrána položka v objektu CollectionView, je aktivována událost SelectionChanged, která spustí metodu OnSelectionChanged. Argument sender metody je objekt CollectionView odpovídající za vyvolání události, který se dá použít pro přístup k objektu CollectionView. Vybranou položku poskytuje argument SelectionChangedEventArgs metody OnSelectionChanged.
Na panelu nástrojů sady Visual Studio stiskněte tlačítko Spustit (trojúhelníkové tlačítko, která se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném vzdáleném simulátoru iOSu nebo emulátoru Androidu:

Nastavte zarážku v obslužné rutině události OnSelectionChanged a vyberte položku v objektu CollectionView. Zkontrolujte hodnotu proměnné selectedItem, jestli obsahuje data pro vaši vybranou položku.

V sadě Visual Studio zastavte aplikaci.

Další informace o výběru položky naleznete v tématu Xamarin.Forms CollectionView výběr.

V souboru MainPage.xaml upravte deklaraci objektu CollectionView tak, aby nastavila vlastnost SelectionMode na Single a obslužnou rutinu pro událost SelectionChanged:
```
<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged" />
```
Tento kód nastaví výběr jedné položky v objektu CollectionView a nastaví událost SelectionChanged na obslužnou rutinu události s názvem OnSelectionChanged. Obslužná rutina události se vytvoří v dalším kroku.
V Oblasti řešení v projektu CollectionViewTutorial rozbalte uzel MainPage.xaml a poklikáním otevřete soubor MainPage.xaml.cs. Potom v souboru MainPage.xaml.cs přidejte obslužnou rutinu události OnSelectionChanged do třídy:
```
void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Monkey selectedItem = e.CurrentSelection[0] as Monkey;
}
```
Když je vybrána položka v objektu CollectionView, je aktivována událost SelectionChanged, která spustí metodu OnSelectionChanged. Argument sender metody je objekt CollectionView odpovídající za vyvolání události, který se dá použít pro přístup k objektu CollectionView. Vybranou položku poskytuje argument SelectionChangedEventArgs metody OnSelectionChanged.
Na panelu nástrojů sady Visual Studio pro Mac stiskněte tlačítko Spustit (trojúhelníkové tlačítko, které se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném simulátoru iOSu nebo emulátoru Androidu:

Nastavte zarážku v obslužné rutině události OnSelectionChanged a vyberte položku v objektu CollectionView. Zkontrolujte hodnotu proměnné selectedItem, jestli obsahuje data pro vaši vybranou položku.

V sadě Visual Studio pro Mac zastavte aplikaci.

Další informace o výběru položky naleznete v tématu Xamarin.Forms CollectionView výběr.

Přizpůsobení vzhledu položky

3 min zbývá

Objekt CollectionView jsme dříve naplnili daty pomocí datových vazeb. Bez ohledu na vazbu dat na kolekci, při které každý objekt v kolekci definoval více položek dat, se pro každý objekt zobrazila jenom jedna položka dat (vlastnost Name objektu Monkey).

V tomto cvičení upravíte projekt CollectionViewTutorial tak, aby objekt CollectionView zobrazoval v každém řádku více položek dat.

Visual Studio
Visual Studio pro Mac

V souboru MainPage.xaml můžete úpravou deklarace objektu CollectionView přizpůsobit vzhled každé položky dat:

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

Tento kód nastaví vlastnost CollectionView.ItemTemplate na šablonu DataTemplate, která definuje vzhled každé položky v objektu CollectionView. Podřízená položka šablony DataTemplate je Grid, která obsahuje objekt Image a dva objekty Label. Data objektu Image vážou jeho vlastnost Source na vlastnost ImageUrl každého objektu Monkey, zatímco objekty Label vážou svoje vlastnosti Text na vlastnosti Name a Location každého objektu Monkey.

Další informace o vzhledu položky objektu CollectionView naleznete v tématu Definování vzhledu položky. Další informace o šablonách dat naleznete v tématu Xamarin.Forms Šablony dat.

Na panelu nástrojů sady Visual Studio stiskněte tlačítko Spustit (trojúhelníkové tlačítko, která se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném vzdáleném simulátoru iOSu nebo emulátoru Androidu:

V sadě Visual Studio zastavte aplikaci.

V souboru MainPage.xaml můžete úpravou deklarace objektu CollectionView přizpůsobit vzhled každé položky dat:

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

Další informace o vzhledu položky objektu CollectionView naleznete v tématu Definování vzhledu položky. Další informace o šablonách dat naleznete v tématu Xamarin.Forms Šablony dat.

Na panelu nástrojů sady Visual Studio pro Mac stiskněte tlačítko Spustit (trojúhelníkové tlačítko, které se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném simulátoru iOSu nebo emulátoru Androidu:

V sadě Visual Studio pro Mac zastavte aplikaci.

Sdílet prostřednictvím

Xamarin.Forms Kurz CollectionView

Vytvoření objektu collectionview

Naplnění daty

Reakce na výběr položek

Přizpůsobení vzhledu položky

Gratulujeme!

Další kroky

Sdílet prostřednictvím

Xamarin.Forms Kurz CollectionView

Vytvoření objektu collectionview

Naplnění daty

Reakce na výběr položek

Přizpůsobení vzhledu položky

Gratulujeme!

Další kroky

Související odkazy