Wpf: image isn't rendered in wpf .net core project

Created on 24 Jan 2019  路  5Comments  路  Source: dotnet/wpf

  • .NET Core Version: 3.0 Preview1
  • Windows version: 19H1
  • Does the bug reproduce also in WPF for .NET Framework 4.8?: Yes

Steps to reproduce:

  1. Create new .net core WPF project
  2. Add image element and set source to one image file.
  3. F5

Actual: the image isn't rendered in UI.

Most helpful comment

Hi @XianghanWang,

great finding.

How do you add the image? Are you using VS2019?

I tried it with VS2019 and a .png file, and yes, it does not work by default. It's not a rendering issue, the problem is that the .png file does not get a Build Action when you add it. That means when you use it in XAML with an Image element, the file is not found, as it is not there at runtime.

In VS2017 the BuildAction is set by default to "Resource", which includes the image and you can use it. You can do this manually by selecting the File in the Solution Explorer, pressing F4 to open the Properties, then change the BuildAction from "None" to "Resource". Now your image should render. If you don't use VS2019, try this in the .csproj file for your image:

<ItemGroup>
  <None Remove="coffeeCup.png" />
</ItemGroup>

<ItemGroup>
  <Resource Include="coffeeCup.png" />
</ItemGroup>

Does it work?

Beside the BuildAction "Resource" there's another option to embed an image: Set the BuildAction to "Content" and "Copy to output directory" to "Copy if newer", this should also make the image available at runtime, but not as part of your .dll, but as part of the output directory.

I think it's something that has to be fixed as part of VS2019 WPF tooling

Update: I tried in addition with VS2019 and .NET Framework 4.7.2. There it works fine, Build Action on the added image is set to Resource. So I think that the Build Action is not set correctly only in VS2019 for SDK-style WPF projects.

All 5 comments

Hi @XianghanWang,

great finding.

How do you add the image? Are you using VS2019?

I tried it with VS2019 and a .png file, and yes, it does not work by default. It's not a rendering issue, the problem is that the .png file does not get a Build Action when you add it. That means when you use it in XAML with an Image element, the file is not found, as it is not there at runtime.

In VS2017 the BuildAction is set by default to "Resource", which includes the image and you can use it. You can do this manually by selecting the File in the Solution Explorer, pressing F4 to open the Properties, then change the BuildAction from "None" to "Resource". Now your image should render. If you don't use VS2019, try this in the .csproj file for your image:

<ItemGroup>
  <None Remove="coffeeCup.png" />
</ItemGroup>

<ItemGroup>
  <Resource Include="coffeeCup.png" />
</ItemGroup>

Does it work?

Beside the BuildAction "Resource" there's another option to embed an image: Set the BuildAction to "Content" and "Copy to output directory" to "Copy if newer", this should also make the image available at runtime, but not as part of your .dll, but as part of the output directory.

I think it's something that has to be fixed as part of VS2019 WPF tooling

Update: I tried in addition with VS2019 and .NET Framework 4.7.2. There it works fine, Build Action on the added image is set to Resource. So I think that the Build Action is not set correctly only in VS2019 for SDK-style WPF projects.

Thanks @thomasclaudiushuber. Change BuildAction fix the problem. As you said, it is default Build Action error.

@thomasclaudiushuber - truly appreciate your help. Would you mind opening an issue so we can properly fix this at some point?

@fabiant2 @XianghanWang

I've added an issue for Visual Studio 2019 here: https://developercommunity.visualstudio.com/content/problem/440436/wpf-net-core-3-sdk-styled-project-images-png-jpg-e.html

I've also verified that it's related to SDK styled projects. If you have an SDK styled WPF project that targets .NET Framework 4.7.2, you have the same issue: Images have the Build Action "None" when added. So it only works correctly with the old .csproj format, and it doesn't work with the new SDK styled .csproj format.

As we know that it is related to the tooling and as I have created the VS2019 issue, I think this Github-Issue can be closed.

Thanks,
Thomas

Closing as external

Was this page helpful?
0 / 5 - 0 ratings