Orígenes de datos de ListViewListView Data Sources

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

Xamarin.Forms ListView Se usa para mostrar listas de datos.A Xamarin.Forms ListView is used for displaying lists of data. En este artículo se explica cómo rellenar ListView con datos y cómo enlazar datos al elemento seleccionado.This article explains how to populate a ListView with data and how to bind data to the selected item.

ItemsSourceItemsSource

ListViewSe rellena con datos mediante la ItemsSource propiedad, que puede aceptar cualquier colección que implemente IEnumerable .A ListView is populated with data using the ItemsSource property, which can accept any collection implementing IEnumerable. La manera más sencilla de rellenar un ListView implica el uso de una matriz de cadenas:The simplest way to populate a ListView involves using an array of strings:

<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:The equivalent C# code is:

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

ListView que muestra la lista de cadenas

Este enfoque rellenará ListView con una lista de cadenas.This approach will populate the ListView with a list of strings. De forma predeterminada, ListView llamará a ToString y mostrará el resultado en una TextCell para cada fila.By default, ListView will call ToString and display the result in a TextCell for each row. Para personalizar el modo en que se muestran los datos, vea apariencia de la celda.To customize how data is displayed, see Cell Appearance.

Dado ItemsSource que se ha enviado a una matriz, el contenido no se actualizará a medida que la lista o la matriz subyacentes cambien.Because ItemsSource has been sent to an array, the content will not update as the underlying list or array changes. Si desea que ListView se actualice automáticamente a medida que se agregan, quitan y cambian elementos en la lista subyacente, deberá utilizar ObservableCollection .If you want the ListView to automatically update as items are added, removed and changed in the underlying list, you'll need to use an ObservableCollection. ObservableCollection se define en System.Collections.ObjectModel y es igual List que, salvo que puede notificar los ListView cambios:ObservableCollection is defined in System.Collections.ObjectModel and is just like List, except that it can notify ListView of any changes:

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

El enlace de datos es el "pegamento" que enlaza las propiedades de un objeto de interfaz de usuario a las propiedades de algún objeto CLR, como una clase en el ViewModel.Data binding is the "glue" that binds the properties of a user interface object to the properties of some CLR object, such as a class in your viewmodel. El enlace de datos es útil porque simplifica el desarrollo de las interfaces de usuario al reemplazar una gran cantidad de código reutilizable de aburrido.Data binding is useful because it simplifies the development of user interfaces by replacing a lot of boring boilerplate code.

El enlace de datos funciona manteniendo los objetos sincronizados a medida que cambian sus valores enlazados.Data binding works by keeping objects in sync as their bound values change. En lugar de tener que escribir controladores de eventos para cada vez que cambie el valor de un control, establezca el enlace y habilite el enlace en el ViewModel.Instead of having to write event handlers for every time a control's value changes, you establish the binding and enable binding in your viewmodel.

Para obtener más información sobre el enlace de datos, vea conceptos básicos del enlace de datos , que es la cuarta parte de la Xamarin.Forms serie de artículos conceptos básicos de XAML.For more information on data binding, see Data Binding Basics which is part four of the Xamarin.Forms XAML Basics article series.

Enlazar celdasBinding Cells

Las propiedades de las celdas (y los elementos secundarios de las celdas) se pueden enlazar a las propiedades de los objetos de ItemsSource .Properties of cells (and children of cells) can be bound to properties of objects in the ItemsSource. Por ejemplo, ListView se podría usar una para presentar una lista de empleados.For example, a ListView could be used to present a list of employees.

La clase Employee:The employee class:

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

ObservableCollection<Employee>Se crea un, se establece como ListView ItemsSource y la lista se rellena con datos:An ObservableCollection<Employee> is created, set as the ListView ItemsSource, and the list is populated with data:

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

Mientras ListView que se va a actualizar en respuesta a los cambios en su subyacente ObservableCollection , ListView no se actualizará si ObservableCollection se asigna una instancia diferente a la ObservableCollection referencia original (por ejemplo, employees = otherObservableCollection; ).While a ListView will update in response to changes in its underlying ObservableCollection, a ListView will not update if a different ObservableCollection instance is assigned to the original ObservableCollection reference (e.g. employees = otherObservableCollection;).

El siguiente fragmento de código muestra un ListView enlazado a una lista de empleados:The following snippet demonstrates a ListView bound to a list of employees:

<?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 de XAML se define un ContentPage que contiene un ListView .This XAML example defines a ContentPage that contains a ListView. El origen de datos del control ListView se establece mediante el atributo ItemsSource.The data source of the ListView is set via the ItemsSource attribute. El diseño de cada fila de ItemsSource se define dentro del elemento ListView.ItemTemplate.The layout of each row in the ItemsSource is defined within the ListView.ItemTemplate element. Esto da como resultado las siguientes capturas de pantallas:This results in the following screenshots:

ListView mediante enlace de datos

Advertencia

ObservableCollection no es un subproceso seguro.ObservableCollection is not thread safe. ObservableCollectionLa modificación de hace que las actualizaciones de la interfaz de usuario se realicen en el mismo subproceso que realizó las modificaciones.Modifying an ObservableCollection causes UI updates to happen on the same thread that performed the modifications. Si el subproceso no es el subproceso de la interfaz de usuario principal, producirá una excepción.If the thread is not the primary UI thread, it will cause an exception.

Enlace SelectedItemBinding SelectedItem

A menudo, querrá enlazar al elemento seleccionado de un ListView , en lugar de usar un controlador de eventos para responder a los cambios.Often you'll want to bind to the selected item of a ListView, rather than use an event handler to respond to changes. Para hacer esto en XAML, enlace la SelectedItem propiedad:To do this in XAML, bind the SelectedItem property:

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

Suponiendo listView que ItemsSource es una lista de cadenas, SomeLabel tendrá su Text propiedad enlazada a SelectedItem .Assuming listView's ItemsSource is a list of strings, SomeLabel will have its Text property bound to the SelectedItem.