![\"Hinzufügen](\"..\/fileadmin\/_temp_\/2016_05\/pic_56_001.png\")
<\/p>\nWie Sie ein DataGrid-Steuerelement mit den Daten aus einem Entity Data Model füttern, haben Sie bereits im Artikel “Einführung in das Entity Framework” erfahren. Allerdings möchten Sie gelegentlich auch in den Datensätzen einer Tabelle blättern, die enthaltenen Daten ändern oder neue Datensätze hinzufügen – ganz, wie es unter Access in einem einfachen Detailformular möglich war. Dieser Artikel zeigt, wie Sie dies mit den eingebauten Funktionen von Visual Studio einfach bewerkstelligen können.<\/b><\/p>\n
Das Ziel dieses Artikels ist es also, ein neues Fenster zu erstellen, das über das Entity Data Model an eine Tabelle gebunden ist – in diesem Fall an die Tabelle Kunden <\/b>unserer Beispieldatenbank namens Bestellverwaltung <\/b>– und das die Daten jeweils eines Datensatzes in entsprechenden Steuerelementen anzeigt. Außerdem wollen wir dem Fenster einige Schaltflächen hinzufügen, mit denen der Benutzer zum ersten, vorherigen, nächsten und letzten und zu einem neuen Datensatz springen kann. Schließlich soll der Benutzer auch Änderungen durchführen und diese speichern können.<\/p>\n
Wir verwenden dabei ein neues Projekt des Typs Visual C#|WPF-Anwendung<\/b>. Anschließend erstellen Sie nach bewährter Art ein Entity Data Model mit den Daten der zu verwendenden Datenbank.<\/p>\n
Fügen Sie also ein neues Element des Typs ADO.NET Entity Data Model <\/b>zum Projekt hinzu und nennen Sie es BestellverwaltungModel<\/b>. Im folgenden Dialog behalten Sie den Eintrag EF Designer aus Datenbank <\/b>bei. Im nächsten Dialog klicken Sie auf Neue Verbindung <\/b>und wählen dort Microsoft SQL Server <\/b>aus.<\/p>\n
Im Dialog Verbindungseigenschaften geben Sie (localdb)\\MSSQLLocalDB <\/b>als Servername und Bestellverwaltung<\/b> unter Mit Datenbank verbinden <\/b>ein (siehe Bild 1). Wir gehen an dieser Stelle davon aus, dass Sie die Bestellverwaltung-Datenbank bereits an den SQL Server oder LocalDB angehängt haben (dies erledigen Sie am einfachsten über den SQL Server Management Studio).<\/p>\n
<\/p>\n
Bild 1: Hinzufügen der Verbindung<\/span><\/b><\/p>\n Kehren Sie zum vorherigen Dialog zurück und klicken Sie auf Weiter<\/b>. Die Verbindungseinstellungen wollen wir unter dem Namen BestellverwaltungEntities <\/b>speichern. Behalten Sie im folgenden Schritt den Wert Entity Framework 6.x <\/b>bei.<\/p>\n Unter Wählen Sie Ihre Datenbankobjekte und Einstellungen <\/b>klicken Sie einfach den Eintrag Tabellen <\/b>an. Damit fügen Sie alle Tabellen zum Entity Data Model hinzu. Unter Modelnamespace: <\/b>können Sie den Wert BestellverwaltungModel <\/b>beibehalten.<\/p>\n Danach erstellt Visual Studio das Entity Data Model und zeigt dieses in einem Diagramm an. Ändern Sie hier noch die Namen der Klassen vom Plural in den Singular, also etwa von Kategorien <\/b>in Kategorie<\/b>.<\/p>\n Nun erstellen Sie das Projekt erstmalig mit dem Menüeintrag Erstellen| Nun schauen wir uns den einfachsten Weg an, um die Felder einer Klasse des Entity Data Models zu einem Fenster hinzuzufügen – und zwar zum Fenster MainWindow.xaml<\/b>. Dies wollen wir dazu einfach aus einer entsprechenden Liste in das Fenster ziehen – ähnlich, wie es bei der Feldliste beim Formularentwurf unter Access geschieht.<\/p>\n Um dies zu erledigen, müssen wir zunächst auf Basis des Entity Data Models eine Datenquelle erstellen. Dazu aktivieren Sie, sofern noch nicht geschehen, den Bereich Datenquellen<\/b>, und zwar über den Menübefehl Ansicht|Weitere Fenster|Datenquellen<\/b>. Der Dialog erwartet Sie dann wie in Bild 2.<\/p>\n Bild 2: Noch keine Datenquellen vorhanden<\/span><\/b><\/p>\n Hier benötigen wir nun eine Datenquelle. Dazu klicken Sie auf den Link Neue Datenquelle hinzufügen… <\/b>und öffnen so den Assistenten zum Konfigurieren von Datenquellen. Dieser bietet vier mögliche Quellen für die Daten an, von denen wir den Eintrag Objekt <\/b>auswählen (siehe Bild 3).<\/p>\n Bild 3: Die Daten sollen aus einem Objekt bezogen werden.<\/span><\/b><\/p>\n Im folgenden Schritt werden dann die Objekte des Projekts angezeigt. Unter dem Projektnamen finden Sie einen weiteren Eintrag gleichen Namens, der dann schließlich die Klassen des Projekts anbietet, unter anderem eben auch die Klassen des Entity Data Models, also Kunde<\/b>, Artikel<\/b>, Bestellung <\/b>et cetera. Hier wählen Sie nun wie in Bild 4 den Eintrag Kunde <\/b>aus.<\/p>\n Bild 4: Auswählen des Quellobjekts, hier namens Kunde<\/span><\/b><\/p>\n Nach einem Klick auf die Schaltfläche Fertigstellen <\/b>erscheinen die Felder der Klasse Kunde <\/b>im Datenquellen<\/b>-Dialog (siehe Bild 5).<\/p>\n Bild 5: Nun steht eine Datenquelle zur Verfügung.<\/span><\/b><\/p>\n Damit haben wir uns außerdem einen neuen Eintrag im neuen Ordner DataSources <\/b>im Bereich Properties <\/b>des Projektmappen-Explorers geholt – und zwar namens Kunde.datasource <\/b>(siehe Bild 6).<\/p>\n Bild 6: Die Datenquelle im Projektmappen-Explorer<\/span><\/b><\/p>\n Wenn Sie nun die Entwurfsansicht des Fensters MainWindow.xaml <\/b>aktivieren, ändert sich die Ansicht im Bereich Datenquellen <\/b>ein wenig (siehe Bild 7). Sie können nun per Mausklick auf die einzelnen Einträge jeweils ein Kombinationsfeld aktivieren, über das sich Feineinstellungen für das Hinzufügen der einzelnen Felder zum Fenster vornehmen lassen.<\/p>\n Bild 7: Geänderte Ansicht bei gleichzeitiger Anzeige einer .xaml-Datei<\/span><\/b><\/p>\n Die für unseren Fall wichtigste Feineinstellung, wenn wir in einem Rutsch alle Felder in das Fenster MainWindows.xaml <\/b>ziehen wollen, ist die Auswahl der zu erstellenden Steuerelemente (siehe Bild 8). Mit DataGrid <\/b>erstellen Sie ein DataGrid mit allen gewünschten Feldern. ComboBox <\/b>erstellt ein Kombinationsfeld, was in diesem Szenario jedoch Nacharbeiten erfordert. Liste <\/b>erstellt ein Listenfeld mit den Daten der Datenquelle. Und Detail <\/b>erstellt schließlich die gewünschte Ansicht – daher wählen wir diesen Eintrag aus, was dazu führt, dass links neben dem Eintrag Kunde <\/b>ein entsprechendes Icon erscheint. Nun ziehen Sie einfach den kompletten Kunde<\/b>-Knoten in den Entwurf des Fensters MainWindow.xaml<\/b>. Das Ergebnis sieht wie in Bild 9 aus. <\/p>\n Bild 8: Detailfenster per Drag and Drop<\/span><\/b><\/p>\n Bild 9: Festlegen der Ansicht<\/span><\/b><\/p>\n Wenn wir nun das Projekt starten, erhalten wir zwar das Fenster mit den Feldern in der noch unsortieren Anordnung und ohne Kombinationsfelder etwa für das Feld AnredeID<\/b>, aber es zeigt keine Daten an (siehe Bild 10). Was nun<\/p>\n Bild 10: Detailfenster noch ohne Daten<\/span><\/b><\/p>\n Schauen wir uns zunächst an, was wir durch das Hinzufügen der Steuerelemente per Drag and Drop überhaupt für Änderungen durchgeführt haben – beziehungsweise welche Änderungen automatisch erledigt wurden. Dass für jedes Feld der Datenquelle jeweils ein Steuerelement zum Fenster hinzugefügt wurde, haben Sie ja bereits gesehen. Dementsprechend hat auch eine Menge Code Einzug in das .xaml<\/b>-Dokument MainWindow.xaml <\/b>genommen. <\/p>\n Im oberen Teil wurde ein Eigenschaftselement namens Windows.Resources <\/b>mit folgendem Inhalt eingefügt:<\/p>\n Das CollectionViewSource<\/b>-Element ist eine Verbindung zwischen der Benutzeroberfläche und den Daten. Es erhält automatisch über das Attribut key <\/b>einen Schlüssel namens kundeViewSource<\/b>, damit man es später in den Elementen der Benutzeroberfläche referenzieren kann. Der hintere Teil enthält Informationen über das Aussehen der gebundenen Steuerelemente zur Entwurfszeit. Wenn Sie den Teil d:DesignSource=”{d:DesignInstance {x:Type local:Kunde}, CreateList=True}” <\/b>entfernen, werden Sie den Unterschied erkennen.<\/p>\n Schauen wir weiter nach unten, sehen wir ein Grid<\/b>-Element, dessen wichtigste Eigenschaft in diesem Zusammenhang das Attribut DataContext <\/b>ist.<\/p>\n Dieses enthält den Wert {StaticResource kundeViewSource} <\/b>und legt somit fest, dass es die Daten aus der weiter oben festgelegten statischen Ressource beziehen soll (siehe Listing 1). Dies ist die Voraussetzung dafür, dass wir für die im Grid<\/b>-Element enthaltenen Steuerelemente Bindungen festlegen können, über die sie dann auf die Daten der CollectionViewSource <\/b>zugreifen können. Dies gilt für alle Elemente, die dem Grid<\/b>-Element untergeordnet sind.<\/p>\n Möchten Sie weiterlesen? Dann lösen Sie Ihr Ticket!<\/span>Felder zum Fenster hinzufügen<\/h2>\n
![\"Noch](\"..\/fileadmin\/_temp_\/2016_05\/pic_56_002.png\")
<\/p>\n![\"Die](\"..\/fileadmin\/_temp_\/2016_05\/pic_56_003.png\")
<\/p>\n![\"Auswählen](\"..\/fileadmin\/_temp_\/2016_05\/pic_56_004.png\")
<\/p>\n![\"Nun](\"..\/fileadmin\/_temp_\/2016_05\/pic_56_005.png\")
<\/p>\n![\"Die](\"..\/fileadmin\/_temp_\/2016_05\/pic_56_006.png\")
<\/p>\nFelder per Drag and Drop<\/h2>\n
![\"Geänderte](\"..\/fileadmin\/_temp_\/2016_05\/pic_56_007.png\")
<\/p>\n![\"Detailfenster](\"..\/fileadmin\/_temp_\/2016_05\/pic_56_009.png\")
<\/p>\n![\"Festlegen](\"..\/fileadmin\/_temp_\/2016_05\/pic_56_008.png\")
<\/p>\n![\"Detailfenster](\"..\/fileadmin\/_temp_\/2016_05\/pic_56_010.png\")
<\/p>\n<Window.Resources>\r\n <CollectionViewSource x:Key=\"kundeViewSource\" d:DesignSource=\"{d:DesignInstance {x:Type local:Kunde}, CreateList=True}\"\/>\r\n<\/Window.Resources><\/pre>\n<Grid x:Name=\"grid1\" DataContext=\"{StaticResource kundeViewSource}\" HorizontalAlignment=\"Left\" Margin=\"204,55,0,0\" \r\n VerticalAlignment=\"Top\">\r\n <Grid.ColumnDefinitions>\r\n <ColumnDefinition Width=\"Auto\"\/>\r\n <ColumnDefinition Width=\"Auto\"\/>\r\n <\/Grid.ColumnDefinitions>\r\n <Grid.RowDefinitions>\r\n <RowDefinition Height=\"Auto\"\/>\r\n ...\r\n <\/Grid.RowDefinitions>\r\n <Label Content=\"Anrede ID:\" Grid.Column=\"0\" HorizontalAlignment=\"Left\" Margin=\"3\" Grid.Row=\"0\" \r\n VerticalAlignment=\"Center\"\/>\r\n <TextBox x:Name=\"anredeIDTextBox\" Grid.Column=\"1\" HorizontalAlignment=\"Left\" Height=\"23\" Margin=\"3\" Grid.Row=\"0\" \r\n Text=\"{Binding AnredeID, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}\" \r\n VerticalAlignment=\"Center\" Width=\"120\"\/>\r\n <Label Content=\"EMail:\" ... \/>\r\n <TextBox x:Name=\"eMailTextBox\" ...\r\n Text=\"{Binding EMail, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}\" ... \/>\r\n <Label Content=\"Firma:\" ... \/>\r\n <TextBox x:Name=\"firmaTextBox\" \r\n Text=\"{Binding Firma, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}\" ... \/>\r\n <Label Content=\"Geburtsdatum:\" ... \/>\r\n <DatePicker x:Name=\"geburtsdatumDatePicker\" ...\r\n SelectedDate=\"{Binding Geburtsdatum, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}\" ... \/>\r\n <Label Content=\"ID:\" Grid.Column=\"0\" HorizontalAlignment=\"Left\" Margin=\"3\" Grid.Row=\"4\" VerticalAlignment=\"Center\"\/>\r\n <TextBox x:Name=\"iDTextBox\" ...\r\n Text=\"{Binding ID, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}\" ... \/>\r\n <Label Content=\"Nachname:\" ... \/>\r\n <TextBox x:Name=\"nachnameTextBox\" ... \r\n Text=\"{Binding Nachname, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}\" ... \/>\r\n <Label Content=\"Ort:\" ... \/>\r\n <TextBox x:Name=\"ortTextBox\" ... \r\n Text=\"{Binding Ort, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}\" ... \/>\r\n <Label Content=\"PLZ:\" ... \/>\r\n <TextBox x:Name=\"pLZTextBox\" ... \r\n Text=\"{Binding PLZ, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}\" ... \/>\r\n <Label Content=\"Strasse:\" ... \/>\r\n <TextBox x:Name=\"strasseTextBox\" ...\r\n Text=\"{Binding Strasse, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}\" ... \/>\r\n <Label Content=\"Telefon:\" ... \/>\r\n <TextBox x:Name=\"telefonTextBox\" ... \r\n Grid.Row=\"9\" Text=\"{Binding Telefon, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}\" ... \/>\r\n <Label Content=\"Vorname:\" ... \/>\r\n <TextBox x:Name=\"vornameTextBox\" ...\r\n Text=\"{Binding Vorname, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}\" \/>\r\n<\/Grid><\/pre>\n
\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