wpf - Image shows up in Visual Studio designer but not during run-time

Question

I'm currently working w/ VS studio 2010, .NET 4.0. Here is my scenario:

I currently have a class library project called "Images" that contains a sub folder called "Icons". All my icons currently live in this project and are accessed by multiple projects via siteoforigin. Everything shows up fine while in the designer, but during run time the images do not display.

Here is my folder structure:

• Root Folder
  • Images
    • Icons
  • Project 1
  • Project 2
  • Project 3

All projects are referencing the Images class lib. proj, and all icons inside the "icons" sub-folder within the "Images" project is set to: "Build Action = Resource".

The xaml looks like this (which is perfectly visible during design time):

     <Button Name="Button1" Click="Button1_Click">
        <Button.Content>
            <Image Source="pack://siteoforigin:,,,/Data.Images;component/Icons/Button1.png" />
        </Button.Content>
    </Button>

Answer 1

This was driving me crazy. I tried lots of different things based on various articles but nothing worked. My xaml window and image are in a separate DLL from the executable assembly. Not sure if that was part of my problem.

In the end I had success with:

1. Make sure the image properties in the project has "Build Action" = "Resource", NOT "Embedded Resource"
2. In the xaml, with the image tag selected, use the properties windows to select the Source dropdown since NOW the image appears in the dropdown list! This let visual studio format the string for me.

The string visual studio formatted for my image was:

<Image Source="/Paperless.Common;component/Resources/Checkbook.png" />

where "Paperless.Common" was the name of my assembly, and "Checkbook.png" was my image that resided in a "Resources" folder.

---

For completeness, the above URI is a Resource File Pack URI, where the URI prefix part is automatically added by the XAML Parser.

The full URI - which you would have to use in code behind - has a pack://application: prefix and would also work in XAML:

Source="pack://application:,,,/Paperless.Common;component/Resources/Checkbook.png"