Orígenes de datos ListView

Un Xamarin.FormsListView Se usa para mostrar listas de datos. En este artículo se explica cómo rellenar un ListView con datos y cómo enlazar datos al elemento seleccionado.

ItemsSource

Se rellena ListView con datos mediante la propiedad ItemsSource, que puede aceptar cualquier colección que implemente IEnumerable. La manera más sencilla de rellenar un ListView implica el uso de una matriz de cadenas:

<ListView>
      <ListView.ItemsSource>
          <x:Array Type="{x:Type x:String}">
            <x:String>mono</x:String>
            <x:String>monodroid</x:String>
            <x:String>monotouch</x:String>
            <x:String>monorail</x:String>
            <x:String>monodevelop</x:String>
            <x:String>monotone</x:String>
            <x:String>monopoly</x:String>
            <x:String>monomodal</x:String>
            <x:String>mononucleosis</x:String>
          </x:Array>
      </ListView.ItemsSource>
</ListView>

El código de C# equivalente es el siguiente:

var listView = new ListView();
listView.ItemsSource = new string[]
{
  "mono",
  "monodroid",
  "monotouch",
  "monorail",
  "monodevelop",
  "monotone",
  "monopoly",
  "monomodal",
  "mononucleosis"
};

Este enfoque rellenará con ListView una lista de cadenas. De manera predeterminada, ListView llamará a ToString y mostrará el resultado en TextCell para cada fila. Para personalizar cómo se muestran los datos, consulte Apariencia de celda.

Dado que ItemsSource se ha enviado a una matriz, el contenido no se actualizará a medida que cambia la lista o matriz subyacentes. Si desea que ListView se actualice automáticamente a medida que se agreguen, quiten y cambien en la lista subyacente, deberá usar ObservableCollection. ObservableCollection se define en System.Collections.ObjectModel y es igual que List, salvo que puede notificar ListView cualquier cambio:

ObservableCollection<Employee> employees = new ObservableCollection<Employee>();
listView.ItemsSource = employees;

//Mr. Mono will be added to the ListView because it uses an ObservableCollection
employees.Add(new Employee(){ DisplayName="Mr. Mono"});

Enlace de datos

El enlace de datos es el "glue" que enlaza las propiedades de un objeto de interfaz de usuario a las propiedades de algún objeto CLR, como una clase en el modelo de vista. El enlace de datos es útil porque simplifica el desarrollo de interfaces de usuario reemplazando un montón de código reutilizable aburrido.

El enlace de datos funciona manteniendo los objetos sincronizados a medida que cambian sus valores enlazados. En lugar de tener que escribir controladores de eventos para cada vez que cambia el valor de un control, establezca el enlace y habilite el enlace en el modelo de vista.

Para obtener más información sobre el enlace de datos, consulte Conceptos básicos de enlace de datos, que es la parte cuatro de la Xamarin.Forms serie de artículos Conceptos básicos de XAML.

Celdas de enlace

Las propiedades de las celdas (y los elementos secundarios de las celdas) se pueden enlazar a las propiedades de los objetos ItemsSource. Por ejemplo, ListView se podría usar para presentar una lista de empleados.

La clase de empleado:

public class Employee
{
    public string DisplayName {get; set;}
}

Un ObservableCollection<Employee> se crea, se establece como ListViewItemsSource, y la lista se rellena con datos:

ObservableCollection<Employee> employees = new ObservableCollection<Employee>();
public ObservableCollection<Employee> Employees { get { return employees; }}

public EmployeeListPage()
{
    EmployeeView.ItemsSource = employees;

    // ObservableCollection allows items to be added after ItemsSource
    // is set and the UI will react to changes
    employees.Add(new Employee{ DisplayName="Rob Finnerty"});
    employees.Add(new Employee{ DisplayName="Bill Wrestler"});
    employees.Add(new Employee{ DisplayName="Dr. Geri-Beth Hooper"});
    employees.Add(new Employee{ DisplayName="Dr. Keith Joyce-Purdy"});
    employees.Add(new Employee{ DisplayName="Sheri Spruce"});
    employees.Add(new Employee{ DisplayName="Burt Indybrick"});
}

Advertencia

Aunque se ListView actualizará en respuesta a los cambios en su subyacente ObservableCollection, a ListView se actualizará si se asigna una instancia diferente ObservableCollection a la referencia original ObservableCollection (por ejemplo, employees = otherObservableCollection;).

En el fragmento de código siguiente se muestra un ListView enlazado a una lista de empleados:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:constants="clr-namespace:XamarinFormsSample;assembly=XamarinFormsXamlSample"
             x:Class="XamarinFormsXamlSample.Views.EmployeeListPage"
             Title="Employee List">
  <ListView x:Name="EmployeeView"
            ItemsSource="{Binding Employees}">
    <ListView.ItemTemplate>
      <DataTemplate>
        <TextCell Text="{Binding DisplayName}" />
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</ContentPage>

En este ejemplo XAML se define un objeto ContentPage que contiene un ListView. El origen de datos del control ListView se establece mediante el atributo ItemsSource. El diseño de cada fila de ItemsSource se define dentro del elemento ListView.ItemTemplate. Esto da como resultado las capturas de pantalla siguientes:

Advertencia

ObservableCollection no es seguro para subprocesos. La modificación de una acción ObservableCollection hace que las actualizaciones de la interfaz de usuario se produzcan en el mismo subproceso que realizó las modificaciones. Si el subproceso no es el subproceso de interfaz de usuario principal, provocará una excepción.

Enlace SelectedItem

A menudo, querrá enlazar al elemento seleccionado de ListView, en lugar de usar un controlador de eventos para responder a los cambios. Para hacerlo en XAML, enlace la propiedad SelectedItem:

<ListView x:Name="listView"
          SelectedItem="{Binding Source={x:Reference SomeLabel},
          Path=Text}">
 …
</ListView>

Suponiendo que listView 's ItemsSource es una lista de cadenas, SomeLabel tendrá su propiedad Text enlazada a SelectedItem.

Vínculos relacionados