Xamarin.FormsCollectionView のチュートリアル

[アーティクル]
Developer (初級)
完了まで 13 分

このチュートリアルを試行する前に、以下を正常に完了しておく必要があります。

初めての Xamarin.Forms アプリのビルドに関するクイックスタート。
StackLayout のチュートリアル。
Grid のチュートリアル。
Label のチュートリアル。
Image のチュートリアル。

このチュートリアルでは、次の作業を行う方法について説明します。

XAML で Xamarin.FormsCollectionView を作成する。
CollectionView にデータを読み込む。
選択されている CollectionView 項目に応答する。
CollectionView 項目の外観をカスタマイズする。

CollectionView の外観をカスタマイズする方法を示す簡単なアプリケーションを作成するには、Visual Studio 2019 または Visual Studio for Mac を使用します。次のスクリーンショットは、最終的なアプリケーションです。

CollectionView を作成する

残り 12 分

Visual Studio
Visual Studio for Mac

このチュートリアルを完了するには、 .NET によるモバイル開発ワークロードがインストールされた、Visual Studio 2019 (最新リリース) が必要です。さらに、iOS でチュートリアルアプリケーションを構築するには、ペアリング済みの Mac が必要になります。 Xamarin プラットフォームのインストールについては、「Xamarin のインストール」を参照してください。 Mac ビルドホストへの Visual Studio 2019 の接続については、「Xamarin.iOS 開発のために Mac とペアリングする」を参照してください。

Visual Studio を起動し、CollectionViewTutorial という名前の新しい空の Xamarin.Forms アプリを作成します。

重要

このチュートリアルの C# と XAML のスニペットでは、CollectionViewTutorial という名前のソリューションが必要です。別の名前を使用すると、コードをこのチュートリアルからソリューションにコピーするときに、ビルドエラーが発生します。

作成される .NET Standard ライブラリの詳細については、Xamarin.Forms クイックスタート Deep Dive の「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 のプラットフォームのサポートがインストールされた Visual Studio for Mac (最新リリース) が必要です。さらに、Xcode (最新リリース) も必要になります。 Xamarin プラットフォームのインストールについて詳しくは、「Xamarin のインストール」を参照してください。

Visual Studio for Mac を起動し、CollectionViewTutorial という名前の新しい空の Xamarin.Forms アプリを作成します。

重要

このチュートリアルの C# と XAML のスニペットでは、CollectionViewTutorial という名前のソリューションが必要です。別の名前を使用すると、コードをこのチュートリアルからソリューションにコピーするときに、ビルドエラーが発生します。

作成される .NET Standard ライブラリの詳細については、Xamarin.Forms クイックスタート Deep Dive の「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>

Visual Studio for Mac ツールバーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。

Visual Studio for Mac で、アプリケーションを停止します。

データを読み込む

残り 10 分

型の IEnumerableItemsSource プロパティを使用して、CollectionView にデータが取り込まれます。前の手順で、XAML の CollectionView に文字列の配列を取り込みました。ただし、通常 CollectionView には、IEnumerable を実装するコードで定義されたコレクションからのデータが取り込まれます。

この演習では、List に保管されているオブジェクトのコレクションからのデータを CollectionView に取り込むように CollectionViewTutorial プロジェクトを変更します。

Visual Studio
Visual Studio for 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;
    }        
}
```
このコードは、サルを表すイメージの名前、場所、および 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 プロパティを定義し、それをクラスコンストラクターの空白のリストに初期化します。その後、Monkey オブジェクトが Monkeys コレクションに追加され、ページの BindingContext が MainPage オブジェクトに設定されます。 BindingContext プロパティの詳細については、「Xamarin.Forms Data Binding」ガイドの「Bindings with a Binding Context」 (バインディングコンテキストを使用するバインディング) を参照してください。

重要

BindingContext プロパティはビジュアルツリーを介して継承されます。したがって、それが ContentPage オブジェクトに設定されているため、ContentPage の子オブジェクトは CollectionView を含むその値を継承します。

MainPage.xaml で、ItemsSource プロパティを Monkeys コレクションに設定するように CollectionView 宣言を変更します。
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
このコードデータは、ItemsSource プロパティを Monkeys コレクションにバインドします。実行時に、CollectionView はコレクションの MonkeysBindingContext を調べ、それにこのコレクションからのデータが取り込まれます。データバインディングの詳細については、「Xamarin.Forms のデータバインディング」を参照してください。
Visual Studio ツールバーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択したリモート iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。

CollectionView は、Monkeys コレクション内の各 Monkey の Name プロパティを表示しています。これは、CollectionView が既定では、コレクションのオブジェクトを表示するときに (Name プロパティ値を返すために Monkey クラスでオーバーライドされている) ToString メソッドを呼び出すためです。

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;
    }
}
```
このコードは、サルを表すイメージの名前、場所、および 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;
        }
    }
}

重要

MainPage.xaml で、ItemsSource プロパティを Monkeys コレクションに設定するように CollectionView 宣言を変更します。
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
このコードデータは、ItemsSource プロパティを Monkeys コレクションにバインドします。実行時に、CollectionView はコレクションの MonkeysBindingContext を調べ、それにこのコレクションからのデータが取り込まれます。データバインディングの詳細については、「Xamarin.Forms のデータバインディング」を参照してください。
Visual Studio for Mac ツールバーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。

CollectionView は、Monkeys コレクション内の各 Monkey の Name プロパティを表示しています。これは、CollectionView が既定では、コレクションのオブジェクトを表示するときに (Name プロパティ値を返すために Monkey クラスでオーバーライドされている) ToString メソッドを呼び出すためです。

Visual Studio for Mac で、アプリケーションを停止します。

項目の選択に応答する

残り 6 分

Visual Studio
Visual Studio for Mac

MainPage.xaml で、SelectionMode プロパティが Single に設定され、SelectionChanged イベント用のハンドラーが設定されるように CollectionView 宣言を変更します。
```
<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged" />
```
このコードセットでは、CollectionView で 1 つの項目の選択が有効になり、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 内の項目を選択すると、メソッドを実行する OnSelectionChangedSelectionChanged イベントが発生します。メソッドに対する 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 で 1 つの項目の選択が有効になり、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 内の項目を選択すると、メソッドを実行する OnSelectionChangedSelectionChanged イベントが発生します。メソッドに対する sender 引数は、イベントの発生を担当する CollectionView オブジェクトであり、CollectionView オブジェクトへのアクセスに使用できます。 OnSelectionChanged メソッドの SelectionChangedEventArgs 引数によって、選択された項目が提供されます。
Visual Studio for Mac ツールバーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。

OnSelectionChanged イベントハンドラーにブレークポイントを設定し、CollectionView で項目を選択します。 selectedItem 変数の値を調べて、選択した項目のデータが含まれていることを確認します。

Visual Studio for Mac で、アプリケーションを停止します。

項目の選択の詳細については、「Xamarin.Forms CollectionView の選択」を参照してください。

項目の外観をカスタマイズする

残り 3 分

以前は、データバインディングを使用して CollectionView にデータが取り込まれていました。しかし、コレクション内の各オブジェクトが複数のデータ項目を定義しているコレクションへのデータバインディングであるにもかかわらず、オブジェクトごとに単一のデータ項目のみ (Monkey オブジェクトの Name プロパティー) が表示されていました。

この演習では、CollectionView の各行に複数のデータ項目が表示されるように CollectionViewTutorial プロジェクトを変更します。

Visual Studio
Visual Studio for 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>
```
このコードは、CollectionView.ItemTemplate プロパティを DataTemplate に設定します。これにより、CollectionView の各項目の外観を定義します。 DataTemplate の子は Grid です。これには、Image オブジェクトと 2 つの 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>
```
このコードは、CollectionView.ItemTemplate プロパティを DataTemplate に設定します。これにより、CollectionView の各項目の外観を定義します。 DataTemplate の子は Grid です。これには、Image オブジェクトと 2 つの Label オブジェクトが含まれています。 Image オブジェクトデータは、その Source プロパティを各 Monkey オブジェクトの ImageUrl プロパティにバインドします。一方、Label オブジェクトは、それらの Text プロパティを各 Monkey オブジェクトの Name プロパティと Location プロパティにバインドします。

CollectionView 項目の外観の詳細については、「項目の外観を定義する」を参照してください。データテンプレートの詳細については、「Xamarin.Forms のデータテンプレート」を参照してください。
Visual Studio for Mac ツールバーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。

Visual Studio for Mac で、アプリケーションを停止します。

次の方法で共有

Xamarin.FormsCollectionView のチュートリアル

CollectionView を作成する

データを読み込む

項目の選択に応答する

項目の外観をカスタマイズする

おめでとうございます。

次の手順

次の方法で共有

Xamarin.FormsCollectionView のチュートリアル

CollectionView を作成する

データを読み込む

項目の選択に応答する

項目の外観をカスタマイズする

おめでとうございます。

次の手順

関連リンク