Compartilhar via

Exibir clientes em uma lista

Exibir e manipular dados reais na interface do usuário é crucial para a funcionalidade de muitos aplicativos. Este artigo mostrará o que você precisa saber para exibir uma coleção de objetos do tipo Cliente em uma lista.

Este não é um tutorial. Se você quiser um, consulte nosso tutorial de associação de dados, que fornecerá uma experiência guiada passo a passo.

Começaremos com uma rápida discussão sobre a associação de dados - o que é e como ela funciona. Em seguida, adicionaremos um ListView à interface do usuário, adicionaremos a associação de dados e personalizaremos a associação de dados com recursos adicionais.

O que você precisa saber?

A associação de dados é uma maneira de exibir os dados de um aplicativo em sua interface do usuário. Isso permite separação de preocupações em seu aplicativo, mantendo sua interface do usuário separada do outro código. Isso cria um modelo conceitual mais limpo que é mais fácil de ler e manter.

Cada associação de dados tem duas partes:

  • Uma fonte que fornece os dados a serem vinculados.
  • Um destino na interface do usuário em que os dados são exibidos.

Para implementar uma associação de dados, você precisará adicionar código à fonte que fornece dados à associação. Você também precisará adicionar uma das duas extensões de marcação ao XAML para especificar as propriedades da fonte de dados. Aqui está a principal diferença entre os dois:

  • x:Bind é fortemente tipado e gera código em tempo de compilação para melhor desempenho. x:Bind por padrão utiliza uma associação única, que otimiza a exibição rápida de dados somente leitura que não mudam.
  • associação é fracamente tipada e montada em tempo de execução. Isso resulta em um desempenho pior do que com x:Bind. Em quase todos os casos, você deve usar x:Bind em vez de Binding. No entanto, é provável que você o encontre no código mais antigo. A vinculação é padrão para transferência de dados unidirecional, o que otimiza para dados de leitura que podem mudar na origem.

Recomendamos que você use x:Bind sempre que possível e mostraremos isso nos snippets neste artigo. Para mais informações sobre as diferenças, consulte a comparação de recursos {x:Bind} e {Binding} em .

Criar uma fonte de dados

Primeiro, você precisará de uma classe para representar os dados do Cliente. Para fornecer um ponto de referência, mostraremos o processo neste exemplo simples:

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

Criar uma lista

Antes de exibir os clientes, você precisa criar a lista para mantê-los. A Exibição de Lista é um controle XAML básico que é ideal para essa tarefa. Seu ListView atualmente requer uma posição na página e, em breve, precisará de um valor para sua propriedade ItemSource .

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

Depois de associar dados ao ListView, recomendamos que você retorne à documentação e experimente personalizar sua aparência e layout para atender melhor às suas necessidades.

Associar dados à sua lista

Agora que você criou uma interface do usuário básica para suportar suas associações, você precisa configurar sua fonte para fornecê-las. Aqui está um exemplo de como isso pode ser feito:

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>

A visão geral Associação de Dados orienta você por um problema semelhante, em sua seção sobre associação a uma coleção de itens. Nosso exemplo aqui mostra as seguintes etapas cruciais:

  • No code-behind da interface do usuário, crie uma propriedade do tipo ObservableCollection<T> para armazenar os objetos do Cliente.
  • Associe o ItemSource do ListView a essa propriedade.
  • Forneça um de ItemTemplate básico para o ListView, que configurará como cada item na lista é exibido.

Fique à vontade para consultar a documentação de Exibição de Lista se quiser personalizar o layout, adicionar seleção de itens ou ajustar o DataTemplate que você acabou de criar. Mas e se você quiser editar seus Clientes?

Editar seus Clientes por meio da interface

Você exibiu os clientes em uma lista, mas a vinculação de dados permite que você faça mais. E se você pudesse editar seus dados diretamente da interface do usuário? Para fazer isso, vamos primeiro falar sobre os três modos de associação de dados:

  • One-Time: essa associação de dados só é ativada uma vez e não reage às alterações.
  • unidirecional: essa associação de dados atualizará a interface do usuário com quaisquer alterações feitas na fonte de dados.
  • Bidirecional: essa vinculação de dados atualizará a interface do usuário com quaisquer alterações feitas na fonte de dados e também atualizará os dados com quaisquer alterações feitas na interface do usuário.

Se você seguiu os snippets de código anteriores, a associação feita usa x:Bind e não especifica um modo, tornando-o uma associação One-Time. Se você quiser editar seus Clientes diretamente na interface do usuário, precisará alterá-la para um vínculo Two-Way, para que as alterações nos dados sejam repassadas para os objetos Clientes. Vinculação de dados em profundidade contém mais informações.

A associação bidirecional também atualizará a interface do usuário se a fonte de dados for alterada. Para que isso funcione, você deve implementar INotifyPropertyChanged na fonte e garantir que os setters das suas propriedades acionem o evento PropertyChanged. A prática comum é fazer com que eles chamem um método auxiliar como o método OnPropertyChanged, conforme mostrado abaixo:

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));
}

Em seguida, torne o texto em seu ListView editável usando um TextBox em vez de um TextBlock, e certifique-se de definir o Mode em suas associações de dados para 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>

Uma maneira rápida de garantir que isso funcione é adicionar um segundo ListView com controles TextBox e associações do OneWay. Os valores na segunda lista serão alterados automaticamente conforme você edita o primeiro.

Observação

Editar diretamente em um ListView é uma maneira simples de mostrar a vinculação Two-Way em ação, mas pode levar a complicações de usabilidade. Se você estiver procurando levar seu aplicativo mais longe, considere usar outros controles XAML para editar seus dados e manter seu ListView como somente exibição.

Indo mais longe

Agora que você criou uma lista de clientes com vinculação bidirecional, fique à vontade para voltar pelos documentos que vinculamos para você e experimentar. Você também pode conferir nosso tutorial de associação de dados se quiser um passo a passo passo de associações básicas e avançadas ou investigar controles como o padrão de lista/detalhes para tornar uma interface do usuário mais robusta.

APIs e documentos úteis

Aqui está um resumo rápido de APIs e outra documentação útil para ajudar você a começar a trabalhar com Data Binding.

APIs úteis

API (Interface de Programação de Aplicativos) Descrição
Modelo de dados Descreve a estrutura visual de um objeto de dados, permitindo a exibição de elementos específicos na interface do usuário.
x:Bind Documentação sobre a extensão de marcação x:Bind recomendada.
Vinculação Documentação sobre a extensão de marcação de associação mais antiga.
ListView Um controle de interface que exibe dados em uma pilha vertical.
Caixa de texto Um controle de texto básico para exibir dados de texto editáveis na interface do usuário.
INotifyPropertyChanged A interface para tornar os dados observáveis, fornecendo-os a uma associação de dados.
ItemsControl A propriedade ItemsSource dessa classe permite que um ListView se associe a uma fonte de dados.

Documentos úteis

Tópico Descrição
Vinculação de dados em profundidade Uma visão geral básica dos princípios de associação de dados
Visão geral da Vinculação de Dados Informações conceituais detalhadas sobre associação de dados.
Exibição de Lista Informações sobre como criar e configurar um ListView, incluindo a implementação de um DataTemplate

Exemplos de código úteis

Exemplo de código Descrição
Tutorial de associação de dados Uma experiência guiada passo a passo por meio dos conceitos básicos da associação de dados.
ListView e GridView Explore ListViews mais elaborados com associação de dados.
QuizGame Veja a associação de dados em ação, incluindo a classe BindableBase (na pasta "Common") para uma implementação padrão de INotifyPropertyChanged.