CODEWITHSUNDEEP
c#wpf
Aparajita Sinha
Aparajita Sinha

Reputation: 524

How to add Image Source from WPF Application using c#?

I am a beginner in WPF Application. I have checked various tutorials but I am unable to find the option to add an image to my project. I am using Visual Studio 2015. In my .xaml page it is showing the image but once I run the program it is not showing the image. Can anyone please help me?

Source="/WpfApplication1;component/Images/Start.png"

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="438*"/>
            <ColumnDefinition Width="79*"/>
        </Grid.ColumnDefinitions>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="266,114,0,0" VerticalAlignment="Top" Width="81" Height="20"/>
        <Image x:Name="image" HorizontalAlignment="Left" Height="96" Margin="52,71,0,0" VerticalAlignment="Top" Width="111" Source="/WpfApplication1;component/Images/Start.png"/>

    </Grid> </Window>

Upvotes: 0

Views: 8201

Answers (1)

quetzalcoatl
quetzalcoatl

Reputation: 33506

If the XAML Designer is showing it to you, then most probably, after building/compiling, the application cannot find the image. This is quite a common problem - the Designer and the actual application do their resource lookup a little bit different.

Right click on the project, pick "Clean", wait a little, then right click again and pick 'Build'. When it finishes, check the output bin\debug or bin\release directory and see if the image is there, sitting right next to the .exe file. If not, then go back to the project, rightclick on the image in the project and pick 'Properties' and there pick BuildAction=CopyToOutput (i.e. 'always' - probably the best option for images and similar read-only resources). Build the project again, and now it should be visible next to the .exe file, and your application should be able to find it (provided that the path-to-image in xaml is right).

If you don't see your image in the project, then you probably forgot to add it. Right click on the project, pick 'add existing' and add the image so it's in the project. Otherwise, VisualStudio build process has no idea about the image (even if XAML sees it) and will not copy it to the output directory.

What I described is just one option. There are many more available. For example, you may add the image as "Embedded Resource" so it is built-into the .exe and does not sit next to it. However, all of those options vary in details - specifically, they vary regarding:

  • how to add and configure image options in the project
  • how does the Path-To-Image should look like in XAML

so.. it's easy to mess up. For starters, focus on one option (like: Image-as-CopyToOutput, or Image-as-EmbeddedResource) and don't mix them up. Read articles carefully, because often it is not clearly stated which way they have chosen.

Edit:

I just noticed you provided the code. See, your path-to-image in XAML is now:

Source="/WpfApplication1;component/Images/Start.png"

which suggests that this is an embedded resource. You can easily see that this is a special path: (name-of-dll-or-exe) ; (component) / path-to-file. If you use paths like that (they are formally called "pack-uri"), then you should make sure the image is added to the project, but that it is NOT set the image to "buildaction=CopyToOutput" like I advised, but to "BuildAction=EmbeddedResource". It should also be located not right away in the project root, but in "images/" subfolder, and also, that subfolder should be visible in the project in VS.

If you want to try the "CopyToOutput" way, then the path would be just:

Source="Images/Start.png"

With 'CopyToOutput' mode, you actually don't need to care about adding the image to the project - all that's needed it to sure that there is an "Images" folder next to the .exe file right before running the .exe. However, you will have to remember about keeping that image there. If you add the folder and the image to the project, and set buildaction=content, then the VS will remember it for you and will place the folder and image next to the .exe as a part of the build.

So.. first of all, make sure that this image and folder are added to the Project. Then decide which type of BuildAction you want to try out, set it, write relevant path in the ImageSource, then .. keep fingers crossed. It can be hard when you do it for the first time, as there are many ways to do that (not only those 2 I mentioned) and VS/Xaml often don't report any errors..

Upvotes: 2

Related Questions