Image in WPF Button not Visible at Runtime

Question

All, I have the following start to a small application that checks .resx files for consistency of embedded brackets (so that runtime errors of non-matching "... {0}" strings don't happen). I have the following XAML for the MainWindow.xaml, and my particular problem relates to the image that is to be displayed on the button

<Window x:Class="ResxChecker.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="174.383" Width="495.869">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="350*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="30*"/>
        </Grid.RowDefinitions>
        <Label Content="Select .resx file:" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Top" Height="24" Width="Auto" Grid.ColumnSpan="1"/>
        <TextBox Grid.ColumnSpan="2" HorizontalAlignment="Stretch" Margin="10,0,0,0" Grid.Row="1" TextWrapping="Wrap" Text="" VerticalAlignment="Top"/>
        <Button Grid.Column="2" HorizontalAlignment="Right" Margin="5,0,10,0" Grid.Row="1">
            <Image VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="16 " Width="16" Source="pack://siteoforigin:,,,/Resources/UserCost2013Open16.png"/>
        </Button>
    </Grid>
</Window>

The image has 'Build Action = Resource', 'Copy to output directory = Do not copy' - the image shows in the designer but not at runtime. I have seen the following questions and read the relevant answers, but none resolve the problem:

How do I get the button image to appear at runtime?

Try setting the build action to `Content`. It may be helpful — Hossein Narimani Rad, Mar 26 '13 at 11:35
What could possibly help is checking the output console in Visual Studio when debugging the application. Sometimes it shows helpful errors (e.g. binding errors etc.) — Daniel, Mar 26 '13 at 11:48
Usually your URI will most likely be the issue, as Daniel says look at the output window, there will most likely be complaints about the image source not found or something of that nature. — TYY, Mar 26 '13 at 12:15
set the build-action to content and set 'copy to output directory' to 'copy always' or 'copy if newer' — Tomtom, Mar 26 '13 at 12:15
@Tomtom tried all those no joy. I have since check the 'Output' at runtime, and mscorlib.dll was throwing an IOException but giving no other information... — MoonKnight, Mar 26 '13 at 12:17
Note to editors: [code formatting should be reserved for **code**](http://meta.stackexchange.com/q/137755/191410). — JDB, Mar 26 '13 at 13:44
Here is also an [explaination from Microsoft](http://msdn.microsoft.com/en-us/library/aa970069.aspx "URIs for WPF") about the URI scheme used for WPF in case you want to understand the underlying structure. — , Oct 15 '13 at 16:11
@Killercam: What exception was that? An `InvalidCastException` by any chance? I am trying to debug a similar problem, and seeing whether the symptoms match exactly with this one might help me (and other future visitors) find a solution. — O. R. Mapper, Jan 14 '14 at 11:03
Apologies @O.R.Mapper I have been on holiday. Yes, if I remember correctly this was an `InvalidCastException`... — MoonKnight, Jan 21 '14 at 08:29
@Killercam: I have solved my particular problem; see my other comment and the link if you're interested. — O. R. Mapper, Jan 21 '14 at 08:55
@user2883257 Solved. Instead of Source="/Resources/goback.png" I was using Source=Resources/goback.png. Settings: CopyIfNewer and Content. — Matthis Kohli, Aug 17 '16 at 07:55

score 91 · Accepted Answer · answered Mar 26 '13 at 12:12

91

Change the build action to 'Resource'. Also your pack url is wrong. Either use:

Source="pack://application:,,,/Resource/UserCost2013Open16.png"

or simply

Source="/Resource/UserCost2013Open16.png"

answered Mar 26 '13 at 12:12

Phil

42,255
9
100
100

5

I have just re-added the image using the designer properties panel which I did in the first place and it provided a different URI to the one I had and was like the top one you have shown - this did not work. I re-added the image as a resource - again no luck. I _then_ re-added the image _again_ - this gave me a URI like the bottom one show... Taadaa! It worked, why this happened I have no idea, but it is good to know in the future. Thanks for your time. – MoonKnight Mar 26 '13 at 12:20
@Killercam: I have now experienced something very similar; have a look at my *EDIT3* in [this question](http://stackoverflow.com/questions/21022707/how-to-set-image-resource-uri-from-code-behind/21024049) for a possible explanation of why re-adding may be helpful (though not one for why it worked for you only on the second attempt). – O. R. Mapper Jan 14 '14 at 13:12
`pack://application:,,,/...` does not appear to be liked very much by .XAML at runtime. Throws an error - "unrecognized/invalid blah blah". I have a `UIDomain` project with all the views, presenters, models and images. It seems that the `Resources/*.png` is expected to be in the `views/ ... ... /Resources/img.png` directory when it is more like `../Resources/img.png` – IAbstract Sep 11 '15 at 18:23
Worked for me :) – Naveen Kumar V Mar 26 '19 at 08:07
Just Right Click on Image and select Properties and change "Build Action" to "Resource". – Alireza Bijantabar Jan 14 '22 at 10:14

Basti · Answer 2 · 2013-03-26T12:24:57.123

36

There are 2 Solutions:

1: Change the settings of the image:

Build Action = Content
Copy to output directory = Copy if newer
Source="pack://siteoforigin:,,,/Resources/UserCost2013Open16.png"

2: When Using application instead of siteoforigin in the source path, you have to possible ways:

a) Image will be in a SubFolder called "Resources" and .exe file will be small

Source="pack://application:,,,/Resources/UserCost2013Open16.png"
Build Action = Content
Copy to output directory = Copy if newer

b) Image will be included in the .exe and no Subfolder with imagefile will exist

Source="pack://application:,,,/Resources/UserCost2013Open16.png"
Build Action = Resource
Copy to output directory = Copy if newer

edited Mar 26 '13 at 12:24

answered Mar 26 '13 at 12:18

Basti

994
6
11

Solution 2 works. `Copy to output directory` is not necessary in my case. – Felix Feb 07 '17 at 04:34
Worked. Thanks. – Matt Allen Mar 03 '19 at 18:55

Felix D. · Answer 3 · 2023-02-07T16:42:42.340

13

Assuming that you have set your Build Action to Resource.

Use the URI-PACK-FORMAT:

pack://application:,,,/ResourceFile.xaml or pack://application:,,,/Subfolder/ResourceFile.xaml or pack://application:,,,/ReferencedAssembly;component/ResourceFile.xaml

Those are the most common examples.

Also, in my case it was still not showing.

Clean & Rebuild NOT just Build fixed it for me (VS 2019)!

edited Feb 07 '23 at 16:42

answered Jun 13 '16 at 11:13

Felix D.

4,811
8
38
72

So you have the exact same setup like in the initial question and you didn't need to change the build action nor copy settings or the source path? – asdf Nov 07 '17 at 10:39
Yes. `BuildAction` & `UriPack` was right. Image did not show => `Clean & Rebuild` and it worked. – Felix D. Nov 07 '17 at 10:41
The problem is `Image in WPF Button not Visible at Runtime ` that was the case at my side and above is my solution. I don't care about -2 rep but I really got no idea what ur problem with this is .. ?! – Felix D. Nov 07 '17 at 15:35
`set your Build Action to Resource` was enought for me – Noman_1 Feb 25 '22 at 08:37
1

This worked for me, using VS 22 and .net 6 – Max Jan 06 '23 at 19:59

score 8 · Answer 4 · answered Apr 23 '14 at 04:36

8

In my case I had the images in a separate project named Common and the images were under a folder named Resources in this project. In my other project, I added a reference to Common and set the source of the images like this:

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

The images have the Build Action set to Resource and Copy to Output Directory to Do not copy. However, for some strange reason it wasn't working until I deleted every assembly file in my solution and made a Clean Solution and Build Solution. Not sure why, but it all started working at runtime once I rebuilt everything. I still can't figure out why it was working at Design Time though.

answered Apr 23 '14 at 04:36

Darien Pardinas

5,910
1
41
48

2

Adding the `component` string into the Source path was critical to getting my images to display at run time. – Ted Jul 22 '15 at 10:47
Although having Content and Always Copy used to work for me, after moving to a different machine, I only saw the images/fonts in the designer and not at run-time. Changing them to Resource and Do not Copy fixed it. – Fenrir88 Jan 16 '19 at 16:22

score 6 · Answer 5 · edited Dec 10 '20 at 03:47

6

Go to your image in the resources folder, right click on the image, go to properties, click on the Build Action property, and change it from None to Resource. That'll work.

edited Dec 10 '20 at 03:47

Pang

9,564
146
81
122

answered Sep 09 '15 at 10:07

Deepak

377
4
14

Thank you so much!! Why doesn't MS's official documents say this!??!?!? :) – cmcromance Jun 25 '20 at 06:52

score 4 · Answer 6 · answered Aug 01 '15 at 08:27

You should add any thing inside Solution Explorer of Visual Studio. Instead of just copying the image to folder in Windows Explorer, press Right Click on any folder in Solution Explorer go to Add > Existing Item... and select the path to your resource to be added.

score 4 · Answer 7 · answered Jan 13 '17 at 11:00

I defined my image as next:

<Image Source="/Resources/Images/icon.png"/>

The image is displayed in Visual Studio designer but no image is displayed when I launched the app! It made me nuts! I tried all Build Actions with clean/build, no luck.

In my case the problem is caused by the fact that the control (which uses Image) and the app itself are in different projects. Resources/Images folder is in the Controls project. As result the app attempted to find icon.png in its own Debug folder, but actually it is in Controls' Debug folder.

So two solutions work for me:

1) put Resources/Images in the app's project (not so good when there are several projects which use controls from Controls project, but it works)

2) specify the name of Controls project explicitly inside Image:

<Image Source="/Controls;component/Resources/Images/icon.png"/>

score 4 · Answer 8 · answered Nov 05 '21 at 22:09

Visual Studio 2022 (but should work in other versions). Add your image to a folder named as you want, in this example I created an Assets named folder. Then set the image's property to Resource in the Build Action. Then select the image in the folder and drag and then drop the into <MenuItem.Icon> and it should path properly..

Note you may need to Rebuild the project, the compiler sometimes doesn't recognize new resources as a need to rebuild.

score 0 · Answer 9 · answered Apr 15 '20 at 13:55

0

Make a new folder and put your pictures in the new folder and write this in XAML

<Image Source="/newfolder/icon.png"/>

answered Apr 15 '20 at 13:55

امید توکلی

1

score 0 · Answer 10 · answered Nov 03 '22 at 10:47

0

For me, changing the "build action" to "Resource" and the "copy to output directory" to "Do not copy" has solved my problem.

answered Nov 03 '22 at 10:47

Younes Belouche

1,183
6
7

score 0 · Answer 11 · answered Jun 09 '23 at 19:54

0

In case anyone arrives here and has the image set as "Resource" and "Do not copy" and it still doesn't work, I was able to fix this by toggling Build Action for the image off of "Resource" and then back again.

answered Jun 09 '23 at 19:54

JoeC

1

score -6 · Answer 12 · answered May 27 '18 at 05:49

-6

Source="file:///D:/100x100.jpg"/> works for me.

answered May 27 '18 at 05:49

Neo

1
1

Image in WPF Button not Visible at Runtime

12 Answers12

Linked

Related