In my WPF application, my loaded PNG logo in image shows at design time but not at run time

Question

This is probably something simple that I am missing. I have a png file which I want to use as the source of a *Image*control in my WPF window. I added this PNG file by Project Properties > Resources > Add Existing File and first as a linked file( and then as embedded when it didn't work).Then I add the *Source*for the image control in XAML file to this. No code involved, simple clicking.

The annoying problem is that when I am designing the WPF window the image shows. When I run it , it doesnt. Nothing appears.

Update: ADDED XAML CODE BELOW

<Window x:Class="Server.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SERVER" Height="467.91" Width="620.522">

        <Grid>
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF080C59" Offset="0"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Button x:Name="btnConnect" Content="Connect" HorizontalAlignment="Left" Height="30" Margin="425,34,0,0" VerticalAlignment="Top" Width="134" Click="btnConnect_Click"/>
        <Button x:Name="btnDisconnect" Content="Disconnect" HorizontalAlignment="Left" Height="35" Margin="425,69,0,0" VerticalAlignment="Top" Width="134" Click="btnDisconnect_Click"/>
        <TextBlock x:Name="txtLog" HorizontalAlignment="Left" Margin="416,160,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="161" Width="87" Background="#FFFFF5F5" Text="LOG:"/>
        <TextBox x:Name="txtMsg" HorizontalAlignment="Left" Height="23" Margin="416,326,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="112"/>
        <Button x:Name="btnSend" Content="Send" HorizontalAlignment="Left" Height="35" Margin="425,120,0,0" VerticalAlignment="Top" Width="134" Click="btnSend_Click"/>
        <ListView x:Name="lsvClients" Height="67" Margin="46,212,260,0" VerticalAlignment="Top">
            <ListView.View>
                <GridView>
                    <GridViewColumn/>
                </GridView>
            </ListView.View>
        </ListView>
        <Image HorizontalAlignment="Left" Height="100" Margin="31,10,0,0" VerticalAlignment="Top" Width="101" Source="pack://siteoforigin:,,,/images/ServerMainLogo.png"/>

    </Grid>
</Window>

What am I missing? thanks

In your output folder, can you check if `/images/ServerMainLogo.png` is available? — jacob aloysious, Mar 27 '13 at 06:42
@iAteABug_And_iLiked_it: Try setting the Properties of the image file `Copy to Output Directory` to `Copy Always`, — jacob aloysious, Mar 27 '13 at 06:57

score 14 · Accepted Answer · edited May 23 '17 at 10:30

14

When you specify the image URI in XAML, it is usually not necessary to write the full URI. Besides the full Pack URI shown in the other answer, you should also be able to write this:

<Image ... Source="images/ServerMainLogo.png"/>

However, you have to make sure that the image file is located in a folder named images in your Visual Studio project and that its Build Action is set to Resource, as shown in this answer.

Alternatively you could set the Build Action to Content and Copy To Output Directory to Copy always or Copy if newer. In this case the image is not embedded as resource into your program's assembly, but simply copied to a directory relative to the executable file.

The (relative) image URI in XAML would work in both cases.

edited May 23 '17 at 10:30

Community

1
1

answered Mar 27 '13 at 06:58

Clemens

123,504
12
155
268

Yayyyyyyy! it works. I had to first copy the png to the resources folder, then add it in resources too, then it showed up... YIPPPPI! – iAteABug_And_iLiked_it Mar 27 '13 at 07:15
Don't copy the file to another folder! If the URI is `images/...` (without leading slash) the file has to be in a folder named "images". That's all. – Clemens Mar 27 '13 at 07:15
I changed my pngs to embedded resource, the designer window was fine with it, the application at runtime not so much. – Chris Marisic Nov 05 '14 at 21:42
@ChrisMarisic It should be Resource, not Embedded Resource. – Clemens Nov 05 '14 at 21:43

score 4 · Answer 2 · answered Mar 27 '13 at 06:45

siteOfOrigin should be used only in case your file is copied at place where your otherexecutables (Output folder) resides. For Resources you should use application instead.

Source="pack://application:,,,/images/ServerMainLogo.png"

Refer to this link for further clarification Pack URIs.

score 1 · Answer 3 · answered Oct 12 '17 at 07:34

Make sure the image properties in the project has "Build Action" = "Resource", NOT "Embedded Resource"
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:

Source="pack://application:,,,/FamilyExplorer;component/Resources/Folder.png"/>

Where FamilyExplorer was my project name and Resources/Folder.png is the location of the image.

score 0 · Answer 4 · edited Oct 10 '22 at 10:23

0

Here is my solution and checks:

Check your image build action. It should have "Resource" status or option.
Check your DLL Culture and Resource Culture.
Set the NeutralResourcesLanguage to "en" like:

[assembly: AssemblyCulture("")]
[assembly: AssemblyFileVersion("1.0.0.0")] 
[assembly: NeutralResourcesLanguage("en")]

edited Oct 10 '22 at 10:23

Luke

743
6
20

answered Oct 05 '22 at 10:19

Ahmet Tolga Tat

1
2

In my WPF application, my loaded PNG logo in image shows at design time but not at run time

4 Answers4

Linked

Related