Źródła danych ListView

Element A Xamarin.FormsListView służy do wyświetlania list danych. W tym artykule wyjaśniono, jak wypełnić element ListView danymi i jak powiązać dane z wybranym elementem.

ItemsSource

Element jest ListView wypełniany danymi przy użyciu ItemsSource właściwości , która może akceptować dowolną kolekcję implementąc IEnumerable. Najprostszym sposobem wypełnienia obiektu ListView jest użycie tablicy ciągów:

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

Równoważny kod języka C# to:

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

To podejście spowoduje wypełnienie obiektu ListView listą ciągów. Domyślnie ListView wywoła ToString i wyświetli wynik TextCell dla każdego wiersza. Aby dostosować sposób wyświetlania danych, zobacz Wygląd komórki.

Ponieważ ItemsSource została wysłana do tablicy, zawartość nie zostanie zaktualizowana jako podstawowa lista ani zmiany tablicy. Jeśli chcesz, aby widok ListView był automatycznie aktualizowany w miarę dodawania, usuwania i zmieniania elementów na liście bazowej, należy użyć elementu ObservableCollection. ObservableCollection element jest zdefiniowany w System.Collections.ObjectModel pliku i jest taki sam jak List, z tą różnicą, że może powiadomić ListView o wszelkich zmianach:

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

Powiązanie danych

Powiązanie danych to "klej", który wiąże właściwości obiektu interfejsu użytkownika z właściwościami niektórych obiektów CLR, takich jak klasa w modelu widoków. Powiązanie danych jest przydatne, ponieważ upraszcza tworzenie interfejsów użytkownika przez zastąpienie wielu nudnych kodów standardowych.

Powiązanie danych działa przez zachowanie synchronizacji obiektów w miarę zmiany ich powiązanych wartości. Zamiast pisać programy obsługi zdarzeń za każdym razem, gdy zmienia się wartość kontrolki, należy ustanowić powiązanie i włączyć powiązanie w modelu widoków.

Aby uzyskać więcej informacji na temat powiązania danych, zobacz Podstawy powiązań danych, które są częścią czwartej Xamarin.Forms serii artykułów XAML Basics.

Wiązanie komórek

Właściwości komórek (i elementów podrzędnych komórek) mogą być powiązane z właściwościami obiektów w obiekcie ItemsSource. Na przykład ListView element może służyć do prezentowania listy pracowników.

Klasa pracownika:

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

Element ObservableCollection<Employee> jest tworzony, ustawiany jako ListView ItemsSource, a lista jest wypełniana danymi:

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

Ostrzeżenie

Chociaż element zostanie zaktualizowany w odpowiedzi na zmiany w jego bazowym elemencie ListView , ListView element nie zostanie zaktualizowany, jeśli inne ObservableCollection wystąpienie zostanie przypisane do oryginalnego ObservableCollection odwołania (np. employees = otherObservableCollection;).ObservableCollection

Poniższy fragment kodu przedstawia ListView powiązanie z listą pracowników:

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

W tym przykładzie XAML zdefiniowano element ContentPage zawierający element ListView. Źródło danych obiektu ListView jest ustawiane za pośrednictwem atrybutu ItemsSource . Układ każdego wiersza w elemecie ItemsSource jest zdefiniowany w elemecie ListView.ItemTemplate . Spowoduje to wykonanie następujących zrzutów ekranu:

Ostrzeżenie

ObservableCollection nie jest bezpieczny wątkiem. Modyfikowanie elementu ObservableCollection powoduje, że aktualizacje interfejsu użytkownika mają miejsce w tym samym wątku, który wykonał modyfikacje. Jeśli wątek nie jest podstawowym wątkiem interfejsu użytkownika, spowoduje wyjątek.

Powiązanie selectedItem

Często należy powiązać z wybranym elementem elementu ListView, a nie użyć programu obsługi zdarzeń w celu reagowania na zmiany. Aby to zrobić w języku XAML, powiąż SelectedItem właściwość:

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

ZakładająclistView, że 's ItemsSource jest listą ciągów, SomeLabel będzie mieć jej Text właściwość powiązana z .SelectedItem

Linki powiązane