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 calle

Answer 1

If you are using images from DLL, make sure that dll project has default resources file setup in Project's properties. and change its access modifier to public. Also, set images build action to "Resource"

Answer 2

I had same problem.
Now its working...
Try this:

<Button x:Name="b2" HorizontalAlignment="Left" VerticalAlignment="Top"
    Width="26" Height="29"> 
    <Button.Background> 
        <ImageBrush ImageSource=" a.png"/> 
    </Button.Background>
</Button>

Answer 3

You can simply use relative paths also:

<Button Name="Button1" Click="Button1_Click">
    <Button.Content>
        <Image Source="Icons/Button1.png" />
    </Button.Content>
</Button>

Answer 4

All very good answers. I didn't see this one above and though it's simple and obvious, it will certainly cause the symptoms of the original post. It's easy to forget when we're in a hurry.

Make sure if you dragged and dropped the images into the project that the files have been "Included in Project". That's quickly available from the context menu.

Answer 5

To anyone who may not try this first, if you attempt some of the fixes mentioned here, and nothing is working, try cleaning and rebuilding your solution. I just forgot to add the images to the project (Create images folder, right click folder -> add existing -> click on image).

That didn't fix it until I did a clean and rebuild.

Answer 6

I came across a similar problem. I was using the following format initially (under a class library project).

<Image Source="pack://siteoforigin:,,,/Images/Toolbars/Legend.png"/>

However, when I would Clean/Build or Rebuild the solution or restart the Visual Studio, the button image would disappear, even though I would see them on XAML designer.

I came up with a weird solution but it worked for me. With this solution the images always remain in tact during runtime and on the XAML at design time, -After solution is rebuild -After solution is cleaned and build -After the Visual Studio is closed and restarted.

This solution requires to have 2 folders (I called Resources) with same image names, both under the Main Application and the class library project. Under the project

<Image Source="pack://application:,,,/Resources/Legend.png"/> 

For the images set BuildAction = Resource & Copy to OutputDirectory = Do not copy in both places.

If I use only the Resource Folder at the main application, it still works but this time the XAML design time Parser cannot see the image. That is why I have duplicated the same folder at the class library (where the XAML UserControl is located).

The reason for this complication may be XAML Parser inner workings. The Design Time portion of it looks always at folder location under the project where the UserControl is located, while the runtime portion of it requires the images to be in the main application to run properly.

I am not claiming that this is the proper solution or a reasonable solution at all, but it worked in my case. Comments for an improved or better solution is welcomed.

UPDATE: After trial and error + some other clues (https://docs.microsoft.com/en-us/previous-versions/dotnet/netframework-4.0/aa970069(v=vs.100)), I came up with a simpler solution and it works (for me)

At Resources declare:

<BitmapImage x:Key="mLegend" UriSource="pack://siteoforigin:,,,/Images/Toolbars/Legend/Legend.png"/>

under Button declare:

<Image Source="{StaticResource mLegend}"/>

set BuildAction = Content & Copy to OutputDirectory = Copy if new

As final step, Clean and Build solution.