Optimalerweise speichern wir die Bilder auch noch in einem Verzeichnis, dass sich auf der gleichen Ebene oder unterhalb der Anwendung befindet. Auf diese Weise brauchen wir nur den relativen Pfad zur Bilddatei in der Datenbank zu speichern.<\/p>\n
Tabelle Produkte erweitern<\/h2>\n
Damit wir die Bilder, die wir im Dateisystem speichern, mit den Datensätzen der Tabelle Produkte <\/b>verknüpfen können, fügen wir dieser Tabelle ein Feld namens Bild hinzu. Es soll ein einfaches Textfeld sein, dass den Pfad zur Bilddatei speichert, und zwar relativ zur Datenbank in einem eigenen Ordner namens Bilder<\/b>.<\/p>\n
Diese Änderung nehmen wir der Einfachheit halber über das Tool SQLiteStudio <\/b>vor. Dort öffnen Sie die Datenbank Bestellverwaltung <\/b>und klicken dann doppelt auf die Tabelle Produkte<\/b>. Nun betätigen Sie die Schaltfläche Add column (Ins) <\/b>wie in Bild 1.<\/p>\n
![\"Anlegen](\"..\/fileadmin\/_temp_\/2017_03\/pic_87_001.png\")
<\/p>\n
Bild 1: Anlegen eines neuen Feldes<\/span><\/b><\/p>\n Dies öffnet den Dialog aus Bild 2. Hier tragen Sie den Namen des neuen Feldes sowie den Datentyp ein. Anschließend schließen Sie den Dialog mit der OK<\/b>-Schaltfläche.<\/p>\n Bild 2: Anlegen des Feldes Bild<\/span><\/b><\/p>\n Erst der Klick auf die Schaltfläche Commit structure changes <\/b>öffnet den Dialog Auszuführende Abfragen<\/b>, der die SQL-Abfragen mit den geplanten Änderungen anzeigt und per Klick auf OK <\/b>die Änderung in die Datenbank überträgt (siehe Bild 3).<\/p>\n Bild 3: SQL-Anweisung zum Anlegen der Tabelle mit dem Feld Bild<\/span><\/b><\/p>\n Nun müssen wir die Änderung in der Datenbank noch in das Entity Data Model übertragen. Dazu öffnen Sie die Ansicht Bestellverwaltung.edmx <\/b>und wählen aus dem Kontextmenü den Eintrag Modell aus der Datenbank aktualisieren… <\/b>aus (siehe Bild 4).<\/p>\n Bild 4: Aktualisieren des Entity Data Models<\/span><\/b><\/p>\n Danach erscheint das Feld Bild <\/b>dann auch im Element Produkt <\/b>des Entity Data Models. Nun können wir also Bildpfade zum Feld Bild <\/b>des Elements Produkt <\/b>hinzufügen. Damit sind die Arbeiten am Entity Framework erledigt.<\/p>\n Nun wollen wir das Aussehen des Fensters zur Anzeige der Produktdaten mit den Bildern definieren. Dies erledigen wir diesmal gleich im Fenster MainWindow.XAML<\/b>. Damit die Steuer-elemente wie gewünschten angeordnet werden, haben wir über die Elemente Grid.RowDefinitions <\/b>und Grid.ColumnDefinitions <\/b>einige Zeilen und Spalten definiert. Die Definition dieser Elemente sieht wie folgt aus, wobei die Position des Elements mit dem Wert * <\/b>für das Attribut Height <\/b>eine besondere Rolle spielt:<\/p>\n Hier hinterlegen wir nun das ListBox<\/b>-Steuerelement, das in der zweiten Zeile über zwei Spalten angeordnet werden soll. Dieses fügen wir in der folgenden Form zum XAML-Code hinzu:<\/p>\n Das ListBox<\/b>-Element heißt lstProdukte <\/b>und ist an die Auflistung Produkte <\/b>als ItemsSource <\/b>gebunden. Angezeigt soll der Inhalt der Eigenschaft Bezeichnung <\/b>des gebundenen Objekts. Wenn sich die Auswahl ändert, etwa weil der Benutzer ein anderes Element anklickt, soll dies die Ereignisprozedur lstProdukte_SelectionChanged <\/b>auslösen. Damit das ListBox<\/b>-Element die Elemente der Produkte auflistet, fügen wir der Code behind-Klasse MainWindow.xaml.cs <\/b>einige Codezeilen hinzu. Den Beginn macht die klassenweite Definition des DBContext<\/b>-Elements:<\/p>\n Damit wir die Produkte als Datenherkunft für die ListBox haben und das einzelne Produkt-Objekt als Datenherkunft für die Steuer-elemente des Fensters, definieren wir außerdem noch eine private Variable für die Liste der Produkte, und zwar für eine ObservableCollection mit Elementen des Typs Produkt<\/b>:<\/p>\n Den Inhalt dieser Variablen wollen wir auch öffentlich zugänglich machen, damit wir die Elemente des XAML-Codes daran binden können. Dies erledigen wir wie folgt:<\/p>\n Auch für das jeweils mit den Textfeldern anzuzeigende Produkt, dessen Bild wir ja auch laden wollen, deklarieren wir ein Objekt namens produkt<\/b>, dass eine Instanz des Typs Produkt <\/b>speichern kann:<\/p>\n Die öffentliche Eigenschaft kann über den Namen Produkt <\/b>gelesen und geschrieben werden. Damit beim Füllen der Variablen produkt <\/b>gleich die daran gebundenen Steuerelemente aktualisiert werden, implemtieren wir die Schnittstelle INotifyPropertyChanged <\/b>für die aktuelle Klasse. Der Teil in der öffentlichen Eigenschaft Produkt erhält dazu im Setter einen Aufruf der Methode OnPropertyChanged<\/b>:<\/p>\n Möchten Sie weiterlesen? Dann lösen Sie Ihr Ticket!<\/span>![\"Anlegen](\"..\/fileadmin\/_temp_\/2017_03\/pic_87_002.png\")
<\/p>\n![\"SQL-Anweisung](\"..\/fileadmin\/_temp_\/2017_03\/pic_87_003.png\")
<\/p>\n![\"Aktualisieren](\"..\/fileadmin\/_temp_\/2017_03\/pic_87_004.png\")
<\/p>\nXAML-Code definieren<\/h2>\n
<Grid.RowDefinitions>\r\n <RowDefinition Height=\"Auto\"><\/RowDefinition> \/\/für Header\r\n <RowDefinition Height=\"Auto\"><\/RowDefinition> \/\/für ListBox\r\n <RowDefinition Height=\"Auto\"><\/RowDefinition> \/\/für ID des Produkts\r\n <RowDefinition Height=\"Auto\"><\/RowDefinition> \/\/für Bezeichnung\r\n <RowDefinition Height=\"Auto\"><\/RowDefinition> \/\/für Bildpfad\r\n <RowDefinition Height=\"*\"><\/RowDefinition> \/\/für Image-Steuerelement\r\n <RowDefinition Height=\"Auto\"><\/RowDefinition> \/\/für Schaltflächen\r\n<\/Grid.RowDefinitions>\r\n<Grid.ColumnDefinitions>\r\n <ColumnDefinition Width=\"Auto\"><\/ColumnDefinition>\r\n <ColumnDefinition Width=\"*\"><\/ColumnDefinition>\r\n<\/Grid.ColumnDefinitions><\/pre>\n
<ListBox x:Name=\"lstProdukte\" Grid.Row=\"1\" Grid.ColumnSpan=\"2\" Margin=\"5\" ItemsSource=\"{Binding Produkte}\" DisplayMemberPath=\"Bezeichnung\" SelectionChanged=\"lstProdukte_SelectionChanged\"\/><\/pre>\nBestellverwaltungEntities dbContext;<\/pre>\n
private ObservableCollection<Produkt> produkte;<\/pre>\n
public ObservableCollection<Produkt> Produkte {\r\n get { return produkte; }\r\n set { produkte = value; }\r\n}<\/pre>\nprivate Produkt produkt;<\/pre>\n
public Produkt Produkt {\r\n get { return produkt; }\r\n set {\r\n produkt = value;\r\n OnPropertyChanged(new PropertyChangedEventArgs(\"Produkt\"));\r\n }\r\n}<\/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