Xamarin Forms: Carga y Diseña datos con el CollectionView

En esta ocasión, repasaremos uno de los controles más versátiles y actuales para mostrar información del framework de Xamarin Forms, nos referimos, al control CollectionView. Este control, está con nosotros desde la versión 4.3 de Xamarin Forms, por lo que es relativamente nuevo. Si estás leyendo este artículo, definitivamente es un muy buen momento para migrar tus ListViews a este control.

Si quieres volverte un experto en el tema, al final del artículo encontrarás un regalo que seguramente te encantará.

¡Adquiere el Máster en Xamarin Forms!

Antes de iniciar, te invito a visitar la página de la Membresía de mi academia, donde podrás encontrar:

Cursos y talleres de Xamarin
Cursos y talleres en C#
Cursos y talleres de Blazor
– Cursos y talleres de ASP.NET
– Cursos y talleres en muchas otras tecnologías

¡Todo al precio más bajo posible por tiempo limitado!

curso de xamarin

Video sobre utilización del control CollectionView en Xamarin Forms

Te comparto el video demostrativo de esta lección, con el cual aprenderás paso a paso cómo utilizar de forma básica el control CollectionView en tus aplicaciones basadas en Xamarin Forms.

¿Qué es CollectionView?

CollectionView, es un control para presentar listas de datos, utilizando diferentes especificaciones de diseño.

Este control que fue lanzado en la versión 4.3 de Xamarin Forms, se podría decir que es la evolución de un control llamado Listview, ya que es más flexible y tiene mejor rendimiento. En la siguiente sección, veremos un overview de las diferencias entre ambos controles.

CollectionView vs ListView

Vamos a ver algunas de las características del Collectionview, que lo hacen diferente a un Listview.

CollectionViewListView
Con un control ListView, únicamente podíamos definir una interfaz en forma de lista vertical, lo que podía limitar los diseños de nuestra aplicación.CollectionView, afortunadamente, tiene un modelo de diseño flexible, lo que nos permite, presentar información tanto horizontal, como verticalmente, en una lista, o bien en forma de grilla.
Con un control ListView, únicamente podremos seleccionar un elemento a la vezCon un CollectionView, podemos especificar el modo de selección: Ninguno, Individual ó múltiple.
Se debe definir dentro del DataTemplate, un elemento ViewCellYa no es necesario definir un elemento ViewCell, sino que podremos asignar al DataTemplate un View directamente

Podemos enumerar más características, pero las anteriores son de las más importantes.

¿Cómo crear un control CollectionView para crear listas en Xamarin Forms?

Crear un control en Xamarin Forms, es tan fácil como escribir en tu archivo XAML, lo siguiente:

<CollectionView/> 

Tal vez te preguntes, ¿Y cómo sé que el control esta ahí? Bueno, si corres la aplicación, y arrastras la interfaz hacia arriba o hacia abajo, verás una franja en la parte superior o inferior.

Xamarin Forms CollectionView

¿Cómo cargar o llenar una lista con el CollectionView?

Llenar de información un CollectionView, es bastante similar a como se hacía en un ListView. Nos basaremos en una propiedad llamada ItemsSource. Esta es una Bindable Property, que también podemos pre rellenar desde que iniciamos la aplicación en el markup XAML, tal como vemos a continuación.

        <CollectionView>
            <CollectionView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Item 1</x:String>
                    <x:String>Item 2</x:String>
                    <x:String>Item 3</x:String>
                    <x:String>Item 4</x:String>
                    <x:String>Item 5</x:String>
                </x:Array>
            </CollectionView.ItemsSource>
        </CollectionView> 

Lo que estamos diciendo aquí, es que deseamos que el orígen de información, sea un arreglo de cadenas. Si ejecutamos la aplicación, obtendremos lo siguiente.

Xamarin Forms CollectionView

¿Cómo cargar un CollectionView desde C#?

Si deseamos hacer lo anterior, pero desde código C#, tendremos que seguir una serie de pasos.

1) Poner un nombre al CollectionView, a través de x:Name.

<CollectionView x:Name="collectionView"/> 

2) Desde el constructor de la página correspondiente al code behind (archivo con terminación .xaml.cs), rellenar la propiedad ItemsSource con la lista de elementos deseada. Por ejemplo.

        public MainPage()
        {
            InitializeComponent();
            collectionView.ItemsSource = new string[]
            {
                "Item 1",
                "Item 2",
                "Item 3",
                "Item 4",
                "Item 5"
            };
        } 

Esto nos dará exactamente el mismo resultado que antes, cuando pre rellenamos los datos desde el archivo XAML.

¿Cómo cargar ó llenar una lista con el CollectionView desde un ViewModel?

Si has trabajado con Xamarin Forms anteriormente, seguramente estés de acuerdo en que trabajar desde el code behind no es lo óptimo, sino desde un ViewModel. Para lograr esta tarea,  debes contar con un elemento tipo IEnumerable, la cual debes enlazar al CollectionView.

Vamos a hacer una demostración sencilla, definiendo primero, el modelo de la entidad de negocios, en nuestro caso, una clase Product.

    public class Product
    {
        public string Name { get; set; }
        public decimal Price { get; set; }
        public string Image { get; set; }
        public bool HasOffer { get; set; }
        public decimal OfferPrice { get; set; }
    } 

Una vez creada nuestra entidad, crearemos un ViewModel, y dentro del mismo, una colección tipo ObservableCollection, la cual enlazaremos a nuestro control CollectionView.

Para que el control CollectionView aparezca con información, podemos precrear información desde el constructor del ViewModel. En una aplicación real, podrías ocupar este paso para consumir un servicio REST y llenar la información del CollectionView.

    public class MainPageViewModel
    {
        public ObservableCollection<Product> Products { get; set; }
        public MainPageViewModel()
        {
            Products = new ObservableCollection<Product>
            {
                new Product
                {
                    ...
                }
                ...
            };
        }
    } 

Una vez creado el ViewModel, podremos enlazar nuestro BindingContext de la página principal, con una nueva instancia del mismo. Esto lo haremos desde el constructor de la página.

    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            BindingContext = new MainPageViewModel();
        }
    } 

El último paso, será enlazar la propiedad ItemsSource a la propiedad deseada, en este caso, la lista de productos, llamada “Products”, lo cual, nos desplegará una lista de elementos en nuestro CollectionView.

<CollectionView x:Name="collectionView" ItemsSource="{Binding Products}"/> 
ItemsSource Xamarin

Con esto, hemos logrado mostrar una lista de elementos desde nuestro ViewModel, sin embargo, no es muy entendible la información que estamos mostrando, por lo que deberemos de crear los elementos visuales correspondientes a cada tipo de dato.

¿Cómo diseñar una lista con el CollectionView en Xamarin Forms?

Para diseñar un CollectionView, debemos especificar la propiedad ItemTemplate, la cual recibe como asignación un DataTemplate. En un ListView, debíamos de especificar un elemento tipo ViewCell como elemento padre dentro del DataTemplate, sin embargo, con el CollectionView, esto ya no es necesario, ya que podremos asignar directamente el contenido deseado dentro del DataTemplate, ya sea un control sencillo, o un Layout como u Grid o un StackPanel.

A continuación, vemos un ejemplo de la definición de un DataTemplate.

        <CollectionView Margin="25" ItemsSource="{Binding Products}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Frame
                        Padding="5"
                        CornerRadius="5"
                        IsClippedToBounds="False">
                        <Grid HeightRequest="100">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width=".3*" />
                                <ColumnDefinition Width=".7*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height=".5*" />
                                <RowDefinition Height=".5*" />
                            </Grid.RowDefinitions>
                            <Image Grid.RowSpan="2" Source="{Binding Image}" />
                            <Label
                                Grid.Column="1"
                                FontAttributes="Bold"
                                FontSize="Large"
                                Text="{Binding Name}"
                                VerticalOptions="Center" />
                            <Label
                                Grid.Row="1"
                                Grid.Column="1"
                                FontSize="Medium"
                                Text="{Binding Price, StringFormat='{0:C}'}" />
                        </Grid>
                    </Frame>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView> 

Esta definición XAML, dará como resultado un layout bastante agradable a la vista.

listas en xamarin forms

1 comentario en “Xamarin Forms: Carga y Diseña datos con el CollectionView”

Deja un comentario

Tu dirección de correo electrónico no será publicada.