{"id":55000092,"date":"2017-08-01T00:00:00","date_gmt":"2020-03-27T19:27:14","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=92"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"Basics_ObservableCollection","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/Basics_ObservableCollection\/","title":{"rendered":"Basics: ObservableCollection"},"content":{"rendered":"<p><b>Unter WPF gibt es einige Mechanismen, welche die Bindung der Steuerelemente an die zugrunde liegenden Daten in einem gewissen Rahmen automatisieren. Diese werden durch die Programmierung bestimmt &#8211; entweder durch die Verwendung bestimmter Schnittstellen f&uuml;r Eigenschaften oder auch durch entsprechende Auflistungstypen, die dann als Datenquelle etwa f&uuml;r Listen-Elemente verwendet werden. Mit der PropertyChanged-Schnittstelle haben wir schon die Synchronisierung zwischen den Attributen der XAML-Definition und Eigenschaften in den Code-Klassen besprochen (siehe Artikel &#8220;Basics: PropertyChanged&#8221;). In diesem Artikel schauen wir uns nun den Auflistungstyp ObservableCollection an.<\/b><\/p>\n<h2>Beispielanwendung<\/h2>\n<p>Die Beispielanwendung verwendet die auch in den anderen Artikeln genutzte SQLite-Datenbank <b>Bestellverwaltung.db<\/b>. Wir wollen daraus die Tabelle <b>Kunden <\/b>nutzen, um die Unterschiede zwischen einer normalen Liste (<b>List<\/b>) und einer <b>ObservableCollection <\/b>zu demonstrieren.<\/p>\n<p>Die <b>ObservableCollection<\/b>-Klasse ist eine Alternative beispielsweise zur <b>List<\/b>-Klasse. Der wesentliche Unterschied ist, dass die <b>ObservableCollection<\/b>-Klasse externe Objekte, die den Inhalt einer <b>ObservableCollection <\/b>anzeigen, &uuml;ber &Auml;nderungen informiert.<\/p>\n<p>&Auml;nderungen k&ouml;nnen dabei etwa das Hinzuf&uuml;gen oder Entfernen von Elementen sein. Beispiele f&uuml;r Steuer-elemente, die Sie an Objekte auf Basis der Klasse <b>ObservableCollection <\/b>binden k&ouml;nnen, sind etwa das <b>ListBox<\/b>-Element oder das <b>DataGrid<\/b>-Element.<\/p>\n<p>Was aber hei&szlig;t &uuml;berhaupt &#8220;informieren&#8221; in diesem Zusammenhang  Wenn Sie etwa unter Access ein Listenfeld an eine Tabelle gebunden und dann einen Datensatz dieser Tabelle gel&ouml;scht haben, wurde der Datensatz nach dem Aufruf der <b>Requery<\/b>-Methode des Listenfeldes auch aus dem Listenfeld entfernt. In einem Formular in der Datenblattansicht f&uuml;hrte das L&ouml;schen eines Datensatzes direkt zum Entfernen dieses Eintrags aus der Ansicht &#8211; sehr praktisch, aber auch logisch, da hier direkt die Tabelle an das Formular gebunden war. Unter WPF ist das alles etwas anders &#8211; hier binden Sie ja beispielsweise nicht direkt an Tabellen oder Abfragen, sondern an Auflistungen wie das <b>List<\/b>-Objekt, <b>Collection <\/b>oder <b>ObservableCollection<\/b>, die Sie zuvor noch mit den Daten aus der Datenbank f&uuml;llen. Wenn Sie nun &Auml;nderungen an einem <b>List<\/b>&#8211; oder <b>Collection<\/b>-Objekt durchf&uuml;hren, wie es etwa geschieht, wenn Sie etwa einen neuen Eintrag hinzuf&uuml;gen oder einen Eintrag l&ouml;schen, dann wirken sich die &Auml;nderungen zwar auf die Eintr&auml;ge des <b>List<\/b>&#8211; oder <b>Collection<\/b>-Objekts aus, aber sie schlagen sich nicht in der Benutzeroberfl&auml;che nieder.<\/p>\n<p>Und hier tritt das <b>ObservableCollection<\/b>-Objekt auf den Plan: Wenn Sie diesem einen neuen Eintrag hinzuf&uuml;gen oder einen Eintrag entfernen, l&ouml;st dies ein Ereignis aus, das automatisch von bestimmten Elementen der Benutzeroberfl&auml;che wie etwa dem <b>ListBox<\/b>&#8211; oder dem <b>DataGrid<\/b>-Element implementiert wird und daf&uuml;r sorgt, dass die Ansicht aktualisiert wird. Um uns dies einmal an einem Beispiel anzusehen, haben wir das Fenster aus Bild 1 erstellt.<\/p>\n<p class=\"image\"><img decoding=\"async\" src=\"..\/fileadmin\/_temp_\/2017_04\/pic_92_001.png\" alt=\"Beispiel f&uuml;r an ein List- und ein ObservableCollection-Objekt gebundene DataGrid-Steuerelemente\" width=\"599,593\" height=\"402,4664\"\/><\/p>\n<p><b><span style=\"color:darkgrey;\">Bild 1: Beispiel f&uuml;r an ein List- und ein ObservableCollection-Objekt gebundene DataGrid-Steuerelemente<\/span><\/b><\/p>\n<p>Die Definition dieser Steuer-elemente finden Sie in Listing 1. Das erste DataGrid namens <b>dgList <\/b>ist an das Objekt <b>KundenList <\/b>der Code behind-Klasse gebunden, das zweite DataGrid namens <b>dgObservableCollection <\/b>an das Objekt <b>KundenObservableCollection<\/b>. Zu jedem <b>DataGrid<\/b>-Steuerelement haben wir jeweils eine Hinzuf&uuml;gen- und eine Entfernen-Schaltfl&auml;che hinzugef&uuml;gt, mit denen Sie per Code jeweils einen neuen Datensatz anlegen beziehungsweise den aktuell markierten Datensatz aus dem zugrunde liegenden Auflistungsobjekt entfernen. Wir werden dann sp&auml;ter erkennen, wo die Unterschiede zwischen dem <b>List<\/b>&#8211; und dem <b>ObservableCollection<\/b>-Objekt liegen.<\/p>\n<pre>&lt;Window x:Class=\"ObservableCollection.MainWindow\" ...  Title=\"MainWindow\" Height=\"350\" Width=\"525\"&gt;\r\n     &lt;Grid&gt;\r\n         &lt;Grid.ColumnDefinitions&gt;\r\n             &lt;ColumnDefinition&gt;&lt;\/ColumnDefinition&gt;\r\n             &lt;ColumnDefinition&gt;&lt;\/ColumnDefinition&gt;\r\n         &lt;\/Grid.ColumnDefinitions&gt;\r\n         &lt;Grid.RowDefinitions&gt;\r\n             &lt;RowDefinition Height=\"*\"&gt;&lt;\/RowDefinition&gt;\r\n             &lt;RowDefinition Height=\"Auto\"&gt;&lt;\/RowDefinition&gt;\r\n         &lt;\/Grid.RowDefinitions&gt;\r\n         &lt;DataGrid x:Name=\"dgList\" Grid.Column=\"0\" Margin=\"5\" ItemsSource=\"{Binding KundenList}\"&gt;&lt;\/DataGrid&gt;\r\n         &lt;DataGrid x:Name=\"dgObservableCollection\" Margin=\"5\" Grid.Column=\"1\" \r\n             ItemsSource=\"{Binding KundenObservableCollection}\"&gt;&lt;\/DataGrid&gt;\r\n         &lt;StackPanel Grid.Row=\"1\" Grid.Column=\"0\" Orientation=\"Horizontal\"&gt;\r\n             &lt;Button x:Name=\"btnListAdd\" Margin=\"5\" Click=\"btnListAdd_Click\"&gt;Add&lt;\/Button&gt;\r\n             &lt;Button x:Name=\"btnListDelete\" Margin=\"5\" Click=\"btnListDelete_Click\"&gt;Delete&lt;\/Button&gt;\r\n         &lt;\/StackPanel&gt;\r\n         &lt;StackPanel Grid.Row=\"1\" Grid.Column=\"1\" Orientation=\"Horizontal\"&gt;\r\n             &lt;Button x:Name=\"btnObservableCollectionAdd\" Margin=\"5\" Click=\"btnObservableCollectionAdd_Click\"&gt;Add&lt;\/Button&gt;\r\n             &lt;Button x:Name=\"btnObservableCollectionDelete\" Margin=\"5\" \r\n                 Click=\"btnObservableCollectionDelete_Click\"&gt;Delete&lt;\/Button&gt;\r\n         &lt;\/StackPanel&gt;\r\n     &lt;\/Grid&gt;\r\n&lt;\/Window&gt;<\/pre>\n<p><b><span style=\"color:darkgrey;\">Listing 1: Definition der beiden DataGrid-Elemente und der Schaltfl&auml;chen zum Hinzuf&uuml;gen und L&ouml;schen der Elemente<\/span><\/b><\/p>\n<h2>DataGrid-Elemente f&uuml;llen<\/h2>\n<p>Damit die beiden <b>DataGrid<\/b>-Elemente gef&uuml;llt werden, haben wir der Code behind-Klasse etwas Code hinzugef&uuml;gt. Im allgemeinen Teil haben wir dazu zun&auml;chst eine Objektvariable f&uuml;r den Datenbankkontext deklariert:<\/p>\n<pre>BestellverwaltungEntities dbContext;<\/pre>\n<p>Dann ben&ouml;tigen wir ein <b>List<\/b>-Objekt namens <b>kundenList<\/b>, das Elemente des Typs <b>Kunde <\/b>aufnehmen soll und &uuml;ber die &ouml;ffentliche Eigenschaft <b>KundenList <\/b>per <b>get <\/b>und <b>set <\/b>verf&uuml;gbar gemacht wird:<\/p>\n<pre>private List&lt;Kunde&gt; kundenList;\r\npublic List&lt;Kunde&gt; KundenList {\r\n     get {\r\n         return kundenList;\r\n     }\r\n     set {\r\n         kundenList = value;\r\n     }\r\n}<\/pre>\n<p>Das Gleiche haben wir f&uuml;r ein Auflistungs-Element des Typs <b>ObservableCollection <\/b>durchgef&uuml;hrt. Dieses hei&szlig;t allerdings <b>kundenObservableCollection <\/b>und wird wie folgt definiert:<\/p>\n<pre>private ObservableCollection&lt;Kunde&gt; kundenObservableCollection;\r\npublic ObservableCollection&lt;Kunde&gt; KundenObservableCollection {\r\n     get {\r\n         return kundenObservableCollection;\r\n     }\r\n     set {\r\n         kundenObservableCollection = value;\r\n     }\r\n}<\/pre>\n<p>Damit Sie das <b>ObservableCollection<\/b>-Objekt &uuml;berhaupt nutzen k&ouml;nnen, m&uuml;ssen Sie dieses zun&auml;chst &uuml;ber den passenden Namespace in der Klasse bekannt machen. Dies erledigen Sie mit der folgenden Zeile, die Sie zu den bestehenden <b>using<\/b>-Anweisungen hinzuf&uuml;gen:<\/p>\n<pre>using System.Collections.ObjectModel;<\/pre>\n<div class=\"rcp_restricted\"><p><span style=\"color: #ff0000;\">M&ouml;chten Sie weiterlesen? Dann l&ouml;sen Sie Ihr Ticket!<\/span><br \/>\n<span style=\"color: #ff0000;\">Hier geht es zur Bestellung des Jahresabonnements des Magazins <strong>Visual Basic Entwickler<\/strong>:<\/span><br \/>\n<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/shop.minhorst.com\/magazine\/363\/visual-basic-entwickler-jahresabonnement?c=77\">Zur Bestellung ...<\/a><\/span><br \/>\n<span style=\"color: #ff0000;\">Danach greifen Sie sofort auf <strong>alle rund 200 Artikel<\/strong> unseres Angebots zu - auch auf diesen hier!<\/span><br \/>\n<span style=\"color: #000000;\">Oder haben Sie bereits Zugangsdaten? Dann loggen Sie sich gleich hier ein:<\/span><\/p>\n<\/div>\n\n\t\n\t<form id=\"rcp_login_form\"  class=\"rcp_form\" method=\"POST\" action=\"https:\/\/vbentwickler.de\/data\/wp\/v2\/posts\/55000092\/\">\n\n\t\t\n\t\t<fieldset class=\"rcp_login_data\">\n\t\t\t<p>\n\t\t\t\t<label for=\"rcp_user_login\">Username or Email<\/label>\n\t\t\t\t<input name=\"rcp_user_login\" id=\"rcp_user_login\" class=\"required\" type=\"text\"\/>\n\t\t\t<\/p>\n\t\t\t<p>\n\t\t\t\t<label for=\"rcp_user_pass\">Password<\/label>\n\t\t\t\t<input name=\"rcp_user_pass\" id=\"rcp_user_pass\" class=\"required\" type=\"password\"\/>\n\t\t\t<\/p>\n\t\t\t\t\t\t<p>\n\t\t\t\t<input type=\"checkbox\" name=\"rcp_user_remember\" id=\"rcp_user_remember\" value=\"1\"\/>\n\t\t\t\t<label for=\"rcp_user_remember\">Remember me<\/label>\n\t\t\t<\/p>\n\t\t\t<p class=\"rcp_lost_password\"><a href=\"\/data\/wp\/v2\/posts\/55000092?rcp_action=lostpassword\"><\/a><\/p>\n\t\t\t<p>\n\t\t\t\t<input type=\"hidden\" name=\"rcp_action\" value=\"login\"\/>\n\t\t\t\t<input type=\"hidden\" name=\"rcp_redirect\" value=\"https:\/\/vbentwickler.de\/data\/wp\/v2\/posts\/55000092\/\"\/>\n\t\t\t\t<input type=\"hidden\" name=\"rcp_login_nonce\" value=\"123b777de9\"\/>\n\t\t\t\t<input id=\"rcp_login_submit\" class=\"rcp-button\" type=\"submit\" value=\"Login\"\/>\n\t\t\t<\/p>\n\t\t\t\t\t<\/fieldset>\n\n\t\t\n\t<\/form>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Unter WPF gibt es einige Mechanismen, welche die Bindung der Steuerelemente an die zugrunde liegenden Daten in einem gewissen Rahmen automatisieren. Diese werden durch die Programmierung bestimmt &#8211; entweder durch die Verwendung bestimmter Schnittstellen f&uuml;r Eigenschaften oder auch durch entsprechende Auflistungstypen, die dann als Datenquelle etwa f&uuml;r Listen-Elemente verwendet werden. Mit der PropertyChanged-Schnittstelle haben wir schon die Synchronisierung zwischen den Attributen der XAML-Definition und Eigenschaften in den Code-Klassen besprochen (siehe Artikel &#8220;Basics: PropertyChanged&#8221;). In diesem Artikel schauen wir uns nun den Auflistungstyp ObservableCollection an.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[662017,66042017,44000001,44000027],"tags":[],"yst_prominent_words":[],"class_list":["post-55000092","post","type-post","status-publish","format-standard","hentry","category-662017","category-66042017","category-CGrundlagen","category-Excel_programmieren"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/posts\/55000092","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/comments?post=55000092"}],"version-history":[{"count":0,"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/posts\/55000092\/revisions"}],"wp:attachment":[{"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/media?parent=55000092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/categories?post=55000092"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/tags?post=55000092"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/yst_prominent_words?post=55000092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}