Images in WPF als Content und als Resource

Es gibt Dinge die kann ich mir nicht merken. Wie ich Bilder in WPF einbinde gehört dazu.

Deswegen gibt es ja den Blog. 🙂 Wie gehabt, gibt es das Projekt am Ende zum Download.

Unser Projekt

In unserem Beispielprojekt wollen wir einfach zwei Bilder ausgeben:

Soweit so gut. Binden wir zuerst beide Bilder in das Projekt ein. Dazu fügen wir die Bilder einfach dem Projekt hinzu. Ich verwende dafür einen Ordner mit dem Namen „Images“:

Bilder als Content einbinden

Um Bilder als Content einzubinden, setzen wir die folgenden Einstellungen:

„Build Action“ wird auf Content gesetzt, das Kopieren setzen wir auf „Copy if newer“. Was bewirkt dies? Beim Bauen der Anwendung wird die Bild-Datei mit in das Ausgabeverzeichnis kopiert:

Wie man sieht, fehlt hier das zweite Bild. Dazu später mehr.

Das Bild binden wir im Xaml-Code ein:

<Image Source="/Images/image_content.jpg" Stretch="Uniform" Margin="10"></Image>

Als „Source“ wird einfach der Pfad angegeben. Das Bild wird einfach aus der Datei ausgelesen.

Bilder als Resource einbinden

Bilder lassen sich auch als Resource verwenden. Hierbei wird das Bild nicht in das Ausgabeverzeichnis kopiert, sondern in das Programm kompiliert. Dies hat den Vorteil, dass der Anwender die Bilder nicht einfach extrahieren kann.

Dazu setzen wir die folgenden Einstellungen:

Das Einbinden erfordert eine etwas andere Syntax:

<Image Source="/WpfImageRRe;component/images/image_res.jpg"
       Margin="10"></Image>

Vor dem Pfad fügen wir „/WpfImageRRe;component“ ein. „WpfImageRRe“ ist hierbei unser Projektname, bzw. das Assembly. Anschließend folgt „;component“ und wieder unser Pfad.

Download

Das Projekt kann hier heruntergeladen werden.