Tutorial sobre CollectionView Xamarin.Forms

Artículo
Developer (Principiante)
Tiempo para finalizar: 13 minutos

Antes de intentar este tutorial, debe haber completado correctamente lo siguiente:

Inicio rápido Compilación de la primera aplicación de Xamarin.Forms.
Tutorial sobre el diseño de pila (StackLayout).
Tutorial sobre la cuadrícula (Grid).
Tutorial sobre las etiquetas (Label).
Tutorial sobre las imágenes (Image).

En este tutorial aprenderá a:

Crear Xamarin.FormsCollectionView en XAML.
Rellenar el objeto CollectionView con datos.
Responder a elementos de CollectionView que están seleccionados.
Personalizar la apariencia de los elementos CollectionView.

Va a usar Visual Studio 2019, o bien Visual Studio para Mac, para crear una aplicación sencilla que demuestre cómo personalizar el aspecto de un elemento CollectionView. En las capturas de pantalla siguientes se muestra la aplicación final:

Creación de un elemento CollectionView

12 minutos restantes

Visual Studio
Visual Studio para Mac

Para completar este tutorial debe tener Visual Studio 2019 (versión más reciente), con la carga de trabajo Desarrollo para dispositivos móviles con .NET instalada. Además, necesita un equipo Mac emparejado para compilar la aplicación del tutorial en iOS. Para obtener información sobre la instalación de la plataforma de Xamarin, consulte Instalación de Xamarin. Para obtener información sobre cómo conectar Visual Studio 2019 a un host de compilación de Mac, consulte Emparejar con Mac para el desarrollo de Xamarin.iOS.

Inicie Visual Studio y cree una aplicación de Xamarin.Forms en blanco llamada CollectionViewTutorial.

Importante

Los fragmentos de código de C# y XAML de este tutorial requieren que la solución se llame CollectionViewTutorial. El uso de otro nombre dará como resultado errores de compilación al copiar el código de este tutorial en la solución.

Para obtener más información sobre la biblioteca de .NET Standard creada, vea Anatomía de una aplicación de Xamarin.Forms en Análisis detallado de inicio rápido de Xamarin.Forms.

En el Explorador de soluciones, en el proyecto CollectionViewTutorial, haga doble clic en MainPage.xaml para abrirlo. Después, en MainPage.xaml, quite todo el código de plantilla y sustitúyalo por el código siguiente:

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

Este código define mediante declaración la interfaz de usuario de la página, que consiste en un objeto CollectionView en un StackLayout. La propiedad CollectionView.ItemsSource especifica los elementos para mostrar, que se definen en una matriz de cadenas.

En la barra de herramientas de Visual Studio, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador remoto de iOS elegido:

En Visual Studio, detenga la aplicación.

Para completar este tutorial debe tener instalado Visual Studio para Mac (versión más reciente) con compatibilidad con la plataforma de iOS y Android. Además, también necesitará Xcode (versión más reciente). Para obtener más información sobre la instalación de la plataforma de Xamarin, consulte Instalación de Xamarin.

Inicie Visual Studio para Mac y cree una aplicación de Xamarin.Forms en blanco llamada CollectionViewTutorial.

Importante

Los fragmentos de código de C# y XAML de este tutorial requieren que la solución se llame CollectionViewTutorial. El uso de otro nombre dará como resultado errores de compilación al copiar el código de este tutorial en la solución.

Para obtener más información sobre la biblioteca de .NET Standard creada, vea Anatomía de una aplicación de Xamarin.Forms en Análisis detallado de inicio rápido de Xamarin.Forms.

En el Panel de solución, en el proyecto CollectionViewTutorial, haga doble clic en MainPage.xaml para abrirlo. Después, en MainPage.xaml, quite todo el código de plantilla y sustitúyalo por el código siguiente:

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

En la barra de herramientas de Visual Studio para Mac, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador de iOS elegido:

En Visual Studio para Mac, detenga la aplicación.

Rellenado de elementos con datos

10 minutos restantes

Un elemento CollectionView se rellena con datos mediante la propiedad ItemsSource, que es de tipo IEnumerable. El paso anterior rellenó CollectionView en XAML con una matriz de cadenas. Sin embargo, CollectionView normalmente se rellena con datos de una colección, definida en código, que implementa IEnumerable.

En este ejercicio, modificará el proyecto CollectionViewTutorial para rellenar CollectionView con datos de una colección de objetos almacenados en un elemento List.

Visual Studio
Visual Studio para Mac

En el Explorador de soluciones, en el proyecto CollectionViewTutorial, agregue una clase denominada Monkey que contenga el siguiente 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;
    }        
}
```
Este código define un objeto Monkey que almacena un nombre, una ubicación y una dirección URL de una imagen que representa el objeto monkey. Además, la clase invalida el método ToString para devolver la propiedad Name.

En el Explorador de soluciones, en el proyecto CollectionViewTutorial, expanda MainPage.xaml y haga doble clic en MainPage.xaml.cs para abrirlo. Después, en MainPage.xaml.cs, quite todo el código de plantilla y sustitúyalo por el código siguiente:

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

Este código define una propiedad Monkeys de tipo IList<Monkey> y la inicializa en una lista vacía en el constructor de clase. Después, se agregan los objetos Monkey a la colección Monkeys y el elemento BindingContext de la página se establece en el objeto MainPage. Para obtener más información sobre la propiedad BindingContext, vea Enlaces con un contexto de enlace en la guía de Enlace de datos de Xamarin.Forms.

Importante

La propiedad BindingContext se hereda a través del árbol visual. Por lo tanto, como ya se ha establecido en el objeto ContentPage, los objetos secundarios del elemento ContentPage heredan su valor, incluido el elemento CollectionView.

En MainPage.xaml, modifique la declaración de CollectionView para establecer la propiedad ItemsSource para la colección Monkeys:
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
Este código enlaza datos de la propiedad ItemsSource a la colección Monkeys. En tiempo de ejecución, el elemento CollectionView examinará su BindingContext para la colección Monkeys y se rellenará con datos de esta colección. Para obtener más información sobre el enlace de datos, consulte Enlace de datos de Xamarin.Forms.
En la barra de herramientas de Visual Studio, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador remoto de iOS elegido:

El elemento CollectionView muestra la propiedad Name de cada Monkey de la colección Monkeys. Esto es porque, de forma predeterminada, el elemento CollectionView llama al método ToString al mostrar los objetos de una colección (que se ha invalidado en la clase Monkey para devolver el valor de propiedad Name).

En Visual Studio, detenga la aplicación.

En el Panel de solución, en el proyecto CollectionViewTutorial, agregue una clase denominada Monkey que contenga el siguiente 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;
    }
}
```
Este código define un objeto Monkey que almacena un nombre, una ubicación y una dirección URL de una imagen que representa el objeto monkey. Además, la clase invalida el método ToString para devolver la propiedad Name.

En el Panel de solución, en el proyecto CollectionViewTutorial, expanda MainPage.xaml y haga doble clic en MainPage.xaml.cs para abrirlo. Después, en MainPage.xaml.cs, quite todo el código de plantilla y sustitúyalo por el código siguiente:

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

En MainPage.xaml, modifique la declaración de CollectionView para establecer la propiedad ItemsSource para la colección Monkeys:
```
<CollectionView ItemsSource="{Binding Monkeys}" />
```
Este código enlaza datos de la propiedad ItemsSource a la colección Monkeys. En tiempo de ejecución, el elemento CollectionView examinará su BindingContext para la colección Monkeys y se rellenará con datos de esta colección. Para obtener más información sobre el enlace de datos, consulte Enlace de datos de Xamarin.Forms.
En la barra de herramientas de Visual Studio para Mac, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador de iOS elegido:

El elemento CollectionView muestra la propiedad Name de cada Monkey de la colección Monkeys. Esto es porque, de forma predeterminada, el elemento CollectionView llama al método ToString al mostrar los objetos de una colección (que se ha invalidado en la clase Monkey para devolver el valor de propiedad Name).

En Visual Studio para Mac, detenga la aplicación.

Respuesta a la selección de elementos

6 minutos restantes

Visual Studio
Visual Studio para Mac

En MainPage.xaml, modifique la declaración CollectionView para que establezca la propiedad SelectionMode en Single, así como un controlador para el evento SelectionChanged:
```
<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged" />
```
Este código permite la selección de elementos únicos en CollectionView y establece el evento SelectionChanged en un controlador de eventos denominado OnSelectionChanged. El controlador de eventos se creará en el paso siguiente.
En el Explorador de soluciones, en el proyecto CollectionViewTutorial, expanda MainPage.xaml y haga doble clic en MainPage.xaml.cs para abrirlo. Después, en MainPage.xaml.cs, agregue el controlador de eventos OnSelectionChanged a la clase:
```
void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Monkey selectedItem = e.CurrentSelection[0] as Monkey;
}
```
Si se selecciona un elemento en CollectionView, se desencadena el evento SelectionChanged, el cual ejecuta el método OnSelectionChanged. El argumento sender relativo al método es el objeto CollectionView responsable de desencadenar el evento, que se puede usar para acceder al objeto CollectionView. El argumento SelectionChangedEventArgs relativo al método OnSelectionChanged proporciona el elemento seleccionado.
En la barra de herramientas de Visual Studio, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador remoto de iOS elegido:

Establezca un punto de interrupción en el controlador de eventos OnSelectionChanged y seleccione un elemento en CollectionView. Examine el valor de la variable selectedItem para asegurarse de que contenga los datos del elemento seleccionado.

En Visual Studio, detenga la aplicación.

Para obtener más información sobre la selección de elementos, consulte Selección de CollectionView de Xamarin.Forms.

En MainPage.xaml, modifique la declaración CollectionView para que establezca la propiedad SelectionMode en Single, así como un controlador para el evento SelectionChanged:
```
<CollectionView ItemsSource="{Binding Monkeys}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged" />
```
Este código permite la selección de elementos únicos en CollectionView y establece el evento SelectionChanged en un controlador de eventos denominado OnSelectionChanged. El controlador de eventos se creará en el paso siguiente.
En el Panel de solución, en el proyecto CollectionViewTutorial, expanda MainPage.xaml y haga doble clic en MainPage.xaml.cs para abrirlo. Después, en MainPage.xaml.cs, agregue el controlador de eventos OnSelectionChanged a la clase:
```
void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Monkey selectedItem = e.CurrentSelection[0] as Monkey;
}
```
Si se selecciona un elemento en CollectionView, se desencadena el evento SelectionChanged, el cual ejecuta el método OnSelectionChanged. El argumento sender relativo al método es el objeto CollectionView responsable de desencadenar el evento, que se puede usar para acceder al objeto CollectionView. El argumento SelectionChangedEventArgs relativo al método OnSelectionChanged proporciona el elemento seleccionado.
En la barra de herramientas de Visual Studio para Mac, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador de iOS elegido:

Establezca un punto de interrupción en el controlador de eventos OnSelectionChanged y seleccione un elemento en CollectionView. Examine el valor de la variable selectedItem para asegurarse de que contenga los datos del elemento seleccionado.

En Visual Studio para Mac, detenga la aplicación.

Para obtener más información sobre la selección de elementos, consulte Selección de CollectionView de Xamarin.Forms.

Personalización de la apariencia de los elementos

3 minutos restantes

Anteriormente, CollectionView se ha rellenado con datos mediante el enlace de datos. Aun así, pese al enlace de datos con una colección, donde cada objeto de la colección ha definido varios elementos de datos, solo se ha mostrado un elemento de datos por objeto (la propiedad Name del objeto Monkey).

En este ejercicio, modificará el proyecto CollectionViewTutorial de forma que CollectionView muestre varios elementos de datos en cada fila.

Visual Studio
Visual Studio para Mac

En MainPage.xaml, modifique la declaración CollectionView para personalizar la apariencia de cada elemento de datos:

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

Este código establece la propiedad CollectionView.ItemTemplate en DataTemplate, que define la apariencia de cada elemento en CollectionView. El elemento secundario de DataTemplate es Grid, que contiene un objeto Image y dos objetos Label. El objeto Image enlaza los datos de su propiedad Source con la propiedad ImageUrl de cada objeto Monkey, mientras que los objetos Label enlazan sus propiedades Text con las propiedades Name y Location de cada objeto Monkey.

Para obtener más información sobre la apariencia del elemento CollectionView, consulte Definir la apariencia del elemento. Para obtener más información sobre las plantillas de datos, consulte Plantillas de datos de Xamarin.Forms.

En la barra de herramientas de Visual Studio, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador remoto de iOS elegido:

En Visual Studio, detenga la aplicación.

En MainPage.xaml, modifique la declaración CollectionView para personalizar la apariencia de cada elemento de datos:

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

En la barra de herramientas de Visual Studio para Mac, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador de iOS elegido:

En Visual Studio para Mac, detenga la aplicación.

Compartir a través de

Tutorial sobre CollectionView Xamarin.Forms

Creación de un elemento CollectionView

Rellenado de elementos con datos

Respuesta a la selección de elementos

Personalización de la apariencia de los elementos

¡Enhorabuena!

Pasos siguientes

Compartir a través de

Tutorial sobre CollectionView Xamarin.Forms

Creación de un elemento CollectionView

Rellenado de elementos con datos

Respuesta a la selección de elementos

Personalización de la apariencia de los elementos

¡Enhorabuena!

Pasos siguientes

Vínculos relacionados