{"id":55000086,"date":"2017-06-01T00:00:00","date_gmt":"2020-03-27T19:26:23","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=86"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"EDM_Datenbindung_mit_dem_ListBoxSteuerelement","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/EDM_Datenbindung_mit_dem_ListBoxSteuerelement\/","title":{"rendered":"EDM: Datenbindung mit dem ListBox-Steuerelement"},"content":{"rendered":"

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.<\/b><\/p>\n

Voraussetzung<\/h2>\n

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 <\/b>nutzen.<\/p>\n

ListBox mit Elementen füllen<\/h2>\n

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<\/b>). Die Definition des ListBox<\/b>-Elements sieht dann einfach wie folgt aus:<\/p>\n

\"Anzeige<\/p>\n

Bild 1: Anzeige der Bezeichnungen der Tabelle Produkte<\/span><\/b><\/p>\n

<ListBox x:Name=\"lstKunden\" Grid.Column=\"1\" Margin=\"10,10,10,10\" \/><\/pre>\n
In der Code behind-Datei benötigen wir lediglich die folgenden Codezeilen:<\/p>\n
BestellverwaltungEntities dbContext;\r\npublic pgeListeEinlesenUndZuweisen() {\r\n     InitializeComponent();\r\n     dbContext = new BestellverwaltungEntities();\r\n     var produkte = from d in dbContext.Produkte select d;\r\n     foreach(var produkt in produkte) {\r\n         lstKunden.Items.Add(produkt.Bezeichnung);\r\n     }\r\n     DataContext = this;\r\n}<\/pre>\n
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<\/b>-Schleife durchlaufen. In der foreach<\/b>-Schleife fügen wir der ListBox dann mit der Add<\/b>-Methode der Items<\/b>-Auflistung die Bezeichnung <\/b>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.<\/p>\n
ListBox an Liste binden<\/h2>\n
Im zweiten Beispiel (siehe Seite pgeListeGebunden.xaml<\/b>) wollen wir das ListBox<\/b>-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:<\/p>\n
<ListBox x:Name=\"lstProdukte\" Grid.Column=\"1\" Margin=\"10,10,10,10\" \/><\/pre>\n
Der Code der Klasse sieht auch übersichtlich aus. Hier definieren wir zunächst den Datenbank-Kontext dbContext<\/b>. Die Konstruktor-Methode erstellt den Datenbank-Kontext und füllt dann die Variable produkte <\/b>mit einer Liste der Produkte, die wie wieder per LINQ-Abfrage ermitteln. Dann weisen wir die Liste produkte <\/b>der Eigenschaft ItemsSource <\/b>zu und stellen DisplayMemberPath <\/b>auf das Feld Bezeichnung <\/b>ein. Somit wird die Bezeichnung des jeweiligen Produkts angezeigt:<\/p>\n
public partial class pgeListeGebunden : Page {\r\n     BestellverwaltungEntities dbContext;\r\n     public pgeListeGebunden() {\r\n         InitializeComponent();\r\n         dbContext = new BestellverwaltungEntities();\r\n         var produkte = (from p in dbContext.Produkte select p).ToList();\r\n         lstProdukte.ItemsSource = produkte;\r\n         lstProdukte.DisplayMemberPath = \"Bezeichnung\";\r\n     }\r\n}<\/pre>\n
Das Ergebnis sieht genauso aus wie beim vorherigen Beispiel.<\/p>\n
Binding im XAML-Code<\/h2>\n
Nun wollen wir noch ein wenig mehr mit den Bindungs-Eigenschaften der WPF-Steuerelemente arbeiten, sprich: die beiden Eigenschaften ItemsSource <\/b>und DisplayMemberPath <\/b>sollen im XAML-Code aufgeführt werden:<\/p>\n
<ListBox x:Name=\"lstProdukte\" ... ItemsSource=\"{Binding Produkte}\" DisplayMemberPath=\"Bezeichnung\"\/><\/pre>\n
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 <\/b>und DisplayMemberPath <\/b>dort natürlich entfernen.<\/p>\n
Stattdessen fügen wir eine private Variable zum Speichern einer Produkte-Liste namens produkte <\/b>hinzu. Diese machen wir über die öffentliche Eigenschaft Produkte <\/b>von außen zugreifbar, also auch für die ItemsSource<\/b>-Eigenschaft des ListBox<\/b>-Elements:<\/p>\n
public partial class pgeListeGebundenWPF : Page {\r\n     BestellverwaltungEntities dbContext;\r\n     private List<Produkt> produkte;\r\n     public List<Produkt> Produkte {\r\n         get { return produkte; }\r\n         set { produkte = value; }\r\n     }<\/pre>\n
Die Konstruktor-Methode muss dann natürlich dafür sorgen, dass produkte<\/b> mit den gewünschte Einträgen gefüllt wird. Das erledigen wir, indem wir zuerst wieder den Datenbank-Kontext initialisieren und dann produkte <\/b>mit einer Liste von Produkt<\/b>-Elementen füllen, die wir per LINQ ermitteln:<\/p>\n
     public pgeListeGebundenWPF() {\r\n         InitializeComponent();\r\n         dbContext = new BestellverwaltungEntities();\r\n         produkte = new List<Produkt>((from p in dbContext.Produkte select p));\r\n         DataContext = this;\r\n     }\r\n}<\/pre>\n
Eintrag hinzufügen<\/h2>\n
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 <\/b>fügen wir etwa die folgende Methode für das Ereignis Click <\/b>hinzu:<\/p>\n
private void btnNeuerEintrag_Click(object sender, RoutedEventArgs e) {\r\n     Produkt produkt = new Produkt();\r\n     produkt.Bezeichnung = \"Neues Produkt\";\r\n     produkte.Add(produkt);\r\n}<\/pre>\n
Bei Anklicken wird so zwar nun ein neuer Eintrag zur Liste produkte <\/b>hinzugefügt, was Sie durch Debuggen und Abfrage der produkte<\/b>-Elemente prüfen können, allerdings erscheint der neue Eintrag nicht automatisch in der Liste. Das liegt daran, dass wir die Elemente in einer Auflistung des Typs List <\/b>gespeichert haben. Sollen die Einträge nun aktualisiert werden, müssten Sie die Liste erneut der ListBox <\/b>zuweisen.<\/p>\n
Aktualisieren der ListBox mit einer ObservableCollection<\/h2>\n
Möchten Sie weiterlesen? Dann lösen Sie Ihr Ticket!<\/span>
\nHier geht es zur Bestellung des Jahresabonnements des Magazins Visual Basic Entwickler<\/strong>:<\/span>
\nZur Bestellung ...<\/a><\/span>
\nDanach greifen Sie sofort auf alle rund 200 Artikel<\/strong> unseres Angebots zu - auch auf diesen hier!<\/span>
\nOder haben Sie bereits Zugangsdaten? Dann loggen Sie sich gleich hier ein:<\/span><\/p>\n<\/div>\n\n\t\n\t
\n\n\t\t\n\t\t