Anzeigen von Kunden in einer Liste

  • Artikel

Das Anzeigen und Bearbeiten von echten Daten in der Benutzeroberfläche ist für die Funktionalität vieler Apps von entscheidender Bedeutung. In diesem Artikel erfahren Sie, wie Sie eine Sammlung von Kundenobjekten in einer Liste anzeigen.

Dieser Artikel ist kein Tutorial. Wenn Sie ein Tutorial suchen, sehen Sie sich unser Datenbindungs-Tutorial an, in dem Sie schrittweise Anleitungen finden.

Wir beginnen mit einer kurzen Erläuterung der Datenbindung. Im Anschluss fügen wir der Benutzeroberfläche eine ListView (Listenansicht) hinzu, fügen eine Datenbindung hinzu und passen die Datenbindung mit weiteren Features an.

Wissenswertes

Das Binden von Daten ist eine Möglichkeit, die Daten einer App in ihrer Benutzeroberfläche anzuzeigen. Dies ermöglicht eine Art Aufgabentrennung in der App, um die Benutzeroberfläche vom anderen Code zu separieren. Dadurch entsteht ein übersichtlicheres konzeptionelles Modell, das leichter zu lesen und besser zu pflegen ist.

Jede Datenbindung besteht aus zwei Teilen:

  • Einer Quelle, die die zu bindenden Daten bereitstellt
  • Einem Ziel in der Benutzeroberfläche, wo die Daten angezeigt werden

Um eine Datenbindung zu implementieren, müssen Sie der Quelle, die die Daten für die Bindung bereitstellt, Code hinzufügen. Sie müssen auch eine der beiden Markuperweiterungen zu Ihrem XAML-Code hinzufügen, um die Eigenschaften der Datenquelle anzugeben. Dies ist der wichtigste Unterschied zwischen beiden Erweiterungen:

  • x:Bind ist stark typisiert und generiert Code zum Zeitpunkt der Kompilierung, um die Leistung zu verbessern. Standardmäßig wird für x:Bind eine einmalige Bindung verwendet, die die schnelle Anzeige von schreibgeschützten, unveränderlichen Daten optimiert.
  • Binding ist schwach typisiert und wird zur Laufzeit assembliert. Dies führt zu einer schlechteren Leistung als bei x:Bind. In fast allen Fällen sollten Sie x:Bind anstelle von Binding verwenden. Allerdings ist Binding wahrscheinlich noch in älterem Code zu finden. Bei Binding wird standardmäßig eine unidirektionale Datenübertragung verwendet, die für schreibgeschützte Daten optimiert ist, die sich in der Quelle ändern können.

Wir empfehlen, immer möglichst x:Bind zu verwenden. Dies wird in diesem Artikel anhand von Codeausschnitten veranschaulicht. Weitere Informationen zu den Unterschieden finden Sie unter Vergleich der Features von {x:Bind} und {Binding}.

Erstellen einer Datenquelle

Zunächst benötigen Sie eine Klasse zur Darstellung Ihrer Kundendaten. Um Ihnen einen Referenzpunkt zu geben, zeigen wir den Prozess anhand dieses einfachen Beispiels:

public class Customer
{
    public string Name { get; set; }
}

Erstelle eine Liste.

Bevor Sie Kunden anzeigen können, müssen Sie eine Liste erstellen, in der sie gespeichert werden. Die Listenansicht ist ein einfaches XAML-Steuerelement, das perfekt für diese Aufgabe geeignet ist. Das ListView-Steuerelement benötigt momentan eine Position auf der Seite und in Kürze auch einen Wert für die ItemSource-Eigenschaft.

<ListView ItemsSource=""
    HorizontalAlignment="Center"
    VerticalAlignment="Center"/>

Nachdem Sie Daten an ListView gebunden haben, empfehlen wir, mithilfe der Dokumentation die Darstellung und das Layout der Liste an Ihre Bedürfnisse anzupassen.

Binden von Daten an die Liste

Nun, da Sie eine grundlegende Oberfläche zum Speichern der Bindungen erstellt haben, müssen Sie Ihre Quelle konfigurieren, um sie bereitzustellen. Hier ein Beispiel zur Vorgehensweise:

public sealed partial class MainPage : Page
{
    public ObservableCollection<Customer> Customers { get; }
        = new ObservableCollection<Customer>();

    public MainPage()
    {
        this.InitializeComponent();
          // Add some customers
        this.Customers.Add(new Customer() { Name = "NAME1"});
        this.Customers.Add(new Customer() { Name = "NAME2"});
        this.Customers.Add(new Customer() { Name = "NAME3"});
    }
}

<ListView ItemsSource="{x:Bind Customers}"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Customer">
            <TextBlock Text="{x:Bind Name}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

In der Übersicht über Datenbindung wird ein ähnliches Problem behandelt (siehe Abschnitt zum Binden an eine Sammlung von Elementen). Unser Beispiel zeigt die folgenden wesentlichen Schritte:

  • Erstellen Sie im CodeBehind der Benutzeroberfläche eine Eigenschaft vom Typ ObservableCollection<T> für die Kundenobjekte.
  • Binden Sie die ItemSource von ListView an diese Eigenschaft.
  • Stellen Sie eine einfache ItemTemplate für ListView bereit. Mit dieser Vorlage wird konfiguriert, wie jedes Element in der Liste angezeigt wird.

Schauen Sie sich gern noch einmal die Dokumente zur Listenansicht an, wenn Sie das Layout anpassen, eine Elementauswahl hinzufügen oder die soeben erstellte DataTemplate verbessern möchten. Aber was geschieht, wenn Sie Ihre Kunden bearbeiten möchten?

Bearbeiten der Kunden über die Benutzeroberfläche

Sie haben Kunden in einer Liste angezeigt, aber die Datenbindung bietet noch mehr Möglichkeiten. Was wäre, wenn Sie Ihre Daten direkt über die Benutzeroberfläche bearbeiten könnten? Zu diesem Zweck müssen wir zunächst über die drei Modi der Datenbindung sprechen:

  • Einmalig: Diese Datenbindung wird nur einmal aktiviert. Sie reagiert nicht auf Änderungen.
  • Unidirektional: Diese Datenbindung aktualisiert die Benutzeroberfläche mit allen Änderungen, die an der Datenquelle vorgenommen werden.
  • Bidirektional: Diese Datenbindung aktualisiert die Benutzeroberfläche mit allen Änderungen, die an der Datenquelle vorgenommen wurden, und aktualisiert die Daten außerdem mit allen Änderungen auf der Benutzeroberfläche.

Wenn Sie die Codeausschnitte von vorher befolgt haben, verwendet Ihre Bindung x:Bind und gibt keinen Modus an; folglich handelt es sich um eine einmalige Bindung. Wenn Sie Kunden direkt über die Benutzeroberfläche bearbeiten möchten, müssen Sie die Bindung in eine bidirektionale Bindung ändern, damit die Änderungen an den Daten zurück an die Kundenobjekte übergeben werden. Weitere Informationen finden Sie unter Datenbindung im Detail.

Die bidirektionale Bindung aktualisiert ebenfalls die Benutzeroberfläche, wenn die Datenquelle geändert wird. Damit dies funktioniert, müssen Sie INotifyPropertyChanged an der Quelle implementieren und sicherstellen, dass durch die Eigenschaftensetter das PropertyChanged-Ereignis ausgelöst wird. Üblicherweise rufen diese eine Hilfsmethode wie OnPropertyChanged auf, wie unten dargestellt:

public class Customer : INotifyPropertyChanged
{
    private string _name;
    public string Name
    {
        get => _name;
        set
        {
            if (_name != value)
                {
                    _name = value;
                    this.OnPropertyChanged();
                }
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged([CallerMemberName] string propertyName = null) =>
        this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

Konfigurieren Sie dann den Text in ListView als bearbeitbar, indem Sie TextBox anstelle von TextBlock verwenden. Stellen Sie sicher, dass Sie Mode für die Datenbindungen auf TwoWay festlegen.

<ListView ItemsSource="{x:Bind Customers}"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Customer">
            <TextBox Text="{x:Bind Name, Mode=TwoWay}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Sie können schnell sicherstellen, dass dies funktioniert, indem Sie eine zweite ListView mit TextBox-Steuerelementen und OneWay-Bindungen hinzufügen. Die Werte in der zweiten Liste werden automatisch geändert, wenn die erste bearbeitet wird.

Hinweis

Das direkte Bearbeiten innerhalb von ListView ist eine einfache Möglichkeit, die bidirektionale Bindung in Aktion zu zeigen. Dies kann jedoch zu Komplikationen bei der Verwendung führen. Wenn Sie Ihre App weiterentwickeln möchten, können Sie weitere XAML-Steuerelemente zum Bearbeiten Ihrer Daten verwenden und ListView schreibgeschützt lassen.

Weiterführende Themen

Nun, da Sie eine Liste von Kunden mit einer bidirektionalen Bindung erstellt haben, können Sie noch einmal die Dokumente durcharbeiten, für die wir Links zur Verfügung gestellt haben, und etwas experimentieren. Sie können auch unser Datenbindungs-Tutorial durcharbeiten, wenn Sie eine schrittweise Anleitung für die grundlegenden und erweiterten Bindungen erhalten oder sich näher mit Steuerelementen wie dem Liste/Details-Muster beschäftigen möchten, um eine stabilere Benutzeroberfläche zu erzielen.

Nützliche APIs und Dokumente

Nachfolgend finden Sie eine kurze Zusammenfassung zu den APIs und weitere nützliche Dokumente, die Sie bei Ihren ersten Schritten rund um die Datenbindung unterstützen.

Nützliche APIs

API BESCHREIBUNG
Datenvorlage Beschreibt die visuelle Struktur eines Datenobjekts, was die Anzeige bestimmter Elemente in der Benutzeroberfläche ermöglicht.
x:Bind Dokumentation zur empfohlenen x:Bind-Markuperweiterung
Binding Dokumentation zur älteren Binding-Markuperweiterung
ListView Ein UI-Steuerelement, das Datenelemente in einem vertikalen Stapel anzeigt
TextBox Ein einfaches Textsteuerelement zum Anzeigen bearbeitbarer Textdaten in der Benutzeroberfläche
INotifyPropertyChanged Schnittstelle, um Daten feststellbar („observable“) zu machen und für eine Datenbindung bereitzustellen
ItemsControl Die ItemsSource-Eigenschaft dieser Klasse ermöglicht das Binden von ListView an eine Datenquelle.

Nützliche Dokumentation

Thema BESCHREIBUNG
Datenbindung im Detail Eine grundlegende Übersicht über die Prinzipien der Datenbindung
Übersicht über Datenbindung Ausführliche konzeptionelle Informationen zur Datenbindung.
Listenansicht Informationen zum Erstellen und Konfigurieren eines ListView-Steuerelements, einschließlich der Implementierung einer DataTemplate

Nützliche Codebeispiele

Codebeispiel Beschreibung
Datenbindungs-Tutorial Eine schrittweise Anleitung durch die Grundlagen der Datenbindung.
ListView und GridView Informationen zu fortgeschritteneren ListView-Steuerelementen mit Datenbindung
QuizGame Hier sehen Sie die Datenbindung in Aktion, einschließlich der BindableBase-Klasse (im Ordner „Common“) für eine Standardimplementierung von INotifyPropertyChanged.