{"id":55000173,"date":"2019-04-01T00:00:00","date_gmt":"2020-03-27T19:37:05","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=173"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"Entity_Framework_Bilder_in_WPF","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/Entity_Framework_Bilder_in_WPF\/","title":{"rendered":"Entity Framework: Bilder in WPF"},"content":{"rendered":"

Im Artikel “PowerApps: Bilder in Datenbank speichern” haben wir gezeigt, wie Sie mit einer PowerApp über ein Smartphone oder ein Tablet Bilder aufnehmen und diese dann in einer Datenbank speichern. Nun wollen wir uns ansehen, wie Sie diese Bilder aus der Datenbank in einer WPF-Anwendung anzeigen, die über das Entity Framework auf die Tabellen der Datenbank zugreift.<\/b><\/p>\n

Voraussetzung<\/h2>\n

Um die Beispiele dieses Artikels nachzuvollziehen, benötigen Sie eine Datenbank, die eine Tabelle namens Fotos <\/b>enthält – genau wie die, die wir im oben genannten Artikel erstellt haben. Diese enthält ein Primärschlüsselfeld namens ID <\/b>und mit dem Datentyp int <\/b>sowie ein Feld namens Foto <\/b>und mit dem Datentyp image<\/b>. Unsere Beispieldatenbank liegt auf einem Azure-Server. Sie können aber natürlich auch unsere Beispieldatenbank mit ein paar Beispielfotos aus dem SQL-Skript aus dem Download auf einem lokalen SQL Server anlegen und mit der folgenden Anwendung auf diese Datenbank zugreifen.<\/p>\n

Vorbereitung<\/h2>\n

Wir erstellen in Visual Studio ein neues Projekt auf Basis der Vorlage Visual Basic|Windows Desktop|WPF-App<\/b>. Da wir diesmal nicht, wie so oft in den vorherigen Ausgaben, ein Code First-Model erstellen, sondern mit einer bestehenden Datenbank starten, noch einmal eine kurze Beschreibung der nötigen Schritte. Dem neuen Projekt fügen wir als Erstes ein neues Element hinzu und wählen den Typ ADO.NET Entity Data Model <\/b>aus. Nachdem wir als Name FotoverwaltungContext <\/b>eingestellt haben, klicken wir auf Hinzufügen <\/b>(siehe Bild 1).<\/p>\n

\"Einfügen<\/p>\n

Bild 1: Einfügen des Entity Data Models<\/span><\/b><\/p>\n

Danach wählen wir als Modellinhalt Code First aus Datenbank <\/b>aus (siehe Bild 2). Der folgende Dialog bietet die Möglichkeit zur Auswahl der Datenverbindung. Hier klicken wir auf die Schaltfläche Neue Verbindung<\/b>. Im nun erscheinenden Dialog namens Verbindungseigenschaften <\/b>geben Sie unter Servername <\/b>den Namen des gewünschten Servers ein. Danach wählen Sie die Authentifizierungsmethode aus – beim Zugriff auf eine Azure-Datenbank immer die SQL Server-Authentifizierung – und geben die Zugangsdaten ein. Schließlich wählen Sie die Datenbank aus und bestätigen nach einem erfolgreichen Test mit einem Klick auf die Schaltfläche Testverbindung <\/b>die Eingaben mit OK<\/b> (siehe Bild 3).<\/p>\n

\"Auswahl<\/p>\n

Bild 2: Auswahl der Datenquelle<\/span><\/b><\/p>\n

\"Auswahl<\/p>\n

Bild 3: Auswahl des Typs Code First aus Datenbank<\/span><\/b><\/p>\n

Danach kehren wir zum Dialog Assistent für Entity Data Model zurück, der Sie fragt, ob Sie Benutzername und Kennwort wirklich in der Verbindungszeichenfolge speichern wollen (siehe Bild 4). Für dieses Beispiel lassen wir diese Daten in der Verbindungszeichenfolge, aber im Artikel Zugangsdaten für SQL Server abfragen <\/b>zeigen wir, wie Sie diese jeweils beim Start der Anwendung abfragen können.<\/p>\n

\"Einstellen<\/p>\n

Bild 4: Einstellen weiterer Eigenschaften<\/span><\/b><\/p>\n

Schließlich wählen wir im Schritt Wählen Sie Ihre Datenbankobjekte und Einstellungen <\/b>noch die Tabelle aus, deren Daten wir in der Anwendung anzeigen wollen. Wir haben die Tabelle tblFotos <\/b>einfach in eine bestehende Datenbank eingefügt, daher müssen wir diese einzeln auswählen (siehe Bild 5).<\/p>\n

\"Auswahl<\/p>\n

Bild 5: Auswahl der gewünschten Tabelle<\/span><\/b><\/p>\n

Dieser Dialog bietet auch noch die Option Generierte Objektnamen in den Singular oder Plural setzen <\/b>an. Da die Tabelle ohnehin das Präfix tbl <\/b>im Namen tblFotos <\/b>enthält, das wir in unserem Entity Data Model nicht als Bezeichnung der Entität sehen wollen, müssen wir hier ohnehin noch ein Mapping vornehmen.<\/p>\n

Nach einem Klick auf die Schaltfläche Fertigstellen <\/b>finden Sie zwei neue Elemente im Projektmappen-Explorer vor: die Klasse FotoverwaltungContext.vb<\/b>, die von der Klasse DbContext <\/b>erbt und zum Beispiel das DbSet <\/b>namens tblFotos <\/b>für den Zugriff auf die Liste der Entitäten auf Basis der in der Tabelle gespeicherten Daten bereitstellt sowie die Klasse tblFotos.vb <\/b>als Entitätsklasse für einen Datensatz der Tabelle tblFotos<\/b>.<\/p>\n

Die Benennung der Klasse und des Namens des DbSet<\/b>-Elements entspricht nicht unseren Vorstellungen, also ändern wir das ein wenig ab. Wie das genau gelingt, zeigen wir Ihnen im Artikel EDM für bestehende Datenbank mit Code First<\/b>. Zum schnellen Nachbauen hier die notwendigen Änderungen. Als Erstes ändern wir den Namen der Klasse tblFotos.vb <\/b>in Foto.vb<\/b>.<\/p>\n

In der Klasse Foto.vb <\/b>müssen wir den Namen der Eigenschaft Foto <\/b>in Fotodaten ändern, da keine Eigenschaft genauso heißen darf wie die Klasse:<\/p>\n

Partial Public Class Foto\r\n     Public <\/span>Property ID As Integer<\/span>\r\n     <Column(TypeName:=\"image\")>\r\n     <Required>\r\n     Public <\/span>Property Fotodaten As Byte<\/span>()\r\nEnd Class<\/span><\/pre>\n
Damit die Klasse Foto <\/b>auf die Tabelle tblFotos <\/b>gemappt wird und die Eigenschaft Fotodaten <\/b>der Klasse auf das Feld Foto <\/b>der Tabelle, fügen wir folgende Zeilen zur Methode OnModelCreating <\/b>der Klasse FotoverwaltungContext.vb <\/b>hinzu:<\/p>\n
Protected Overrides Sub OnModelCreating(ByVal modelBuilder As <\/span>DbModelBuilder)\r\n     modelBuilder.Entity(Of Foto)().\r\n         ToTable(\"tblFotos\").\r\n         Property(Function(t) t.Fotodaten).HasColumnName(\"Foto\")\r\nEnd Sub<\/span><\/pre>\n
Damit können wir nun testen, ob der Zugriff auf die Datensätze der Tabelle tblFotos <\/b>gelingt. Dazu fügen wir der Klasse MainWindow.xaml.vb <\/b>zunächst eine Konstruktor-Methode hinzu. In dieser erstellen wir einen Datenbankkontext für den Zugriff auf die Datenbank. Außerdem versuchen wir, auf das erste Element der Auflistung Fotos <\/b>dieses Kontextes zuzugreifen und den Inhalt der Eigenschaften ID <\/b>und Fotodaten <\/b>in einem Meldungsfenster auszugeben:<\/p>\n
Class<\/span> MainWindow\r\n     Public <\/span>Sub New()\r\n         Dim <\/span>dbContext As <\/span>FotoverwaltungContext\r\n         dbContext = New<\/span> FotoverwaltungContext\r\n         Dim <\/span>foto As <\/span>Foto\r\n         foto = dbContext.Fotos.First()\r\n         MessageBox.Show(foto.ID.ToString() + vbCrLf<\/span> + vbCrLf<\/span> + foto.Fotodaten.ToString())\r\n     End Sub\r\nEnd Class<\/span><\/pre>\n
Sofern Sie bereits einen Datensatz zu dieser Tabelle hinzugefügt haben, werden die entsprechenden Informationen beim Start der Anwendung ausgegeben.<\/p>\n
Bild im WPF-Fenster anzeigen<\/h2>\n
Nun schauen wir uns an, wie wir den Inhalt der Eigenschaft Fotodaten<\/b>, also des Feldes Foto <\/b>der Tabelle tblFotos<\/b>, in einem Steuer-element in einem WPF-Fenster anzeigen. Dazu benötigen wir zunächst ein geeignetes Steuer-element. Wir fügen dem Fenster MainWindow.xaml <\/b>zunächst ein Image<\/b>-Steuerelement hinzu, das wir mit dem Bild aus der Eigenschaft Fotodaten<\/b> füllen wollen. Das Steuer-element ziehen wir einfach aus der Toolbox in das WPF-Fenster. Dadurch entsteht etwa der folgende XAML-Code:<\/p>\n
<Image HorizontalAlignment=\"Left\" Height=\"288\" Margin=\"112,50,0,0\" VerticalAlignment=\"Top\" Width=\"364\"\/><\/pre>\n
Das Bild ist im Feld Foto <\/b>der Tabelle tblFotos <\/b>unter dem Datentyp image <\/b>gespeichert (siehe Bild 6). Wir müssen nun einen Weg finden, den Inhalt dieses Feldes im Image<\/b>-Steuerelement anzuzeigen.<\/p>\n
\"Das<\/p>\n
Bild 6: Das Feld Foto in der Tabelle tblFotos<\/span><\/b><\/p>\n
Dazu verarbeiten wir dieses zunächst in der Code behind-Klasse MainWindow.xaml.vb<\/b>. Hier verschieben wir die Deklaration des Datenbankkontexts zunächst aus der Konstruktor-Methode in den allgemeinen Teil der Klasse:<\/p>\n
Class<\/span> MainWindow\r\n     Dim <\/span>dbContext As <\/span>FotoverwaltungContext<\/pre>\n
Dann deklarieren wir eine private Variable namens m_Fotodaten<\/b> mit dem Datentyp BitmapImage<\/b>, die wir über die folgende Property <\/b>namens Fotodaten <\/b>mit dem gleichen Datentyp für den lesenden und schreibenden Zugriff verfügbar machen:<\/p>\n
     Dim <\/span>m_Fotodaten As <\/span>BitmapImage\r\n     Public <\/span>Property Fotodaten As <\/span>BitmapImage\r\n         Get\r\n             Return m_Fotodaten\r\n         End Get\r\n         Set(value As <\/span>BitmapImage)\r\n             m_Fotodaten = value\r\n         End Set<\/span>\r\n     End Property<\/pre>\n
Danach erweitern wir die Konstruktor-Methode New<\/b>.  Nach dem Zuweisen des Datenbankkontextes zur Variablen dbContext deklarieren wir ein Objekt des Typs Foto <\/b>und weisen diesem das erste Element der mit der Auflistung Fotots <\/b>eingelesenen Tabelle tblFotos <\/b>zu:<\/p>\n
     Public <\/span>Sub New()\r\n         dbContext = New<\/span> FotoverwaltungContext\r\n         Dim <\/span>foto As <\/span>Foto\r\n         foto = dbContext.Fotos.First()<\/pre>\n
Dann lesen wir zunächst den Inhalt der Eigenschaft Fotodaten <\/b>(also eigentlich des Feldes Foto <\/b>der Tabelle tblFotos<\/b>) in ein Objekt des Typs Byte <\/b>mit dem Namen blob <\/b>ein. Danach erstellen wir ein Objekt namens stream <\/b>mit dem Typ MemoryStream<\/b>, in das wir den Inhalt des Byte-Arrays blob <\/b>mit der Write<\/b>-Methode schreiben. Dann stellen wir die Position des Stream<\/b>-Objekts auf die Position 0 <\/b>ein:<\/p>\n
         Dim <\/span>blob As Byte<\/span>() = foto.Fotodaten\r\n         Dim <\/span>stream As <\/span>MemoryStream = New<\/span> MemoryStream()\r\n         stream.Write(blob, 0, blob.Length)\r\n         stream.Position = 0<\/pre>\n
Nun kommt erstmals das Objekt des Typs BitmapImage <\/b>ins Spiel, das wir anschließend auch dem Image<\/b>-Steuerelement als Quelle zuweisen können. Dieses erstellen wir unter dem Namen img <\/b>und initialisieren es mit der Methode BeginInit<\/b>. Dann weisen wir als StreamSource <\/b>den Inhalt der MemoryStream<\/b>-Variablen stream <\/b>zu und beenden die Initialisierung von img <\/b>mit der EndInit<\/b>-Methode:<\/p>\n
         Dim <\/span>img As <\/span>BitmapImage\r\n         img = New<\/span> BitmapImage\r\n         img.BeginInit()\r\n         img.StreamSource = stream\r\n         img.EndInit()<\/pre>\n
Schließlich weisen wir img <\/b>der öffentlichen Eigenschaft Fotodaten <\/b>zu und stellen die aktuelle Klasse als DataContext <\/b>der WPF<\/b>-Seite ein:<\/p>\n
         Fotodaten = img\r\n         DataContext = Me\r\n     End Sub\r\nEnd Class<\/span><\/pre>\n
Danach müssen wir nur noch der Eigenschaft Source <\/b>des Image<\/b>-Elements im XAML-Code den Pfad zur Eigenschaft Fotodaten <\/b>mitteilen:<\/p>\n
<Image HorizontalAlignment=\"Left\" Height=\"288\" Margin=\"112,50,0,0\" VerticalAlignment=\"Top\" Width=\"364\" Source=\"{Binding Path=Fotodaten}\"\/><\/pre>\n
*****Bild mit Bild*****<\/p>\n
Durch Bilder blättern<\/h2>\n
Wenn wir nun nicht nur ein Bild anzeigen, sondern auch durch alle vorhandenen Bilder blättern wollen, benötigen wir prinzipiell die gleichen Techniken, die wir auch sonst zum Blättern in Datensätzen verwenden. Dazu erstellen wir ein neues Fenster namens FotosBlaettern.xaml<\/b>. Dieses öffnen wir vom Startfenster MainWindow.xaml <\/b>aus mit einer neuen Schaltfläche, der wir die folgenden Codezeilen hinzufügen:<\/p>\n
Private Sub <\/span>btnBeispielZumBlaettern_Click(sender As Object<\/span>, e As <\/span>RoutedEventArgs)\r\n     Dim <\/span>wnd As <\/span>FotosBlaettern\r\n     wnd = New<\/span> FotosBlaettern\r\n     wnd.ShowDialog()\r\nEnd Sub<\/span><\/pre>\n
Die Techniken, die wir weiter oben kennengelernt haben, können wir für das Blättern durch Datensätze mit Bildern ebenfalls verwenden. Außerdem nutzen wir einige Techniken, die wir im Artikel EDM: Blättern in Datensätzen <\/b>vorgestellt haben. Im XAML-Code verwenden wir in den Ressourcen einige DataTrigger, mit denen wir die Schaltflächen aktivieren und deaktivieren wollen (siehe ebenfalls im oben genannten Artikel):<\/p>\n
<Window x:Class=\"FotosBlaettern\" ... Title=\"FotosBlaettern\" Height=\"450\" Width=\"800\">\r\n     <Window.Resources>\r\n         <Style x:Key=\"ButtonVorheriger\" TargetType=\"{x:Type Button}\">\r\n             <Style.Triggers>\r\n                 <DataTrigger Binding=\"{Binding Erster}\" Value=\"False\">\r\n                     <Setter Property=\"IsEnabled\" Value=\"False\"><\/Setter>\r\n                 <\/DataTrigger>\r\n             <\/Style.Triggers>\r\n         <\/Style>\r\n         <Style x:Key=\"ButtonNaechster\" TargetType=\"{x:Type Button}\">\r\n             <Style.Triggers>\r\n                 <DataTrigger Binding=\"{Binding Letzter}\" Value=\"False\">\r\n                     <Setter Property=\"IsEnabled\" Value=\"False\"><\/Setter>\r\n                 <\/DataTrigger>\r\n             <\/Style.Triggers>\r\n         <\/Style>\r\n     <\/Window.Resources><\/pre>\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