EDM: Datenbindung mit dem ListBox-Steuerelement

Im Artikel Das ListBox-Steuerelement: Grundlagen haben wir die Grundlagen zum ListBox-Steuerelement erläutert. Heute gehen wir einen Schritt weiter und zeigen, wie Sie die Daten aus Objekten anzeigen, die beispielsweise aus einer Datenbank-Tabelle gewonnen oder anderweitig in die Objekte gefüllt werden. Dabei zeigen wir auch, wie Sie in der ListBox anspruchsvollere Daten wie etwa mehrspaltige Daten oder auch Bilder anzeigen.

Voraussetzung

In diesem Artikel wollen wir zeigen, wie Sie die Daten aus einer SQLite-Datenbank über das Entity Data Model in einem ListBox-Steuerelement anzeigen und die verschiedenen Möglichkeiten dazu diskutieren. Dazu greifen wir auf das gleiche Entity Data Model zu, welches wir auch in der Beispielanwendung namens Bestellverwaltung nutzen.

ListBox mit Elementen füllen

Wenn Sie nur eine einfache ListBox benötigen, die lediglich etwa die Namen von Kategorien anzeigt, dann durchlaufen Sie per Code eine Liste der Kategorien und fügen die Einträge zur ListBox hinzu. Das Ergebnis soll wie in Bild 1 aussehen (siehe Beispielprojekt, Seite pgeListeEinlesenUndZuweisen.xaml). Die Definition des ListBox-Elements sieht dann einfach wie folgt aus:

Bild 1: Anzeige der Bezeichnungen der Tabelle Produkte

<ListBox x:Name="lstKunden" Grid.Column="1" Margin="10,10,10,10" />

In der Code behind-Datei benötigen wir lediglich die folgenden Codezeilen:

BestellverwaltungEntities dbContext;

public pgeListeEinlesenUndZuweisen() {

     InitializeComponent();

     dbContext = new BestellverwaltungEntities();

     var produkte = from d in dbContext.Produkte select d;

     foreach(var produkt in produkte) {

         lstKunden.Items.Add(produkt.Bezeichnung);

     }

     DataContext = this;

}

Hier lesen wir mit einer LINQ-Abfrage über die Liste der Produkte alle Elemente ein. Diese speichern wir in der Auflistung produkte, deren Elemente wir dann in einer foreach-Schleife durchlaufen. In der foreach-Schleife fügen wir der ListBox dann mit der Add-Methode der Items-Auflistung die Bezeichnung des jeweiligen Produkts zu. Dieses Beispiel hilft uns natürlich nur weiter, wenn wir die Daten lediglich anzeigen und gegebenenfalls genau die angezeigten Werte weiterverwenden wollen. Wenn Sie über diese Einträge den Primärschlüsselwert des jeweiligen Datensatzes ermitteln wollen, ist es der falsche Ansatz. In diesem Fall benötigen Sie weitere Informationen.

ListBox an Liste binden

Im zweiten Beispiel (siehe Seite pgeListeGebunden.xaml) wollen wir das ListBox-Element an eine Liste binden, die wir aus dem Entity Data Model gefüllt haben. Die ListBox definieren wir im ersten Schritt wieder ganz einfach:

<ListBox x:Name="lstProdukte" Grid.Column="1" Margin="10,10,10,10" />

Der Code der Klasse sieht auch übersichtlich aus. Hier definieren wir zunächst den Datenbank-Kontext dbContext. Die Konstruktor-Methode erstellt den Datenbank-Kontext und füllt dann die Variable produkte mit einer Liste der Produkte, die wie wieder per LINQ-Abfrage ermitteln. Dann weisen wir die Liste produkte der Eigenschaft ItemsSource zu und stellen DisplayMemberPath auf das Feld Bezeichnung ein. Somit wird die Bezeichnung des jeweiligen Produkts angezeigt:

public partial class pgeListeGebunden : Page {

     BestellverwaltungEntities dbContext;

     public pgeListeGebunden() {

         InitializeComponent();

         dbContext = new BestellverwaltungEntities();

         var produkte = (from p in dbContext.Produkte select p).ToList();

         lstProdukte.ItemsSource = produkte;

         lstProdukte.DisplayMemberPath = "Bezeichnung";

     }

}

Das Ergebnis sieht genauso aus wie beim vorherigen Beispiel.

Binding im XAML-Code

Nun wollen wir noch ein wenig mehr mit den Bindungs-Eigenschaften der WPF-Steuerelemente arbeiten, sprich: die beiden Eigenschaften ItemsSource und DisplayMemberPath sollen im XAML-Code aufgeführt werden:

<ListBox x:Name="lstProdukte" ... ItemsSource="{Binding Produkte}" DisplayMemberPath="Bezeichnung"/>

Damit diese Eigenschaften auch die gewünschten Elemente in der Code behind-Datei finden, gestalten wir den Code dort etwas anders als beim vorhergehenden Beispiel. Nicht nur, dass wir die Zuweisung der beiden Eigenschaften ItemsSource und DisplayMemberPath dort natürlich entfernen.

Stattdessen fügen wir eine private Variable zum Speichern einer Produkte-Liste namens produkte hinzu. Diese machen wir über die öffentliche Eigenschaft Produkte von außen zugreifbar, also auch für die ItemsSource-Eigenschaft des ListBox-Elements:

public partial class pgeListeGebundenWPF : Page {

     BestellverwaltungEntities dbContext;

     private List<Produkt> produkte;

     public List<Produkt> Produkte {

         get { return produkte; }

         set { produkte = value; }

     }

Die Konstruktor-Methode muss dann natürlich dafür sorgen, dass produkte mit den gewünschte Einträgen gefüllt wird. Das erledigen wir, indem wir zuerst wieder den Datenbank-Kontext initialisieren und dann produkte mit einer Liste von Produkt-Elementen füllen, die wir per LINQ ermitteln:

     public pgeListeGebundenWPF() {

         InitializeComponent();

         dbContext = new BestellverwaltungEntities();

         produkte = new List<Produkt>((from p in dbContext.Produkte select p));

         DataContext = this;

     }

}

Eintrag hinzufügen

Wenn Sie der Liste etwa per Schaltfläche einen Eintrag hinzufügen wollen, sollte dieser natürlich auch direkt in der ListBox erscheinen. Einer neue Schaltfläche namens btnNeuerEintrag fügen wir etwa die folgende Methode für das Ereignis Click hinzu:

private void btnNeuerEintrag_Click(object sender, RoutedEventArgs e) {

     Produkt produkt = new Produkt();

     produkt.Bezeichnung = "Neues Produkt";