Xamarin.Forms CollectionView Öğreticisi

Makale
Developer (Başlangıç)
Tamamlanması için 13 dakika kaldı

Bu öğreticiye başlamadan önce şunları başarıyla tamamlamış olmanız gerekir:

İlk Xamarin.Forms uygulama hızlı başlangıcınızı oluşturun.
StackLayout öğreticisi.
Kılavuz öğreticisi.
Etiket öğreticisi.
Görüntü öğreticisi.

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

XAML içinde bir Xamarin.FormsCollectionView oluşturun.
CollectionView öğesini verilerle doldurma.
Seçilen CollectionView öğelerine yanıt verme.
CollectionView öğelerinin görünümünü özelleştirme.

Bir CollectionView görünümünü özelleştirmeyi gösteren basit bir uygulama oluşturmak için Visual Studio 2019 veya Mac için Visual Studio kullanacaksınız. Aşağıdaki ekran görüntüleri, son uygulamayı gösterir:

CollectionView oluşturma

12 dakika kaldı

Visual Studio
Mac için Visual Studio

Bu öğreticiyi tamamlamak için Visual Studio 2019 (son sürüm) ve .NET ile mobil uygulama geliştirme iş yükü sisteminizde yüklü olmalıdır. Ayrıca öğretici uygulamasını iOS üzerinde derleyebilmek için eşleştirilmiş bir Mac de gerekecektir. Xamarin platformunu yükleme hakkında bilgi için bkz. Xamarin'i Yükleme. Visual Studio 2019'u bir Mac derleme ana bilgisayarına bağlama hakkında bilgi için bkz. Xamarin.iOS geliştirme için Mac ile eşleştirme.

Visual Studio'yu başlatın ve CollectionViewTutorial adlı boş Xamarin.Forms bir uygulama oluşturun.

Önemli

Bu öğreticide kullanılan C# ve XAML kod parçacıklarında çözüm adı CollectionViewTutorial olarak belirlenmiştir. Farklı bir ad kullanırsanız bu öğreticideki kodları çözüme kopyaladığınızda derleme hatalarıyla karşılaşabilirsiniz.

Oluşturulan .NET Standard kitaplığı hakkında daha fazla bilgi için Bkz. Hızlı Başlangıç Ayrıntılı Bakış'taXamarin.Forms uygulamanın Xamarin.Forms anatomisi.

Çözüm Gezgini'ndeki CollectionViewTutorial projesinde MainPage.xaml dosyasına çift tıklayarak açın. Ardından MainPage.xaml içindeki şablon kodunun tamamını silip aşağıdaki kodu ekleyin:

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

Bu kod, sayfanın kullanıcı arabirimini bildirimli bir şekilde tanımlar ve bu da bir StackLayout içindeki CollectionView öğesinden oluşur. CollectionView.ItemsSource özelliği, görüntülenecek öğeleri belirtir ve bunlar dize dizisi olarak tanımlanır.

Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS simülatöründe veya Android öykünücüsünde başlatın:

Visual Studio'da uygulamayı durdurun.

Bu öğreticiyi tamamlamak için iOS ve Android platformu desteğine sahip Mac için Visual Studio (son sürüm) uygulamasını yüklemiş olmanız gerekir. Ayrıca Xcode (son sürüm) uygulaması da gereklidir. Xamarin platformunu yükleme hakkında daha bilgi için bkz. Xamarin'i Yükleme.

Mac için Visual Studio başlatın ve CollectionViewTutorial adlı yeni bir boş Xamarin.Forms uygulama oluşturun.

Önemli

Bu öğreticide kullanılan C# ve XAML kod parçacıklarında çözüm adı CollectionViewTutorial olarak belirlenmiştir. Farklı bir ad kullanırsanız bu öğreticideki kodları çözüme kopyaladığınızda derleme hatalarıyla karşılaşabilirsiniz.

Oluşturulan .NET Standard kitaplığı hakkında daha fazla bilgi için Bkz. Hızlı Başlangıç Ayrıntılı Bakış'taXamarin.Forms uygulamanın Xamarin.Forms anatomisi.

Çözüm Bölmesi'ndeki CollectionViewTutorial projesinde MainPage.xaml dosyasına çift tıklayarak açın. Ardından MainPage.xaml içindeki şablon kodunun tamamını silip aşağıdaki kodu ekleyin:

<?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 için Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS simülatöründe veya Android öykünücüsünde başlatın:

Mac için Visual Studio'da uygulamayı durdurun.

Verilerle doldurma

10 dakika kaldı

CollectionView öğesini veriyle doldurmak için IEnumerable türündeki ItemsSource özelliği kullanılır. Bir önceki adımda XAML içindeki CollectionView öğesi bir dize dizisiyle dolduruldu. Ancak bir CollectionView genellikle kodda IEnumerable uygulayan bir koleksiyondaki verilerle doldurulur.

Bu alıştırmada CollectionViewTutorial projesini değiştirerek CollectionView öğesini List içinde depolanan nesne koleksiyonundan alınan verilerle dolduracaksınız.

Visual Studio
Mac için Visual Studio

Çözüm Gezgini'ndeki CollectionViewTutorial projesine aşağıdaki kodu içeren Monkey adlı bir sınıf ekleyin:
```
public class Monkey
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string ImageUrl { get; set; }

    public override string ToString()
    {
        return Name;
    }        
}
```
Bu kod, bir maymun görüntüsünün bulunduğu dosyanın adını, konumunu ve URL'sini depolayan bir Monkey nesnesini tanımlar. Bu sınıf ayrıca ToString yöntemini geçersiz kılarak Name özelliğini döndürür.

Çözüm Gezgini'ndeki CollectionViewTutorial projesinde MainPage.xaml bölümünü genişletip MainPage.xaml.cs dosyasına çift tıklayarak açın. Ardından MainPage.xaml.cs içindeki şablon kodunun tamamını silip aşağıdaki kodu ekleyin:

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

Bu kod, IList<Monkey> türünde bir Monkeys özelliği tanımlar ve bunu sınıf oluşturucudaki boş bir listede başlatır. Ardından Monkey nesneleri Monkeys koleksiyonuna eklenir ve sayfanın BindingContext değeri MainPage nesnesi olarak ayarlanır. özelliği hakkında BindingContext daha fazla bilgi için Veri Bağlama kılavuzundaki Bağlama BağlamıXamarin.Forms ile bağlamalar bölümüne bakın.

Önemli

BindingContext özelliği, görsel ağaç üzerinden devralınır. Bu nedenle ContentPage nesnesinde ayarlanmış olduğundan ContentPage alt nesneleri CollectionView dahil olmak üzere onun değerini alır.

MainPage.xaml içindeki CollectionView bildirimini, ItemsSource özelliğini Monkeys koleksiyonu olarak ayarlayacak şekilde değiştirin:
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
Bu kod, ItemsSource özelliğini Monkeys koleksiyonuna bağlar. Çalışma zamanında CollectionView, BindingContext bileşeninde Monkeys koleksiyonunu arar ve o da bu koleksiyondaki verilerle doldurulur. Veri bağlama hakkında daha fazla bilgi için bkz Xamarin.Forms . Veri Bağlama.
Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS simülatöründe veya Android öykünücüsünde başlatın:

CollectionView, Monkeys koleksiyonundaki her bir Monkey için Name özelliğini görüntüler. Bunun nedeni, CollectionView öğesinin bir koleksiyondan (Monkey sınıfında Name özellik değerini döndürecek şekilde geçersiz kılınmış olan) alınan verileri görüntülerken varsayılan olarak ToString yöntemini çağırmasıdır.

Visual Studio'da uygulamayı durdurun.

Çözüm Bölmesi'ndeki CollectionViewTutorial projesine aşağıdaki kodu içeren Monkey adlı bir sınıf ekleyin:
```
public class Monkey
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string ImageUrl { get; set; }

    public override string ToString()
    {
        return Name;
    }
}
```
Bu kod, bir maymun görüntüsünün bulunduğu dosyanın adını, konumunu ve URL'sini depolayan bir Monkey nesnesini tanımlar. Bu sınıf ayrıca ToString yöntemini geçersiz kılarak Name özelliğini döndürür.

Çözüm Bölmesi'ndeki CollectionViewTutorial projesinde MainPage.xaml bölümünü genişletip MainPage.xaml.cs dosyasına çift tıklayarak açın. Ardından MainPage.xaml.cs içindeki şablon kodunun tamamını silip aşağıdaki kodu ekleyin:

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

Önemli

MainPage.xaml içindeki CollectionView bildirimini, ItemsSource özelliğini Monkeys koleksiyonu olarak ayarlayacak şekilde değiştirin:
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
Bu kod, ItemsSource özelliğini Monkeys koleksiyonuna bağlar. Çalışma zamanında CollectionView, BindingContext bileşeninde Monkeys koleksiyonunu arar ve o da bu koleksiyondaki verilerle doldurulur. Veri bağlama hakkında daha fazla bilgi için bkz Xamarin.Forms . Veri Bağlama.
Mac için Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS simülatöründe veya Android öykünücüsünde başlatın:

CollectionView, Monkeys koleksiyonundaki her bir Monkey için Name özelliğini görüntüler. Bunun nedeni, CollectionView öğesinin bir koleksiyondan (Monkey sınıfında Name özellik değerini döndürecek şekilde geçersiz kılınmış olan) alınan verileri görüntülerken varsayılan olarak ToString yöntemini çağırmasıdır.

Mac için Visual Studio'da uygulamayı durdurun.

Öğe seçimine yanıt verme

6 dakika kaldı

Visual Studio
Mac için Visual Studio

MainPage.xaml içinde CollectionView bildirimini değiştirerek SelectionMode özelliğini Single olarak ayarlamasını ve SelectionChanged olayı için bir işleyici ayarlamasını sağlayın:
```
<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged" />
```
Bu kod, CollectionView içinde tek öğe seçimini etkinleştirir ve SelectionChanged olayını OnSelectionChanged adlı bir olay işleyicisi olarak ayarlar. Olay işleyicisi de bir sonraki adımda oluşturulacaktır.
Çözüm Gezgini'ndeki CollectionViewTutorial projesinde MainPage.xaml bölümünü genişletip MainPage.xaml.cs dosyasına çift tıklayarak açın. Ardından MainPage.xaml.cs içinde sınıfa OnSelectionChanged olay işleyicisini ekleyin:
```
void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Monkey selectedItem = e.CurrentSelection[0] as Monkey;
}
```
CollectionView içindeki öğelerden biri seçildiğinde SelectionChanged olayı tetiklenir ve OnSelectionChanged yöntemi yürütülür. Yöntemdeki sender bağımsız değişkeni, olayın gerçekleştirilmesinden sorumlu olan CollectionView nesnesidir ve CollectionView nesnesine erişmek için kullanılabilir. OnSelectionChanged yönteminin SelectionChangedEventArgs bağımsız değişkeni seçilen öğeyi sunar.
Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS simülatöründe veya Android öykünücüsünde başlatın:

OnSelectionChanged olay işleyicisinde bir kesme noktası ayarlayın ve CollectionView içinden bir öğe seçin. selectedItem değişkenin değerini inceleyerek seçtiğiniz öğeye ait verileri içerdiğinden emin olun.

Visual Studio'da uygulamayı durdurun.

Öğe seçimi hakkında daha fazla bilgi için bkz Xamarin.Forms . CollectionView seçimi.

MainPage.xaml içinde CollectionView bildirimini değiştirerek SelectionMode özelliğini Single olarak ayarlamasını ve SelectionChanged olayı için bir işleyici ayarlamasını sağlayın:
```
<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged" />
```
Bu kod, CollectionView içinde tek öğe seçimini etkinleştirir ve SelectionChanged olayını OnSelectionChanged adlı bir olay işleyicisi olarak ayarlar. Olay işleyicisi de bir sonraki adımda oluşturulacaktır.
Çözüm Bölmesi'ndeki CollectionViewTutorial projesinde MainPage.xaml bölümünü genişletip MainPage.xaml.cs dosyasına çift tıklayarak açın. Ardından MainPage.xaml.cs içinde sınıfa OnSelectionChanged olay işleyicisini ekleyin:
```
void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Monkey selectedItem = e.CurrentSelection[0] as Monkey;
}
```
CollectionView içindeki öğelerden biri seçildiğinde SelectionChanged olayı tetiklenir ve OnSelectionChanged yöntemi yürütülür. Yöntemdeki sender bağımsız değişkeni, olayın gerçekleştirilmesinden sorumlu olan CollectionView nesnesidir ve CollectionView nesnesine erişmek için kullanılabilir. OnSelectionChanged yönteminin SelectionChangedEventArgs bağımsız değişkeni seçilen öğeyi sunar.
Mac için Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS simülatöründe veya Android öykünücüsünde başlatın:

OnSelectionChanged olay işleyicisinde bir kesme noktası ayarlayın ve CollectionView içinden bir öğe seçin. selectedItem değişkenin değerini inceleyerek seçtiğiniz öğeye ait verileri içerdiğinden emin olun.

Mac için Visual Studio'da uygulamayı durdurun.

Öğe seçimi hakkında daha fazla bilgi için bkz Xamarin.Forms . CollectionView seçimi.

Öğe görünümünü özelleştirme

3 dakika kaldı

Önceki bölümlerde CollectionView öğesinin verileri, veri bağlama yöntemiyle alınıyordu. Ancak koleksiyondaki her bir nesnede tanımlı birden fazla veri öğesinin bulunduğu koleksiyon veri bağlama işlevine rağmen nesne başına yalnızca bir veri öğesi (Monkey nesnesinin Name özelliği) görüntüleniyordu.

Bu alıştırmada CollectionViewTutorial projesini değiştirerek CollectionView öğesinin her satırda birden fazla veri öğesi görüntülemesini sağlayacaksınız.

Visual Studio
Mac için Visual Studio

MainPage.xaml dosyasında CollectionView bildirimini değiştirerek her veri öğesinin görünümünü özelleştirin:

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

Bu kod, CollectionView.ItemTemplate özelliğini CollectionView içindeki her bir öğenin görünümünü tanımlayan bir DataTemplate öğesine ayarlar. DataTemplate alt öğesi, bir Image nesnesi ve iki Label nesnesi içeren bir Grid öğesidir. Image nesnesi Source özelliğini her bir Monkey nesnesinin ImageUrl özelliğine bağlarken Label nesneleri Text özelliklerini her bir Monkey nesnesinin Name ve Location özelliklerine bağlar.

CollectionView öğesinin görünümü hakkında daha fazla bilgi için bkz. Öğe görünümünü tanımlama. Veri şablonları hakkında daha fazla bilgi için bkz Xamarin.Forms . Veri Şablonları.

Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS simülatöründe veya Android öykünücüsünde başlatın:

Visual Studio'da uygulamayı durdurun.

MainPage.xaml dosyasında CollectionView bildirimini değiştirerek her veri öğesinin görünümünü özelleştirin:

<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 için Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS simülatöründe veya Android öykünücüsünde başlatın:

Mac için Visual Studio'da uygulamayı durdurun.

Aracılığıyla paylaş

Xamarin.Forms CollectionView Öğreticisi

CollectionView oluşturma

Verilerle doldurma

Öğe seçimine yanıt verme

Öğe görünümünü özelleştirme

Tebrikler!

Sonraki adımlar

Aracılığıyla paylaş

Xamarin.Forms CollectionView Öğreticisi

CollectionView oluşturma

Verilerle doldurma

Öğe seçimine yanıt verme

Öğe görünümünü özelleştirme

Tebrikler!

Sonraki adımlar

İlgili bağlantılar