Tutorial sobre CollectionView Xamarin.Forms
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.Forms
CollectionViewen XAML. - Rellenar el objeto
CollectionViewcon datos. - Responder a elementos de
CollectionViewque 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
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
CollectionViewen unStackLayout. La propiedadCollectionView.ItemsSourceespecifica 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.
Rellenado de elementos con datos
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.
En el Explorador de soluciones, en el proyecto CollectionViewTutorial, agregue una clase denominada
Monkeyque 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
Monkeyque 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étodoToStringpara devolver la propiedadName.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
Monkeysde tipoIList<Monkey>y la inicializa en una lista vacía en el constructor de clase. Después, se agregan los objetosMonkeya la colecciónMonkeysy el elementoBindingContextde la página se establece en el objetoMainPage. Para obtener más información sobre la propiedadBindingContext, vea Enlaces con un contexto de enlace en la guía de Enlace de datos de Xamarin.Forms.Importante
La propiedad
BindingContextse hereda a través del árbol visual. Por lo tanto, como ya se ha establecido en el objetoContentPage, los objetos secundarios del elementoContentPageheredan su valor, incluido el elementoCollectionView.En MainPage.xaml, modifique la declaración de
CollectionViewpara establecer la propiedadItemsSourcepara la colecciónMonkeys:<CollectionView ItemsSource="{Binding Monkeys}" />Este código enlaza datos de la propiedad
ItemsSourcea la colecciónMonkeys. En tiempo de ejecución, el elementoCollectionViewexaminará suBindingContextpara la colecciónMonkeysy 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
CollectionViewmuestra la propiedadNamede cadaMonkeyde la colecciónMonkeys. Esto es porque, de forma predeterminada, el elementoCollectionViewllama al métodoToStringal mostrar los objetos de una colección (que se ha invalidado en la claseMonkeypara devolver el valor de propiedadName).En Visual Studio, detenga la aplicación.
Respuesta a la selección de elementos
En MainPage.xaml, modifique la declaración
CollectionViewpara que establezca la propiedadSelectionModeenSingle, así como un controlador para el eventoSelectionChanged:<CollectionView ItemsSource="{Binding Monkeys}" SelectionMode="Single" SelectionChanged="OnSelectionChanged" />Este código permite la selección de elementos únicos en
CollectionViewy establece el eventoSelectionChangeden un controlador de eventos denominadoOnSelectionChanged. 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
OnSelectionChangeda 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 eventoSelectionChanged, el cual ejecuta el métodoOnSelectionChanged. El argumentosenderrelativo al método es el objetoCollectionViewresponsable de desencadenar el evento, que se puede usar para acceder al objetoCollectionView. El argumentoSelectionChangedEventArgsrelativo al métodoOnSelectionChangedproporciona 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
OnSelectionChangedy seleccione un elemento enCollectionView. Examine el valor de la variableselectedItempara 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.
Personalización de la apariencia de los elementos
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.
En MainPage.xaml, modifique la declaración
CollectionViewpara 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.ItemTemplateenDataTemplate, que define la apariencia de cada elemento enCollectionView. El elemento secundario deDataTemplateesGrid, que contiene un objetoImagey dos objetosLabel. El objetoImageenlaza los datos de su propiedadSourcecon la propiedadImageUrlde cada objetoMonkey, mientras que los objetosLabelenlazan sus propiedadesTextcon las propiedadesNameyLocationde cada objetoMonkey.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.
¡Enhorabuena!
Ha completado el tutorial, donde ha aprendido a:
- Crear Xamarin.Forms
CollectionViewen XAML. - Rellenar el objeto
CollectionViewcon datos. - Responder a elementos de
CollectionViewque están seleccionados. - Personalizar la apariencia de los elementos
CollectionView.
Pasos siguientes
Para obtener más información sobre los conceptos básicos de creación de aplicaciones móviles con Xamarin.Forms, continúe al tutorial sobre los elementos emergentes.
Vínculos relacionados
¿Tiene algún problema con esta sección? Si es así, envíenos sus comentarios para que podamos mejorarla.