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

Answer 1

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.

Answer 2

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.

Answer 3

• 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.