Fontes de dados ListView

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

ItemsSource

A ListView é preenchido com dados usando a propriedade, que pode aceitar qualquer coleção que implemente ItemsSource IEnumerable. A maneira mais simples de preencher um ListView envolve o uso de uma matriz de 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>

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 uma TextCell linha para cada. 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 ou matriz subjacente for alterada. Se você quiser que o ListView seja atualizado automaticamente à medida que os itens forem adicionados, removidos e alterados na lista subjacente, você precisará usar um ObservableCollectionarquivo . ObservableCollection é definido em System.Collections.ObjectModel e é exatamente como List, exceto que pode notificar ListView sobre 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 associação de dados é a "cola" que associa 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 muitos códigos clichês chatos.

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

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

Células de ligação

As propriedades das células (e filhos das células) podem ser vinculadas às propriedades dos objetos no ItemsSource. Por exemplo, a ListView pode 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 , ListView ItemsSourcee 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

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

O snippet a seguir demonstra um ListView acoplamento 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 de XAML define um ContentPage arquivo que contém um ListViewarquivo . 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. Modificar um ObservableCollection faz com que as atualizações da interface do usuário ocorram 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á associar ao item selecionado de um ListView, em vez de usar um manipulador de eventos para responder às alterações. Para fazer isso em XAML, associe a SelectedItem propriedade:

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

Supondo que listView's seja uma lista de strings ItemsSource , SomeLabel terá sua Text propriedade vinculada ao SelectedItem.

Links relacionados