Images in WPF als Content und als Resource

Veröffentlicht von

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.

4 Kommentare

  1. Danke für das Beispiel, aber irgendwie funktioniert es mit meinem Projekt nicht mit

    Der Compiler wirf immer die Fehlermeldung aus, dass das Bild (Ressource) nicht gefunden wurde…

    Die Bilder sind vorhanden, auch im Ordner images drin, und dementsprechend eingestellt…

    1. Leider wurde der Code automatisch entfernt…
      Wenn das Bild als Setter eingesetzt werden soll, wird es nicht gefunden… Rest steht im eigentlichen Beitrag drin.
      Damit der Code nicht wieder verschwindet, hier ohne die spitzen Klammern:
      Setter TargetName=“checkboxImage“ Property=“Source“ Value=“/MeinProjekt;component/images/bild.png“/

      Über eine Lösung wäre ich sehr dankbar.

      1. Ach so, dieses Beispiel wollte ich verwenden und die Bilder als Ressource verwenden:
        How to create a custom WPF XAML style for check box images (stackoverflow.com/questions/23445409)

      2. Hallo,
        leider ohne den Code schwer zu beantworten. Gibt es ein minimales Beispielprojekt, was Du mal zur Verfügung stellen kannst?
        Gruß
        Andy

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.