Xamarin.Forms CollectionView 자습서

아티클
Developer (초급)
완료하는 데 13분 걸림

이 자습서를 시도하기 전에 다음 작업을 성공적으로 완료해야 합니다.

첫 번째 Xamarin.Forms 앱을 빌드하세요 빠른 시작.
StackLayout 자습서
그리드 자습서.
레이블 자습서.
이미지 자습서.

이 자습서에서는 다음을 하는 방법을 알아볼 수 있습니다.

XAML에서 Xamarin.FormsCollectionView을 만듭니다.
CollectionView를 데이터로 채웁니다.
선택된 CollectionView 항목에 응답합니다.
CollectionView 항목의 모양을 사용자 지정합니다.

Visual Studio 2019 또는 Mac용 Visual Studio를 사용하여 CollectionView의 모양을 사용자 지정하는 방법을 보여 주는 간단한 애플리케이션을 만들겠습니다. 다음 스크린샷은 최종 애플리케이션을 보여 줍니다.

CollectionView 만들기

12분 남음

Visual Studio
Mac용 Visual Studio

이 자습서를 완료하려면 .NET을 사용한 모바일 개발 워크로드가 설치된 Visual Studio 2019(최신 릴리스)가 있어야 합니다. 또한 iOS에서 자습서 애플리케이션을 빌드하려면 페어링된 Mac이 필요합니다. Xamarin 플랫폼 설치에 대한 자세한 내용은 Xamarin 설치를 참조하세요. Visual Studio 2019를 Mac 빌드 호스트에 연결하는 방법에 대한 자세한 내용은 Xamarin.iOS 개발을 위해 Mac에 페어링을 참조하세요.

Visual Studio를 시작하고 CollectionViewTutorial이라는 이름의 빈 Xamarin.Forms 앱을 새로 만듭니다.

Important

이 자습서의 C# 및 XAML 코드 조각은 솔루션의 이름이 CollectionViewTutorial이어야 합니다. 이 자습서에서 코드를 솔루션으로 복사할 때 다른 이름을 사용하면 빌드 오류가 발생합니다.

생성된 .NET Standard 라이브러리에 대한 자세한 내용은 Xamarin.Forms 빠른 시작 심층 분석에서 Xamarin.Forms 애플리케이션 분석을 참조하세요.

솔루션 탐색기의 CollectionViewTutorial 프로젝트에서 MainPage.xaml을 두 번 클릭하여 엽니다. 그런 다음, 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>

이 코드는 StackLayout에서 CollectionView으로 구성된 페이지에 대한 사용자 인터페이스를 선언적으로 정의합니다. CollectionView.ItemsSource 속성은 표시할 항목을 지정하고 이는 문자열의 배열에서 정의됩니다.

Visual Studio 도구 모음에서 선택한 원격 iOS 시뮬레이터 또는 Android 에뮬레이터 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.

Visual Studio에서 애플리케이션을 중지합니다.

이 자습서를 완료하려면 iOS 및 Android 플랫폼 지원이 설치된 Mac용 Visual Studio(최신 릴리스)가 있어야 합니다. 또한 Xcode(최신 릴리스)도 필요합니다. Xamarin 플랫폼 설치에 대한 자세한 내용은 Xamarin 설치를 참조하세요.

Mac용 Visual Studio를 시작하고 CollectionViewTutorial이라는 비어 있는 새 Xamarin.Forms 앱을 만듭니다.

Important

이 자습서의 C# 및 XAML 코드 조각은 솔루션의 이름이 CollectionViewTutorial이어야 합니다. 이 자습서에서 코드를 솔루션으로 복사할 때 다른 이름을 사용하면 빌드 오류가 발생합니다.

생성된 .NET Standard 라이브러리에 대한 자세한 내용은 Xamarin.Forms 빠른 시작 심층 분석에서 Xamarin.Forms 애플리케이션 분석을 참조하세요.

Solution Pad의 CollectionViewTutorial 프로젝트에서 MainPage.xaml을 두 번 클릭하여 엽니다. 그런 다음, 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>

Mac용 Visual Studio 도구 모음에서 선택한 iOS 시뮬레이터 또는 Android 에뮬레이터 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.

Mac용 Visual Studio에서 애플리케이션을 중지합니다.

데이터로 채우기

10분 남음

CollectionView는 IEnumerable 형식인 ItemsSource 속성을 사용하여 데이터를 채웁니다. 이전 단계에서 XAML의 CollectionView를 문자열 배열로 채웠습니다. 그러나 일반적으로 CollectionView는 코드로 정의된, IEnumerable를 구현하는 컬렉션의 데이터로 채워집니다.

이 연습에서는 CollectionViewTutorial 프로젝트를 수정하여 CollectionView를 List에 저장된 개체 컬렉션의 데이터로 채웁니다.

Visual Studio
Mac용 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을 저장하는 Monkey 개체를 정의합니다. 또한 이 클래스는 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;
        }
    }
}

이 코드는 IList<Monkey> 형식의 Monkeys 속성을 정의하고 클래스 생성자의 빈 목록으로 초기화합니다. 그런 다음, Monkeys 컬렉션에 Monkey 개체를 추가하고 페이지의 BindingContext를 MainPage 개체로 설정합니다. BindingContext 속성에 대한 자세한 내용은 Xamarin.Forms 데이터 바인딩 가이드의 바인딩 컨텍스트로 바인딩을 참조하세요.

Important

BindingContext 속성은 시각적 트리를 통해 상속됩니다. 따라서 ContentPage 개체에 설정되어 있기 때문에, ContentPage의 자식 개체는 CollectionView를 포함하여 해당 값을 상속합니다.

MainPage.xaml에서 CollectionView 선언을 수정하여 ItemsSource 속성을 Monkeys 컬렉션으로 설정합니다.
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
이 코드 데이터는 ItemsSource 속성을 Monkeys 컬렉션에 바인딩합니다. 런타임 시 CollectionView는 Monkeys 컬렉션의 BindingContext를 살펴보고, 이 컬렉션의 데이터로 채워집니다. 데이터 바인딩에 대한 자세한 내용은 Xamarin.Forms 데이터 바인딩을 참조하세요.
Visual Studio 도구 모음에서 선택한 원격 OS 시뮬레이터 또는 Android 에뮬레이터 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.

CollectionView에는 Monkeys 컬렉션의 각 Monkey에 대한 Name 속성이 표시됩니다. 이는 기본적으로 CollectionView가 컬렉션에서 개체를 표시할 때 ToString 메서드를 호출하기 때문입니다(Monkey 클래스에서 재정의되어 Name 속성 값 반환).

Visual Studio에서 애플리케이션을 중지합니다.

Solution Pad의 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을 저장하는 Monkey 개체를 정의합니다. 또한 이 클래스는 ToString 메서드를 재정의하여 Name 속성을 반환합니다.

Solution Pad의 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;
        }
    }
}

Important

MainPage.xaml에서 CollectionView 선언을 수정하여 ItemsSource 속성을 Monkeys 컬렉션으로 설정합니다.
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
이 코드 데이터는 ItemsSource 속성을 Monkeys 컬렉션에 바인딩합니다. 런타임 시 CollectionView는 Monkeys 컬렉션의 BindingContext를 살펴보고, 이 컬렉션의 데이터로 채워집니다. 데이터 바인딩에 대한 자세한 내용은 Xamarin.Forms 데이터 바인딩을 참조하세요.
Mac용 Visual Studio 도구 모음에서 선택한 iOS 시뮬레이터 또는 Android 에뮬레이터 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.

CollectionView에는 Monkeys 컬렉션의 각 Monkey에 대한 Name 속성이 표시됩니다. 이는 기본적으로 CollectionView가 컬렉션에서 개체를 표시할 때 ToString 메서드를 호출하기 때문입니다(Monkey 클래스에서 재정의되어 Name 속성 값 반환).

Mac용 Visual Studio에서 애플리케이션을 중지합니다.

항목 선택에 응답

6분 남음

Visual Studio
Mac용 Visual Studio

MainPage.xaml에서 SelectionMode 속성을 Single로 설정하고 SelectionChanged 이벤트에 대한 처리기를 설정하도록 CollectionView 선언을 수정합니다.
```
<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged" />
```
이 코드 집합을 사용하여 CollectionView에서 단일 항목을 선택할 수 있으며, SelectionChanged 이벤트를 OnSelectionChanged라는 이벤트 처리기로 설정합니다. 이벤트 처리기는 다음 단계에서 생성됩니다.
솔루션 탐색기의 CollectionViewTutorial 프로젝트에서 MainPage.xaml을 확장하고 MainPage.xaml.cs를 두 번 클릭하여 엽니다. 그런 다음, MainPage.xaml.cs에서 OnSelectionChanged 처리기를 클래스에 추가합니다.
```
void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Monkey selectedItem = e.CurrentSelection[0] as Monkey;
}
```
CollectionView의 항목이 선택되면 OnSelectionChanged 메서드를 실행하는 SelectionChanged 이벤트가 발생합니다. 메서드에 대한 sender 인수는 이벤트의 실행을 담당하는 CollectionView 개체이며 CollectionView 개체에 액세스하는 데 사용될 수 있습니다. OnSelectionChanged 메서드에 대한 SelectionChangedEventArgs 인수는 선택한 항목을 제공합니다.
Visual Studio 도구 모음에서 선택한 원격 iOS 시뮬레이터 또는 Android 에뮬레이터 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.

OnSelectionChanged 이벤트 처리기에서 중단점을 설정하고 CollectionView에서 항목을 선택합니다. selectedItem 변수의 값을 검사하여 선택한 항목에 대한 데이터가 포함되어 있는지 확인합니다.

Visual Studio에서 애플리케이션을 중지합니다.

항목 선택에 대한 자세한 내용은 Xamarin.Forms CollectionView 선택을 참조하세요.

MainPage.xaml에서 SelectionMode 속성을 Single로 설정하고 SelectionChanged 이벤트에 대한 처리기를 설정하도록 CollectionView 선언을 수정합니다.
```
<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged" />
```
이 코드 집합을 사용하여 CollectionView에서 단일 항목을 선택할 수 있으며, SelectionChanged 이벤트를 OnSelectionChanged라는 이벤트 처리기로 설정합니다. 이벤트 처리기는 다음 단계에서 생성됩니다.
Solution Pad의 CollectionViewTutorial 프로젝트에서 MainPage.xaml을 확장하고 MainPage.xaml.cs를 두 번 클릭하여 엽니다. 그런 다음, MainPage.xaml.cs에서 OnSelectionChanged 처리기를 클래스에 추가합니다.
```
void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Monkey selectedItem = e.CurrentSelection[0] as Monkey;
}
```
CollectionView의 항목이 선택되면 OnSelectionChanged 메서드를 실행하는 SelectionChanged 이벤트가 발생합니다. 메서드에 대한 sender 인수는 이벤트의 실행을 담당하는 CollectionView 개체이며 CollectionView 개체에 액세스하는 데 사용될 수 있습니다. OnSelectionChanged 메서드에 대한 SelectionChangedEventArgs 인수는 선택한 항목을 제공합니다.
Mac용 Visual Studio 도구 모음에서 선택한 iOS 시뮬레이터 또는 Android 에뮬레이터 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.

OnSelectionChanged 이벤트 처리기에서 중단점을 설정하고 CollectionView에서 항목을 선택합니다. selectedItem 변수의 값을 검사하여 선택한 항목에 대한 데이터가 포함되어 있는지 확인합니다.

Mac용 Visual Studio에서 애플리케이션을 중지합니다.

항목 선택에 대한 자세한 내용은 Xamarin.Forms CollectionView 선택을 참조하세요.

항목 모양 사용자 지정

3분 남음

이전에 CollectionView는 데이터 바인딩을 사용하는 데이터로 채워졌습니다. 하지만 컬렉션에 데이터를 바인딩함에도 불구하고 컬렉션의 각 개체가 데이터의 여러 항목을 정의하는 경우 데이터의 단일 항목만 개체별로 표시되었습니다(Monkey 개체의 Name 속성).

이 연습에서는 CollectionView가 각 행에 있는 데이터의 여러 항목을 표시하도록 CollectionViewTutorial 프로젝트를 수정합니다.

Visual Studio
Mac용 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>

이 코드는 CollectionView.ItemTemplate 속성을 DataTemplate으로 설정합니다. 여기서는 CollectionView에 있는 각 항목의 모양을 정의합니다. DataTemplate의 자식은 Grid입니다. 여기에는 Image 개체 한 개와 Label 개체 두 개가 포함되어 있습니다. Image 개체 데이터는 해당하는 Source 속성을 각 Monkey 개체의 ImageUrl 속성에 바인딩하는 반면, Label 개체는 해당하는 Text 속성을 Monkey 개체의 Name 및 Location 속성에 바인딩합니다.

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>

Mac용 Visual Studio 도구 모음에서 선택한 iOS 시뮬레이터 또는 Android 에뮬레이터 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.

Mac용 Visual Studio에서 애플리케이션을 중지합니다.

다음을 통해 공유

Xamarin.Forms CollectionView 자습서

CollectionView 만들기

데이터로 채우기

항목 선택에 응답

항목 모양 사용자 지정

축하합니다!

다음 단계

다음을 통해 공유

Xamarin.Forms CollectionView 자습서

CollectionView 만들기

데이터로 채우기

항목 선택에 응답

항목 모양 사용자 지정

축하합니다!

다음 단계

관련 링크