Учебник по CollectionView в Xamarin.Forms

Статья
Developer (Начальный уровень)
13 мин до завершения

Прежде чем работать с этим учебником, вы должны выполнить:

Краткое руководство Создание первого Xamarin.Forms приложения.
Руководство по StackLayout.
Руководство по Grid.
Руководство по Label.
Руководство по Image.

В этом руководстве описано следующее:

Создайте Xamarin.FormsCollectionView в XAML.
Заполнять CollectionView данными.
Реагировать на выбор элементов CollectionView.
Настраивать внешний вид элементов CollectionView.

С помощью Visual Studio 2019 или Visual Studio для Mac вы создадите простое приложение, демонстрирующее, как настроить внешний вид CollectionView. На следующих снимках экрана показано готовое приложение.

Создание представления CollectionView

Осталось 12 мин

Visual Studio
Visual Studio для Mac

Для работы с этим руководством у вас должен быть последний выпуск Visual Studio 2019 с установленной рабочей нагрузкой Разработка мобильных приложений на .NET. Кроме того, вам потребуется компьютер Mac для сборки учебного приложения на iOS. Сведения об установке платформы Xamarin см. в статье Установка Xamarin. Сведения о подключении Visual Studio 2019 к узлу сборки Mac см. в статье Связывание с Mac при разработке для Xamarin.iOS.

Запустите Visual Studio и создайте пустое приложение Xamarin.Forms, присвоив ему имя CollectionViewTutorial.

Внимание

Во фрагментах кода C# и XAML в этом руководстве предполагается, что решение называется CollectionViewTutorial. Выбор другого имени приведет к ошибкам сборки при копировании кода из этого руководства в решение.

Дополнительные сведения о создаваемой библиотеке .NET Standard см. в разделе Структура приложения Xamarin.Forms статьи Подробное изучение кратких руководств по Xamarin.Forms.

В обозревателе решений дважды щелкните файл MainPage.xaml в проекте CollectionViewTutorial, чтобы открыть его. В MainPage.xaml удалите весь код шаблона и замените его приведенным ниже кодом:

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

Этот код декларативно определяет пользовательский интерфейс для страницы, который состоит из CollectionView в StackLayout. Свойство CollectionView.ItemsSource задает элементы, которые нужно отобразить, которые определены в массиве строк.

На панели инструментов Visual Studio нажмите кнопку Пуск (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном удаленном симуляторе iOS или эмуляторе Android.

В Visual Studio остановите приложение.

Для работы с этим руководством вам нужно установить Visual Studio для Mac (последний выпуск) с поддержкой платформ Android и iOS. Кроме того, вам потребуется Xcode (последний выпуск). Дополнительные сведения об установке платформы Xamarin см. в статье Установка Xamarin.

Запустите Visual Studio для Mac и создайте пустое приложение Xamarin.Forms, присвоив ему имя CollectionViewTutorial.

Внимание

Во фрагментах кода C# и XAML в этом руководстве предполагается, что решение называется CollectionViewTutorial. Выбор другого имени приведет к ошибкам сборки при копировании кода из этого руководства в решение.

Дополнительные сведения о создаваемой библиотеке .NET Standard см. в разделе Структура приложения Xamarin.Forms статьи Подробное изучение кратких руководств по Xamarin.Forms.

На Панели решения дважды щелкните файл MainPage.xaml в проекте CollectionViewTutorial, чтобы открыть его. В MainPage.xaml удалите весь код шаблона и замените его приведенным ниже кодом:

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

На панели инструментов Visual Studio для Mac нажмите кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном симуляторе iOS или эмуляторе Android:

В Visual Studio для Mac остановите приложение.

Заполнение данными

Осталось 10 мин

Объект CollectionView заполняется данными с помощью свойства ItemsSource, которое имеет тип IEnumerable. Предыдущий шаг заполняет CollectionView в XAML массивом строк. Тем не менее обычно CollectionView будет заполняться данными из коллекции, определенной в коде, который реализует IEnumerable.

В этом упражнении вы измените проект CollectionViewTutorial для заполнения представления CollectionView данными из коллекции объектов, хранящейся в List.

Visual Studio
Visual Studio для Mac

В обозревателе решений в проекте CollectionViewTutorial добавьте класс с именем Monkey, содержащий следующий код:
```
public class Monkey
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string ImageUrl { get; set; }

    public override string ToString()
    {
        return Name;
    }        
}
```
Этот код определяет объект Monkey, который хранит имя, расположение и URL-адрес изображения обезьяны. Кроме того, класс переопределяет метод ToString для возвращения значения свойства Name.

В обозревателе решений в проекте CollectionViewTutorial разверните MainPage.xaml и дважды щелкните файл MainPage.xaml.cs, чтобы открыть его. Затем удалите из MainPage.xaml.cs весь шаблонный код и замените его приведенным ниже:

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

Этот код определяет свойство Monkeys типа IList<Monkey> и инициализирует его пустым списком в конструкторе класса. Затем объекты Monkey добавляются в коллекцию Monkeys, и BindingContext страницы задаются как объект MainPage. Дополнительные сведения о свойстве BindingContext см. в разделе Привязки с контекстом привязки в руководстве Привязки данных в Xamarin.Forms.

Внимание

Свойство BindingContext наследуется через визуальное дерево. Так как оно задано для объекта ContentPage, дочерние объекты ContentPage наследуют свое значение, включая CollectionView.

В MainPage.xaml измените объявление CollectionView, чтобы задать свойство ItemsSource как коллекцию Monkeys:
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
Этот код привязывает свойство ItemsSource к коллекции Monkeys. Во время выполнения CollectionView найдет в своем BindingContext коллекцию Monkeys и будет заполняться данными из этой коллекции. Дополнительные сведения о привязке данных см. в разделе Привязка данных Xamarin.Forms.
На панели инструментов Visual Studio нажмите кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном удаленном симуляторе iOS или эмуляторе Android.

CollectionView отображает свойство Name для каждого Monkey в коллекции Monkeys. Это обусловлено тем, что по умолчанию CollectionView вызывает метод ToString при отображении объектов из коллекции (который был переопределен в классе Monkey для возвращения значения свойства Name).

В Visual Studio остановите приложение.

На Панели решения в проекте CollectionViewTutorial добавьте класс с именем Monkey, содержащий следующий код:
```
public class Monkey
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string ImageUrl { get; set; }

    public override string ToString()
    {
        return Name;
    }
}
```
Этот код определяет объект Monkey, который хранит имя, расположение и URL-адрес изображения обезьяны. Кроме того, класс переопределяет метод ToString для возвращения значения свойства Name.

На Панели решения в проекте CollectionViewTutorial разверните MainPage.xaml и дважды щелкните файл MainPage.xaml.cs, чтобы открыть его. Затем удалите из MainPage.xaml.cs весь шаблонный код и замените его приведенным ниже:

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

Внимание

В MainPage.xaml измените объявление CollectionView, чтобы задать свойство ItemsSource как коллекцию Monkeys:
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
Этот код привязывает свойство ItemsSource к коллекции Monkeys. Во время выполнения CollectionView найдет в своем BindingContext коллекцию Monkeys и будет заполняться данными из этой коллекции. Дополнительные сведения о привязке данных см. в разделе Привязка данных Xamarin.Forms.
На панели инструментов Visual Studio для Mac нажмите кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном симуляторе iOS или эмуляторе Android:

CollectionView отображает свойство Name для каждого Monkey в коллекции Monkeys. Это обусловлено тем, что по умолчанию CollectionView вызывает метод ToString при отображении объектов из коллекции (который был переопределен в классе Monkey для возвращения значения свойства Name).

В Visual Studio для Mac остановите приложение.

Реагирование на выбор элемента

Осталось 6 мин

Visual Studio
Visual Studio для Mac

В MainPage.xaml измените объявление CollectionView таким образом, чтобы в нем устанавливалось значение Single для свойства SelectionMode, а также устанавливался обработчик для события SelectionChanged:
```
<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged" />
```
Этот код разрешает выбор одного элемента в CollectionView и задает обработчик событий с именем OnSelectionChanged для события SelectionChanged. Обработчик событий будет создан на следующем шаге.
В обозревателе решений в проекте CollectionViewTutorial разверните MainPage.xaml и дважды щелкните файл MainPage.xaml.cs, чтобы открыть его. Затем в MainPage.xaml.cs добавьте обработчик событий OnSelectionChanged в класс:
```
void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Monkey selectedItem = e.CurrentSelection[0] as Monkey;
}
```
При выборе элемента в CollectionView запускается событие SelectionChanged, которое выполняет метод OnSelectionChanged. Аргумент sender метода является объектом CollectionView, отвечающим за запуск события, и может использоваться для доступа к объекту CollectionView. Аргумент SelectionChangedEventArgs метода OnSelectionChanged предоставляет выбранный элемент.
На панели инструментов Visual Studio нажмите кнопку Пуск (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном удаленном симуляторе iOS или эмуляторе Android.

Установите точку останова в обработчике событий OnSelectionChanged и выберите элемент в CollectionView. Проверьте значение переменной selectedItem, чтобы убедиться, что оно содержит данные для выбранного элемента.

В Visual Studio остановите приложение.

Дополнительные сведения о выборе элементов см. в статье Выбор CollectionView в Xamarin.Forms.

В MainPage.xaml измените объявление CollectionView таким образом, чтобы в нем устанавливалось значение Single для свойства SelectionMode, а также устанавливался обработчик для события SelectionChanged:
```
<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged" />
```
Этот код разрешает выбор одного элемента в CollectionView и задает обработчик событий с именем OnSelectionChanged для события SelectionChanged. Обработчик событий будет создан на следующем шаге.
На Панели решения в проекте CollectionViewTutorial разверните MainPage.xaml и дважды щелкните файл MainPage.xaml.cs, чтобы открыть его. Затем в MainPage.xaml.cs добавьте обработчик событий OnSelectionChanged в класс:
```
void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Monkey selectedItem = e.CurrentSelection[0] as Monkey;
}
```
При выборе элемента в CollectionView запускается событие SelectionChanged, которое выполняет метод OnSelectionChanged. Аргумент sender метода является объектом CollectionView, отвечающим за запуск события, и может использоваться для доступа к объекту CollectionView. Аргумент SelectionChangedEventArgs метода OnSelectionChanged предоставляет выбранный элемент.
На панели инструментов Visual Studio для Mac нажмите кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном симуляторе iOS или эмуляторе Android:

Установите точку останова в обработчике событий OnSelectionChanged и выберите элемент в CollectionView. Проверьте значение переменной selectedItem, чтобы убедиться, что оно содержит данные для выбранного элемента.

В Visual Studio для Mac остановите приложение.

Дополнительные сведения о выборе элементов см. в статье Выбор CollectionView в Xamarin.Forms.

Настройка внешнего вида элемента

Осталось 3 мин

Ранее мы заполнили CollectionView данными с помощью привязки данных. Однако несмотря на привязку данных к коллекции, где каждый объект в коллекции определял несколько элементов данных, только один элемент данных отображался для каждого объекта (свойство Name объекта Monkey).

В этом упражнении вы измените проект CollectionViewTutorial, чтобы в представлении CollectionView отображалось несколько элементов данных в каждой строке.

Visual Studio
Visual Studio для Mac

В MainPage.xaml измените объявление CollectionView, чтобы настроить внешний вид каждого элемента данных:
```
<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>
```
Этот код задает значение DataTemplate для свойства CollectionView.ItemTemplate, которое определяет внешний вид каждого элемента в CollectionView. Дочерний элемент DataTemplate — Grid, содержащий объект Image и два объекта Label. Объект Image привязывает свое свойство Source к свойству ImageUrl каждого объекта Monkey, а объекты Label привязывают свои свойства Text к свойствам Name и Location каждого объекта Monkey.

Дополнительные сведения о внешнем виде элемента CollectionView см. в разделе Определение внешнего вида элемента. Дополнительные сведения о шаблонах данных см. в разделе Общие сведения о шаблонах данныхXamarin.Forms.
На панели инструментов Visual Studio нажмите кнопку Пуск (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном удаленном симуляторе iOS или эмуляторе Android.

В Visual Studio остановите приложение.

В MainPage.xaml измените объявление CollectionView, чтобы настроить внешний вид каждого элемента данных:
```
<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>
```
Этот код задает значение DataTemplate для свойства CollectionView.ItemTemplate, которое определяет внешний вид каждого элемента в CollectionView. Дочерний элемент DataTemplate — Grid, содержащий объект Image и два объекта Label. Объект Image привязывает свое свойство Source к свойству ImageUrl каждого объекта Monkey, а объекты Label привязывают свои свойства Text к свойствам Name и Location каждого объекта Monkey.

Дополнительные сведения о внешнем виде элемента CollectionView см. в разделе Определение внешнего вида элемента. Дополнительные сведения о шаблонах данных см. в разделе Общие сведения о шаблонах данныхXamarin.Forms.
На панели инструментов Visual Studio для Mac нажмите кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном симуляторе iOS или эмуляторе Android:

В Visual Studio для Mac остановите приложение.

Поделиться через

Учебник по CollectionView в Xamarin.Forms

Создание представления CollectionView

Заполнение данными

Реагирование на выбор элемента

Настройка внешнего вида элемента

Поздравляем!

Следующие шаги

Поделиться через

Учебник по CollectionView в Xamarin.Forms

Создание представления CollectionView

Заполнение данными

Реагирование на выбор элемента

Настройка внешнего вида элемента

Поздравляем!

Следующие шаги

Дополнительные ссылки