ListView-DatenquellenListView Data Sources

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

Eine Xamarin.Forms ListView wird zum Anzeigen von Listen mit Daten verwendet.A Xamarin.Forms ListView is used for displaying lists of data. In diesem Artikel wird erläutert, wie ein ListView mit Daten aufgefüllt wird und wie Daten an das ausgewählte Element gebunden werden.This article explains how to populate a ListView with data and how to bind data to the selected item.

ItemsSourceItemsSource

Eine ListView wird mithilfe der-Eigenschaft mit Daten aufgefüllt ItemsSource , die jede Auflistung akzeptieren kann, die implementiert IEnumerable .A ListView is populated with data using the ItemsSource property, which can accept any collection implementing IEnumerable. Die einfachste Möglichkeit zum Auffüllen einer ListView umfasst das Verwenden eines Arrays von Zeichen folgen:The simplest way to populate a ListView involves using an array of 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>

Der entsprechende C#-Code lautet:The equivalent C# code is:

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

ListView, das eine Liste von Zeichen folgen anzeigt

Diese Vorgehensweise füllt den ListView mit einer Liste von Zeichen folgen auf.This approach will populate the ListView with a list of strings. Standardmäßig ListView wird von aufgerufen, ToString und das Ergebnis wird in einer TextCell für jede Zeile angezeigt.By default, ListView will call ToString and display the result in a TextCell for each row. Informationen zum Anpassen der Anzeige von Daten finden Sie unter ZellenDarstellung.To customize how data is displayed, see Cell Appearance.

Da ItemsSource an ein Array gesendet wurde, wird der Inhalt nicht aktualisiert, wenn die zugrunde liegende Liste oder das zugrunde liegende Array geändert wird.Because ItemsSource has been sent to an array, the content will not update as the underlying list or array changes. Wenn die ListView automatisch aktualisiert werden soll, wenn Elemente hinzugefügt, entfernt und in der zugrunde liegenden Liste geändert werden, müssen Sie eine verwenden ObservableCollection .If you want the ListView to automatically update as items are added, removed and changed in the underlying list, you'll need to use an ObservableCollection. ObservableCollectionwird in definiert System.Collections.ObjectModel und ähnelt List , mit der Ausnahme, dass Sie über Änderungen benachrichtigt werden kann ListView :ObservableCollection is defined in System.Collections.ObjectModel and is just like List, except that it can notify ListView of any changes:

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

DatenbindungData Binding

Die Datenbindung ist der "Klebstoff", der die Eigenschaften eines Benutzeroberflächen Objekts an die Eigenschaften eines CLR-Objekts bindet, z. b. eine Klasse in "ViewModel".Data binding is the "glue" that binds the properties of a user interface object to the properties of some CLR object, such as a class in your viewmodel. Die Datenbindung ist nützlich, da Sie die Entwicklung von Benutzeroberflächen vereinfacht, indem Sie viele langweilige Code Bausteine ersetzen.Data binding is useful because it simplifies the development of user interfaces by replacing a lot of boring boilerplate code.

Die Datenbindung funktioniert, indem Objekte synchronisiert werden, wenn sich die gebundenen Werte ändern.Data binding works by keeping objects in sync as their bound values change. Anstatt Ereignishandler für jedes Mal schreiben zu müssen, wenn sich der Wert eines Steuer Elements ändert, können Sie die Bindung einrichten und die Bindung in "ViewModel" aktivieren.Instead of having to write event handlers for every time a control's value changes, you establish the binding and enable binding in your viewmodel.

Weitere Informationen zur Datenbindung finden Sie unter Grundlagen der Datenbindung . Dies ist der vierte Teil der Xamarin.Forms Artikel Reihe zu XAML-Grundlagen.For more information on data binding, see Data Binding Basics which is part four of the Xamarin.Forms XAML Basics article series.

Binden von ZellenBinding Cells

Eigenschaften von Zellen (und untergeordnete Elemente von Zellen) können an Eigenschaften von Objekten in der gebunden werden ItemsSource .Properties of cells (and children of cells) can be bound to properties of objects in the ItemsSource. Beispielsweise kann ein ListView verwendet werden, um eine Liste von Mitarbeitern darzustellen.For example, a ListView could be used to present a list of employees.

Die Employee-Klasse:The employee class:

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

Ein ObservableCollection<Employee> wird erstellt, als festgelegt ListView ItemsSource , und die Liste wird mit Daten aufgefüllt:An ObservableCollection<Employee> is created, set as the ListView ItemsSource, and the list is populated with data:

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

Warnung

Während ein als ListView Reaktion auf Änderungen im zugrunde liegenden aktualisiert wird ObservableCollection , ListView wird nicht aktualisiert, wenn ObservableCollection dem ursprünglichen Verweis eine andere Instanz zugewiesen ist ObservableCollection (z. b. employees = otherObservableCollection; ).While a ListView will update in response to changes in its underlying ObservableCollection, a ListView will not update if a different ObservableCollection instance is assigned to the original ObservableCollection reference (e.g. employees = otherObservableCollection;).

Der folgende Code Ausschnitt veranschaulicht eine ListView , die an eine Liste von Mitarbeitern gebunden ist:The following snippet demonstrates a ListView bound to a list of employees:

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

In diesem XAML-Beispiel wird ein definiert ContentPage , das eine enthält ListView .This XAML example defines a ContentPage that contains a ListView. Die Datenquelle der ListView wird über das Attribut ItemsSource festgelegt.The data source of the ListView is set via the ItemsSource attribute. Das Layout der einzelnen Zeilen in der ItemsSource wird im Element ListView.ItemTemplate definiert.The layout of each row in the ItemsSource is defined within the ListView.ItemTemplate element. Dies führt zu den folgenden Screenshots:This results in the following screenshots:

ListView mithilfe der Datenbindung

Warnung

ObservableCollection ist nicht threadsicher.ObservableCollection is not thread safe. Das Ändern einer ObservableCollection bewirkt, dass UI-Aktualisierungen in demselben Thread durchgeführt werden, der die Änderungen durchgeführt hat.Modifying an ObservableCollection causes UI updates to happen on the same thread that performed the modifications. Wenn der Thread nicht der primäre UI-Thread ist, wird eine Ausnahme ausgelöst.If the thread is not the primary UI thread, it will cause an exception.

Binden von SelectedItemBinding SelectedItem

Häufig möchten Sie die Bindung an das ausgewählte Element einer ListView vornehmen, anstatt einen Ereignishandler zu verwenden, um auf Änderungen zu reagieren.Often you'll want to bind to the selected item of a ListView, rather than use an event handler to respond to changes. Binden Sie die-Eigenschaft, um dies in XAML zu erreichen SelectedItem :To do this in XAML, bind the SelectedItem property:

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

Wenn listView es ItemsSource sich um eine Liste von Zeichen folgen handelt, SomeLabel wird Text die-Eigenschaft an die gebunden SelectedItem .Assuming listView's ItemsSource is a list of strings, SomeLabel will have its Text property bound to the SelectedItem.