ListView Xamarin.Forms

ListView es un componente importante para el diseño de las aplicaciones móviles.

Se utiliza sobre todo en breves listas de opciones de menú o también para largas listas como puedan ser contactos o una selección de favoritos.

Lo mejor de ListView, es que proporciona una manera sencilla para presentar una lista desplazable de filas que puede estar modificada con un estilo ya integrado o personalizarlo a nuestra manera.

Vamos a ver una pequeña práctica de cómo visualizar datos gracias al uso de ListView, en este caso una imagen de un jugador de la NBA con un par de datos más.

¡Comenzamos!

Lo primero que haremos será crearnos nuestro proyecto Mobile App de Xamarin.Forms.

Vamos a seleccionar un proyecto vacío, en blanco, seleccionando las siguientes opciones: Android, iOS y windows, para poder trabajar y verlo en todas las plataformas y por  último marcaremos .NET Standard.

Lo siguiente que haremos será crearnos nuestra carpeta Models, con la clase Jugador y en ella vamos a añadir las propiedades que queramos:

using System;
using System.Collections.Generic;
using System.Text;

namespace ListViewJugadores.Models
{
    public class Jugador
    {
        public String Imagen { get; set; }
        public String Nombre { get; set; }
        public String Equipo { get; set; }
    }
}

Vamos ahora a la vista xaml de MainPage y vamos a llamar a nuestro ListView indicandole un x:Name de referencia, que será jugadores:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListViewJugadores"
             x:Class="ListViewJugadores.MainPage">

    <StackLayout>
        <!-- Place new controls here -->
        <Label Text="ListView Jugadores" 
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
        <ListView x:Name="jugadores">
            
        </ListView>
    </StackLayout>
</ContentPage>

Código

Es el momento de darle funcionalidad, por tanto nos  vamos al código C# de la clase MainPage.cs.

Aquí tendremos una lista como propiedades para añadir los datos y tendremos nuestra colección de jugadores:

 public List<Jugador> Jugadores { get; set; }

Ahora, para enlazar el ListView, lo veremos a continuación… se utiliza la propiedad ItemsSource

using ListViewJugadores.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace ListViewJugadores
{
    public partial class MainPage : ContentPage
    {
        public List<Jugador> Jugadores = new List<Jugador>();

        public MainPage()
        {
            InitializeComponent();
            this.Jugadores = new List<Jugador>();
            Jugador jugador = new Jugador()
            {
                Imagen = "https://img.elcomercio.pe/files/article_content_ec_fotos/uploads/2018/12/30/5c2923ba1e201.jpeg",
                Nombre = "Lebron James KING JAMESSSSS",
                Equipo = "Los Angeles Lakers"
            };


            this.Jugadores.Add(jugador);
            jugador = new Jugador()
            {
                Imagen = "https://i.cdn.turner.com/nba/nba/celtics/photos/larry-bird-dribble300400.jpg",
                Nombre = "Larry Bird",
                Equipo = "Celtics"
            };


            this.Jugadores.Add(jugador);
            jugador = new Jugador()
            {
                Imagen = "https://www.estadiodeportes.mx/wp-content/uploads/2017/04/michael-jordan-basketball-sport-wallpapers-hd-wallpapers-hd-celebrities-sports-photo-michael-jordan-wallpaper.jpg",

                Nombre = "Michael Jordan",
                Equipo = "Chicago Bulls"
            };

            this.Jugadores.Add(jugador);

            jugador = new Jugador()
            {
                Imagen "https://i.dailymail.co.uk/i/pix/2018/01/06/07/47CD00D500000578-5241165-image-a-20_1515222562100.jpg",

                Nombre = "Julius Erving",
                Equipo = "Sixers"
            };

            this.Jugadores.Add(jugador);
            this.jugadores.ItemsSource = this.Jugadores;
        }
    }
}

Nos iremos al diseño (Main.Page)  para personalizar el control, al listview le vamos a indicar el diseño de la plantilla, vamos a decirle cómo queremos que se dibuje cada elemento de la plantilla, para ello usaremos ItemTemplate y añadiremos DataTemplate y ViewCell, que es para indicar cómo queremos que sea la celda para nuestros datos.

Continuamos en la vista xaml es donde pondremos los Layout. Por lo tanto, aplicaremos un StackLayout con las características que queramos.

También pintaremos la imagen y añadimos Source para vincular la imagen que le vamos a decir a cada jugador. Para ello hemos aplicado  la propiedad Binding: se utiliza para vincular dos objetos y a su vez para reflejar los cambios.

El principal beneficio de usar Binding es que ya no tenemos que preocuparnos por sincronizar los datos entre las vistas y la fuente de datos.

Así que terminamos de editar nuestro diseño, asociando con los Binding a los demás datos que queremos que muestren.

Diseño

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListViewJugadores"
             x:Class="ListViewJugadores.MainPage">

    <StackLayout>
        <!-- Place new controls here -->
        <Label Text="ListView Jugadores" 
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
        <ListView x:Name="jugadores">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal">
                            <Image Source="{Binding Imagen}"
                                   WidthRequest="200"
                                   HeightRequest="200"/>
                            <StackLayout>
                                <Label Text="{Binding Nombre}"
                                       FontSize="13" TextColor="DarkOrange"
                                       HorizontalOptions="FillAndExpand"/>

                                <Label Text="{Binding Equipo}"
                                       FontSize="11" TextColor="Green"
                                     HorizontalOptions="FillAndExpand"/>
                            </StackLayout>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Y cómo resultado final… Ejecutamos nuestro emulador.