ListView-Datenquellen

A Xamarin.FormsListView wird zum Anzeigen von Datenlisten verwendet. In diesem Artikel wird erläutert, wie Sie eine ListView Daten auffüllen und wie Daten an das ausgewählte Element gebunden werden.

ItemsSource

A ListView wird mit Daten mit der ItemsSource Eigenschaft aufgefüllt, die jede implementierungsbezogene IEnumerableSammlung akzeptieren kann. Die einfachste Möglichkeit zum Auffüllen einer ListView Zeichenfolge besteht darin, ein Array von Zeichenfolgen zu verwenden:

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

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

Dieser Ansatz füllt die ListView Liste der Zeichenfolgen auf. Ruft standardmäßig ListView ToString das Ergebnis für TextCell jede Zeile auf und zeigt es an. Informationen zum Anpassen der Anzeige von Daten finden Sie unter "Zellendarstellung".

Da ItemsSource an ein Array gesendet wurde, wird der Inhalt nicht aktualisiert, wenn sich die zugrunde liegende Liste oder das Array ändert. Wenn ListView automatisch aktualisiert werden soll, wenn Elemente hinzugefügt, entfernt und in der zugrunde liegenden Liste geändert werden, müssen Sie eine ObservableCollection. ObservableCollection ist in System.Collections.ObjectModel und ist genau so Listdefiniert, mit der Ausnahme, dass sie alle Änderungen benachrichtigen ListView kann:

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

Datenbindung

Die Datenbindung ist der "Glue", der die Eigenschaften eines Benutzeroberflächenobjekts an die Eigenschaften einiger CLR-Objekte bindet, z. B. eine Klasse in Ihrem Ansichtsmodell. Die Datenbindung ist nützlich, da sie die Entwicklung von Benutzeroberflächen vereinfacht, indem viele langweiliger Codebausteine ersetzt werden.

Die Datenbindung funktioniert, indem Objekte synchronisiert bleiben, wenn sich ihre gebundenen Werte ändern. Anstatt Ereignishandler für jedes Mal schreiben zu müssen, wenn sich der Wert eines Steuerelements ändert, legen Sie die Bindung fest und aktivieren die Bindung in Ihrem Viewmodel.

Weitere Informationen zur Datenbindung finden Sie unter "Datenbindungsgrundlagen ", die Teil 4 der Xamarin.Forms XAML Basics-Artikelreihe ist.

Binden von Zellen

Eigenschaften von Zellen (und untergeordneten Zellen) können an Eigenschaften von Objekten in der ItemsSource. So könnte beispielsweise eine ListView Liste der Mitarbeiter angezeigt werden.

Die Mitarbeiterklasse:

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

Eine ObservableCollection<Employee> wird erstellt, als das ListView ItemsSourcefestgelegt, und die Liste wird mit Daten aufgefüllt:

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 eine ListView Aktualisierung als Reaktion auf Änderungen an den zugrunde liegenden ObservableCollectionÄnderungen erfolgt, wird ein ListView Update nicht aktualisiert, wenn eine andere ObservableCollection Instanz dem ursprünglichen ObservableCollection Verweis zugewiesen ist (z. B. employees = otherObservableCollection;).

Der folgende Codeausschnitt veranschaulicht eine ListView Bindung an eine Liste von Mitarbeitern:

<?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 ContentPage Xaml-Beispiel definiert, das ein ListView. Die Datenquelle der ListView wird über das Attribut ItemsSource festgelegt. Das Layout der einzelnen Zeilen in der ItemsSource wird im Element ListView.ItemTemplate definiert. Dies führt zu den folgenden Screenshots:

Warnung

ObservableCollection ist nicht threadsicher. Das Ändern führt ObservableCollection dazu, dass UI-Aktualisierungen im selben Thread ausgeführt werden, der die Änderungen ausgeführt hat. Wenn der Thread nicht der primäre UI-Thread ist, wird eine Ausnahme ausgelöst.

Binding SelectedItem

Häufig möchten Sie eine Bindung an das ausgewählte Element eines Elements ListViewvornehmen, anstatt einen Ereignishandler zu verwenden, um auf Änderungen zu reagieren. Binden Sie dazu in XAML die SelectedItem Eigenschaft:

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

AngenommenlistView, ItemsSource es handelt sich um eine Liste von Zeichenfolgen, SomeLabel die an die SelectedItemEigenschaft gebunden istText.

Verwandte Links