Xamarin.Forms CollectionView Tutorial

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.

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

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

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

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

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

   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.

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

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

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

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

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

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

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

   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.

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

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

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

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

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

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

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

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

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

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

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

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