Mostrar clientes en una lista

Mostrar y manipular datos reales en la interfaz de usuario es fundamental para la funcionalidad de muchas aplicaciones. En este artículo, le mostraremos lo que necesita saber para mostrar una colección de objetos Cliente en una lista.

No es un tutorial. Si quiere una, consulte nuestro tutorial de enlace de datos, que le proporcionará una experiencia guiada paso a paso.

Comenzaremos con una explicación rápida del enlace de datos: qué es y cómo funciona. A continuación, agregaremos una listView a la interfaz de usuario, agregaremos enlace de datos y personalizaremos el enlace de datos con características adicionales.

¿Qué necesitas saber?

El enlace de datos es una manera de mostrar los datos de una aplicación en su interfaz de usuario. Esto permite separación de preocupaciones en la aplicación, manteniendo la interfaz de usuario independiente del otro código. Esto crea un modelo conceptual más limpio que es más fácil de leer y mantener.

Cada enlace de datos tiene dos partes:

• El origen que proporciona los datos que se van a enlazar.
• Un destino en la interfaz de usuario donde se muestran los datos.

Para implementar un enlace de datos, deberá agregar código a la fuente de datos que proporcione datos al enlace. También tendrás que agregar una de las dos extensiones de marcado a tu XAML para especificar las propiedades del origen de datos. Esta es la diferencia clave entre los dos:

• x:Bind está fuertemente tipado y genera código en tiempo de compilación para mejorar el rendimiento. x:Bind tiene como valor predeterminado un enlace único, que se optimiza para la visualización rápida de datos de solo lectura que no cambian.
• El de enlace está débilmente tipado y ensamblado en tiempo de ejecución. Esto da como resultado un rendimiento más bajo que con x:Bind. En casi todos los casos, debe usar x:Bind en lugar de Binding. Sin embargo, es probable que lo encuentre en código anterior. La vinculación por defecto utiliza transferencia de datos unidireccional, lo que optimiza para datos de solo lectura que pueden cambiar en la fuente.

Se recomienda usar x:Bind siempre que sea posible y lo mostraremos en los fragmentos de código de este artículo. Para obtener más información sobre las diferencias, consulte la comparación de características entre {x:Bind} y {Binding} .

Creación de un origen de datos

En primer lugar, necesitará una clase para representar los datos del cliente. Para darle un punto de referencia, mostraremos el proceso en este ejemplo sin huesos:

public class Customer
{
    public string Name { get; set; }
}

Crear una lista

Antes de poder mostrar todos los clientes, debe crear la lista para almacenarlos. La Vista de Lista es un control XAML básico ideal para esta tarea. Actualmente, ListView requiere una posición en la página y, en breve, necesitará un valor para su propiedad ItemSource .

<ListView ItemsSource=""
    HorizontalAlignment="Center"
    VerticalAlignment="Center"/>

Una vez que haya enlazado datos a su ListView, le recomendamos que vuelva a la documentación y experimente con la personalización de su apariencia y diseño para adaptarse mejor a sus necesidades.

Vincular datos a tu lista

Ahora que ha creado una interfaz de usuario básica para contener las vinculaciones, debe configurar el origen para proporcionarlas. Este es un ejemplo de cómo se puede hacer esto:

public sealed partial class MainPage : Page
{
    public ObservableCollection<Customer> Customers { get; }
        = new ObservableCollection<Customer>();

    public MainPage()
    {
        this.InitializeComponent();
          // Add some customers
        this.Customers.Add(new Customer() { Name = "NAME1"});
        this.Customers.Add(new Customer() { Name = "NAME2"});
        this.Customers.Add(new Customer() { Name = "NAME3"});
    }
}

<ListView ItemsSource="{x:Bind Customers}"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Customer">
            <TextBlock Text="{x:Bind Name}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

La visión general sobre el enlace de datos le guía a través de un problema similar, en su sección sobre la vinculación a una colección de elementos. En este ejemplo se muestran los siguientes pasos cruciales:

• En el código subyacente de la interfaz de usuario, cree una propiedad de tipo ObservableCollection<T> para almacenar los objetos Customer.
• Enlace el itemSource de de ListView a esa propiedad.
• Proporcione una básica ItemTemplate para ListView, que configurará cómo se muestra cada elemento de la lista.

No dudes en echar un vistazo a los documentos de Vista de lista si quieres personalizar el diseño, agregar la selección de elementos o ajustar el DataTemplate que acabas de crear. ¿Pero qué ocurre si quiere editar sus clientes?

Editar tus clientes a través de la interfaz de usuario

Has mostrado a los clientes en una lista, pero el enlace de datos te permite hacer más. ¿Qué ocurre si pudiera editar los datos directamente desde la interfaz de usuario? Para ello, hablemos primero sobre los tres modos de enlace de datos:

• Una vez: este enlace de datos solo se activa una vez y no reacciona a los cambios.
• One-Way: Este enlace de datos actualizará la interfaz de usuario con los cambios realizados en el origen de datos.
• Bidireccional: este enlace de datos actualizará la interfaz de usuario con los cambios realizados en el origen de datos y también actualizará los datos con los cambios realizados en la interfaz de usuario.

Si ha seguido los fragmentos de código anteriores, el enlace que realizó usa x:Bind y no especifica un modo, lo que lo convierte en un enlace de One-Time. Si desea editar sus clientes directamente desde la interfaz de usuario, deberá cambiarlo a un enlace de Two-Way, de modo que los cambios en los datos se pasen de nuevo a los objetos de cliente. Vinculación de datos en profundidad proporciona más información.

El enlace bidireccional también actualizará la interfaz de usuario si se cambia el origen de datos. Para que esto funcione, debe implementar INotifyPropertyChanged en el origen y asegurarse de que sus establecedores de propiedades generan el evento PropertyChanged. La práctica habitual es hacer que llamen a un método auxiliar como el método OnPropertyChanged , como se muestra a continuación:

public class Customer : INotifyPropertyChanged
{
    private string _name;
    public string Name
    {
        get => _name;
        set
        {
            if (_name != value)
                {
                    _name = value;
                    this.OnPropertyChanged();
                }
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged([CallerMemberName] string propertyName = null) =>
        this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

A continuación, convierta el texto en el control ListView editable mediante un TextBox en lugar de un TextBlocky asegúrese de establecer la modo de en los enlaces de datos en TwoWay.

<ListView ItemsSource="{x:Bind Customers}"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Customer">
            <TextBox Text="{x:Bind Name, Mode=TwoWay}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Una manera rápida de asegurarse de que esto funciona es agregar un segundo ListView con controles TextBox y vinculaciones unidireccionales. Los valores de la segunda lista cambiarán automáticamente a medida que edite el primero.

Nota:

La edición directamente dentro de un ListView es una manera sencilla de mostrar el binding Two-Way en acción, pero puede provocar problemas de usabilidad. Si quieres llevar tu aplicación más lejos, considera usar otros controles XAML para editar los datos, y mantener tu ListView solo como visualización.

Ir más lejos

Ahora que ha creado una lista de clientes con enlace bidireccional, siéntase libre de volver a los documentos a los que hemos vinculado y experimentar. También puede consultar nuestro tutorial de enlace de datos si desea un tutorial paso a paso de enlaces básicos y avanzados, o investigar controles como el patrón de lista y detalles para crear una interfaz de usuario más sólida.

API y documentos útiles

Este es un resumen rápido de las API y otra documentación útil que le ayudará a empezar a trabajar con el enlace de datos.

API útiles

Interfaz de Programación de Aplicaciones (API)	Descripción
Plantilla de datos	Describe la estructura visual de un objeto de datos, lo que permite mostrar elementos específicos en la interfaz de usuario.
x:Bind	Documentación sobre la extensión de marcado x:Bind recomendada.
Enlace	Documentación sobre la extensión de marcado Binding antigua.
ListView	Control de interfaz de usuario que muestra elementos de datos en una pila vertical.
Cuadro de texto	Control de texto básico para mostrar datos de texto editables en la interfaz de usuario.
INotifyPropertyChanged	Interfaz para hacer que los datos sean observables, proporcionándolo a un enlace de datos.
ItemsControl	La propiedad ItemsSource de esta clase permite que un ListView se enlace a un origen de datos.

Documentos útiles

Tema	Descripción
Vinculación de datos en profundidad	Información general básica de los principios de enlace de datos
Información general de la vinculación de datos	Información conceptual detallada sobre el enlace de datos.
vista de lista	Información sobre la creación y configuración de un ListView, incluyendo la implementación de un DataTemplate

Ejemplos de código útiles

Ejemplo de código	Descripción
Tutorial de vinculación de datos de	Una experiencia guiada paso a paso a través de los conceptos básicos del enlace de datos.
ListView y GridView	Explora ListViews más elaborados con vinculación de datos.
QuizGame	Vea la vinculación de datos en acción, incluida la clase BindableBase (en la carpeta "Common") para una implementación estándar de INotifyPropertyChanged.