Fontes de dados ListView

A Xamarin.FormsListView é usado para exibir listas de dados. Este artigo explica como preencher um ListView com dados e como vincular dados ao item selecionado.

ItemsSource

A ListView é preenchido com dados usando a ItemsSource propriedade, que pode aceitar qualquer implementação de coleção IEnumerable. A maneira mais simples de preencher um ListView envolve o uso de uma matriz de cadeias de caracteres:

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

Este é o código C# equivalente:

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

Essa abordagem preencherá o ListView com uma lista de cadeias de caracteres. Por padrão, ListView chamará ToString e exibirá o resultado em um TextCell para cada linha. Para personalizar como os dados são exibidos, consulte Aparência da célula.

Como ItemsSource foi enviado para uma matriz, o conteúdo não será atualizado à medida que a lista subjacente ou a matriz forem alteradas. Se quiser que o ListView seja atualizado automaticamente à medida que os itens são adicionados, removidos e alterados na lista subjacente, você precisará usar um ObservableCollectionarquivo . ObservableCollection é definido em System.Collections.ObjectModel e é exatamente como List, exceto que ele pode notificar ListView de quaisquer alterações:

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

Associação de dados

A vinculação de dados é a "cola" que vincula as propriedades de um objeto de interface do usuário às propriedades de algum objeto CLR, como uma classe em seu viewmodel. A vinculação de dados é útil porque simplifica o desenvolvimento de interfaces de usuário, substituindo um monte de código clichê chato.

A vinculação de dados funciona mantendo os objetos sincronizados à medida que seus valores vinculados mudam. Em vez de ter que escrever manipuladores de eventos para cada vez que o valor de um controle é alterado, você estabelece a associação e habilita a vinculação em seu viewmodel.

Para obter mais informações sobre vinculação de dados, consulte Noções básicas de vinculação de dados, que é a Xamarin.Forms quarta parte da série de artigos Noções básicas de XAML.

Células de ligação

As propriedades das células (e os filhos das células) podem ser ligadas às propriedades dos objetos no ItemsSource. Por exemplo, um ListView poderia ser usado para apresentar uma lista de funcionários.

A classe de funcionários:

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

Um ObservableCollection<Employee> é criado, definido como o ListViewItemsSource, e a lista é preenchida com dados:

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

Aviso

Enquanto um ListView será atualizado em resposta a alterações em seu subjacente ObservableCollection, um ListView não será atualizado se uma instância diferente ObservableCollection for atribuída à referência original ObservableCollection (por exemplo, employees = otherObservableCollection;).

O trecho a seguir demonstra um ListView vinculado a uma lista de funcionários:

<?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>

Este exemplo XAML define um que contém um ContentPageListViewarquivo . A fonte de dados do ListView é definida por meio do atributo ItemsSource. O layout de cada linha no ItemsSource é definido dentro do elemento ListView.ItemTemplate. Isso resulta nas seguintes capturas de tela:

Aviso

ObservableCollection não é thread safe. A modificação de uma ObservableCollection interface do usuário faz com que as atualizações da interface do usuário aconteçam no mesmo thread que executou as modificações. Se o thread não for o thread primário da interface do usuário, ele causará uma exceção.

Vinculando SelectedItem

Muitas vezes, você desejará vincular ao item selecionado de um ListView, em vez de usar um manipulador de eventos para responder às alterações. Para fazer isso em XAML, vincule a SelectedItem propriedade:

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

Supondo listViewque 's ItemsSource seja uma lista de cadeias de caracteres, SomeLabel terá sua Text propriedade vinculada ao SelectedItem.

Links relacionados