Xamarin.Forms CollectionView Tutorial

Artigo
Developer (Iniciante)
13 minutos para concluir

Antes de tentar realizar este tutorial, você deve ter concluído com sucesso:

Crie seu primeiro Xamarin.Forms início rápido de aplicativo .
Tutorial de StackLayout.
Tutorial de Grade.
Tutorial de Rótulo.
Tutorial de Imagem.

Neste tutorial, você aprenderá a:

Crie um Xamarin.FormsCollectionView em XAML.
Popular o CollectionView com os dados.
Responder à seleção de itens de CollectionView.
Personalize a aparência de itens da CollectionView.

Você usará o Visual Studio 2019 ou o Visual Studio para Mac para criar um aplicativo simples que demonstra como personalizar a aparência de um CollectionView. Estas capturas de tela mostram o aplicativo final:

Criar uma collectionview

12 minutos restantes

Visual Studio
Visual Studio para Mac

Para concluir este tutorial, você precisará ter o Visual Studio 2019 (versão mais recente) com a carga de trabalho Desenvolvimento mobile com .NET instalada. Além disso, você precisará de um Mac emparelhado para compilar o aplicativo do tutorial no iOS. Para obter informações sobre como instalar a plataforma Xamarin, confira Instalando o Xamarin. Para obter informações sobre como conectar o Visual Studio 2019 a um host de build Mac, confira Emparelhar com o Mac para desenvolvimento no Xamarin.iOS.

Inicie o Visual Studio e crie um novo aplicativo em branco Xamarin.Forms chamado CollectionViewTutorial.

Importante

Os snippets de C# e XAML neste tutorial exigem que a solução seja denominada CollectionViewTutorial. Usar um nome diferente causará erros de build ao copiar o código deste tutorial para a solução.

Para obter mais informações sobre a biblioteca .NET Standard que é criada, consulte Anatomia de um Xamarin.Forms aplicativo no Aprofundamento do Xamarin.Forms Início Rápido.

No Gerenciador de Soluções, no projeto CollectionViewTutorial, clique duas vezes em MainPage.xaml para abri-lo. Em seguida, em MainPage.xaml, remova todo o código do modelo e substitua-o pelo código a seguir:

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

Esse código define declarativamente a interface do usuário para a página, que é composta por um CollectionView em um StackLayout. A propriedade CollectionView.ItemsSource especifica os itens serem exibidos, que são definidos em uma matriz de cadeias de caracteres.

Na barra de ferramentas do Visual Studio, pressione o botão Iniciar (o botão triangular que se parece com um botão Reproduzir) para iniciar o aplicativo dentro do simulador remoto de iOS ou do Android Emulator escolhido:

Interrompa o aplicativo no Visual Studio.

Para concluir este tutorial, você precisará ter o Visual Studio para Mac (versão mais recente), com suporte para plataforma iOS e Android, instalado. Além disso, você também precisará do Xcode (versão mais recente). Para obter mais informações sobre como instalar a plataforma Xamarin, confira Instalando o Xamarin.

Inicie o Visual Studio para Mac e crie um novo aplicativo em branco Xamarin.Forms chamado CollectionViewTutorial.

Importante

Os snippets de C# e XAML neste tutorial exigem que a solução seja denominada CollectionViewTutorial. Usar um nome diferente causará erros de build ao copiar o código deste tutorial para a solução.

Para obter mais informações sobre a biblioteca .NET Standard que é criada, consulte Anatomia de um Xamarin.Forms aplicativo no Aprofundamento do Xamarin.Forms Início Rápido.

No Painel de Soluções, no projeto CollectionViewTutorial, clique duas vezes em MainPage.xaml para abri-lo. Em seguida, em MainPage.xaml, remova todo o código do modelo e substitua-o pelo código a seguir:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CollectionViewTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <CollectionView>
            <CollectionView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                  <x:String>Baboon</x:String>
                  <x:String>Capuchin Monkey</x:String>
                  <x:String>Blue Monkey</x:String>
                  <x:String>Squirrel Monkey</x:String>
                  <x:String>Golden Lion Tamarin</x:String>
                  <x:String>Howler Monkey</x:String>
                  <x:String>Japanese Macaque</x:String>
                </x:Array>
            </CollectionView.ItemsSource>
        </CollectionView>
    </StackLayout>
</ContentPage>

Na barra de ferramentas do Visual Studio para Mac, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para iniciar o aplicativo dentro do simulador de iOS ou do Android Emulator escolhido:

Interrompa o aplicativo no Visual Studio para Mac.

Popular com os dados

10 minutos restantes

Um CollectionView é populado com os dados usando a propriedade ItemsSource, que é do tipo IEnumerable. A etapa anterior populou o CollectionView no XAML com uma matriz de cadeias de caracteres. No entanto, normalmente um CollectionView será populado com os dados de uma coleção, definida no código, que implementa IEnumerable.

Neste exercício, você modificará o projeto CollectionViewTutorial para popular o CollectionView com os dados de uma coleção de objetos armazenados em um List.

Visual Studio
Visual Studio para Mac

Na Gerenciador de Soluções, no projeto CollectionViewTutorial, adicione uma classe denominada Monkey que contém o seguinte código:
```
public class Monkey
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string ImageUrl { get; set; }

    public override string ToString()
    {
        return Name;
    }        
}
```
Esse código define um objeto Monkey que armazena o nome, a localização e a URL de uma imagem que representa o macaco. Além disso, a classe substitui o método ToString para retornar a propriedade Name.

No Gerenciador de Soluções, no projeto CollectionViewTutorial, expanda MainPage.xaml e clique duas vezes em MainPage.xaml.cs para abri-lo. Então, em MainPage.xaml.cs, remova todo o código de modelo e substitua-o pelo código a seguir:

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

Esse código define uma propriedade Monkeys do tipo IList<Monkey> e a inicializa para uma lista vazia no construtor da classe. Em seguida, objetos Monkey são adicionados à coleção Monkeys e o BindingContext da página é definido como o objeto MainPage. Para obter mais informações sobre a BindingContext propriedade, consulte Associações com um contexto de associação no guia de associação de Xamarin.Forms dados.

Importante

A propriedade BindingContext é herdada por meio da árvore visual. Portanto, porque ela foi configurada no objeto ContentPage, objetos filho do ContentPage herdam seu valor, incluindo o CollectionView.

Em MainPage.xaml, modifique a declaração CollectionView para definir a propriedade ItemsSource como a coleção Monkeys:
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
Esse código associa dados da propriedade ItemsSource à coleção Monkeys. Em runtime, o CollectionView examinará seu BindingContext para a coleção Monkeys e será populado com os dados dessa coleção. Para obter mais informações sobre a associação de dados, consulte Xamarin.Forms Associação de dados.
Na barra de ferramentas do Visual Studio, pressione o botão Iniciar (o botão triangular que se parece com um botão Reproduzir) para iniciar o aplicativo dentro do simulador de SO remoto ou do Android Emulator escolhido:

O CollectionView está exibindo a propriedade Name para cada Monkey na coleção Monkeys. Isso ocorre porque, por padrão, o CollectionView chama o método ToString ao exibir os objetos de uma coleção (que foi substituído na classe Monkey para retornar o valor da propriedade Name).

Interrompa o aplicativo no Visual Studio.

Na Painel de Soluções, no projeto CollectionViewTutorial, adicione uma classe denominada Monkey que contém o seguinte código:
```
public class Monkey
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string ImageUrl { get; set; }

    public override string ToString()
    {
        return Name;
    }
}
```
Esse código define um objeto Monkey que armazena o nome, a localização e a URL de uma imagem que representa o macaco. Além disso, a classe substitui o método ToString para retornar a propriedade Name.

No Painel de Soluções, no projeto CollectionViewTutorial, expanda MainPage.xaml e clique duas vezes em MainPage.xaml.cs para abri-lo. Então, em MainPage.xaml.cs, remova todo o código de modelo e substitua-o pelo código a seguir:

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

Importante

Em MainPage.xaml, modifique a declaração CollectionView para definir a propriedade ItemsSource como a coleção Monkeys:
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
Esse código associa dados da propriedade ItemsSource à coleção Monkeys. Em runtime, o CollectionView examinará seu BindingContext para a coleção Monkeys e será populado com os dados dessa coleção. Para obter mais informações sobre a associação de dados, consulte Xamarin.Forms Associação de dados.
Na barra de ferramentas do Visual Studio para Mac, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para iniciar o aplicativo dentro do simulador de iOS ou do Android Emulator escolhido:

O CollectionView está exibindo a propriedade Name para cada Monkey na coleção Monkeys. Isso ocorre porque, por padrão, o CollectionView chama o método ToString ao exibir os objetos de uma coleção (que foi substituído na classe Monkey para retornar o valor da propriedade Name).

Interrompa o aplicativo no Visual Studio para Mac.

Responder à seleção do item

6 minutos restantes

Visual Studio
Visual Studio para Mac

Em MainPage.xaml, modifique a declaração CollectionView de modo que ela defina a propriedade SelectionMode como Single e defina um manipulador para o evento SelectionChanged:
```
<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged" />
```
Esses conjuntos de código habilitam a seleção de um único item no CollectionView e definem o evento SelectionChanged para um manipulador de eventos chamado OnSelectionChanged. O manipulador de eventos será criado na próxima etapa.
No Gerenciador de Soluções, no projeto CollectionViewTutorial, expanda MainPage.xaml e clique duas vezes em MainPage.xaml.cs para abri-lo. Em seguida, em MainPage.xaml.cs, adicione o manipulador de eventos OnSelectionChanged à classe:
```
void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Monkey selectedItem = e.CurrentSelection[0] as Monkey;
}
```
Quando um item no CollectionView é selecionado, o evento SelectionChanged é acionado, o que executa o método OnSelectionChanged. O argumento sender para o método é o objeto CollectionView responsável por acionar o evento, que pode ser usado para acessar o objeto CollectionView. O argumento SelectionChangedEventArgs para o método OnSelectionChanged fornece o item selecionado.
Na barra de ferramentas do Visual Studio, pressione o botão Iniciar (o botão triangular que se parece com um botão Reproduzir) para iniciar o aplicativo dentro do simulador remoto de iOS ou do Android Emulator escolhido:

Defina um ponto de interrupção no manipulador de eventos OnSelectionChanged e selecione um item no CollectionView. Examine o valor da variável selectedItem para garantir que ela contenha os dados do item selecionado.

Interrompa o aplicativo no Visual Studio.

Para obter mais informações sobre a seleção de itens, consulte Xamarin.Forms Seleção CollectionView.

Em MainPage.xaml, modifique a declaração CollectionView de modo que ela defina a propriedade SelectionMode como Single e defina um manipulador para o evento SelectionChanged:
```
<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged" />
```
Esses conjuntos de código habilitam a seleção de um único item no CollectionView e definem o evento SelectionChanged para um manipulador de eventos chamado OnSelectionChanged. O manipulador de eventos será criado na próxima etapa.
No Painel de Soluções, no projeto CollectionViewTutorial, expanda MainPage.xaml e clique duas vezes em MainPage.xaml.cs para abri-lo. Em seguida, em MainPage.xaml.cs, adicione o manipulador de eventos OnSelectionChanged à classe:
```
void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Monkey selectedItem = e.CurrentSelection[0] as Monkey;
}
```
Quando um item no CollectionView é selecionado, o evento SelectionChanged é acionado, o que executa o método OnSelectionChanged. O argumento sender para o método é o objeto CollectionView responsável por acionar o evento, que pode ser usado para acessar o objeto CollectionView. O argumento SelectionChangedEventArgs para o método OnSelectionChanged fornece o item selecionado.
Na barra de ferramentas do Visual Studio para Mac, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para iniciar o aplicativo dentro do simulador de iOS ou do Android Emulator escolhido:

Defina um ponto de interrupção no manipulador de eventos OnSelectionChanged e selecione um item no CollectionView. Examine o valor da variável selectedItem para garantir que ela contenha os dados do item selecionado.

Interrompa o aplicativo no Visual Studio para Mac.

Para obter mais informações sobre a seleção de itens, consulte Xamarin.Forms Seleção CollectionView.

Personalizar a aparência do item

3 minutos restantes

Anteriormente, o CollectionView era preenchido com os dados usando a associação de dados. No entanto, apesar da associação de dados a uma coleção, em que cada objeto na coleção definiu vários itens de dados, apenas um único item de dados foi exibido por objeto (a propriedade Name do objeto Monkey).

Neste exercício, você modificará o projeto CollectionViewTutorial para que o CollectionView exiba vários itens de dados em cada linha.

Visual Studio
Visual Studio para Mac

Em MainPage.xaml, modifique a declaração CollectionView para personalizar a aparência de cada item de dados:

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

Esse código define a propriedade CollectionView.ItemTemplate como um DataTemplate, que define a aparência de cada item na CollectionView. O filho do DataTemplate é um Grid, que contém um objeto Image e dois objetos Label. Os dados de objeto Image associam sua propriedade Source à propriedade ImageUrl de cada objeto Monkey, enquanto os objetos Label associam suas propriedades Text às propriedades Name e Location de cada objeto Monkey.

Para obter mais informações sobre a aparência do item do CollectionView, confira Definir a aparência do item. Para obter mais informações sobre modelos de dados, consulte Xamarin.Forms Modelos de dados.

Na barra de ferramentas do Visual Studio, pressione o botão Iniciar (o botão triangular que se parece com um botão Reproduzir) para iniciar o aplicativo dentro do simulador remoto de iOS ou do Android Emulator escolhido:

Interrompa o aplicativo no Visual Studio.

Em MainPage.xaml, modifique a declaração CollectionView para personalizar a aparência de cada item de dados:

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

Na barra de ferramentas do Visual Studio para Mac, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para iniciar o aplicativo dentro do simulador de iOS ou do Android Emulator escolhido:

Interrompa o aplicativo no Visual Studio para Mac.

Partilhar via

Xamarin.Forms CollectionView Tutorial

Criar uma collectionview

Popular com os dados

Responder à seleção do item

Personalizar a aparência do item

Parabéns!

Próximas etapas

Partilhar via

Xamarin.Forms CollectionView Tutorial

Criar uma collectionview

Popular com os dados

Responder à seleção do item

Personalizar a aparência do item

Parabéns!

Próximas etapas

Links relacionados