How to embed an image to the bootstrapper?

[NJullienSweet]

When designing my custom UI for the bootstrapper, it looks alright. But when built and opened, the image doesn't show up.

As you can see in the XML, the image is placed in the solution, in a Media directory, and the PNG file is flagged as Content.

<ItemGroup>
  <Content Include="Media\VerticalBanner.png" />
</ItemGroup>

I tried to set CopyToOutputDirectory to Always, but didn't fix my problem.

Do you have an idea why this is happening and how I can embed this image to the boostrapper?

[oleg-shilo]

I could never manage to get WiX runtime to play nice with the runtime location of dependencies. So I took the matter into my own hands and simply embedded the resources via .NET resourcing mechanism:

public BitmapImage Banner => Resource1.wixsharp_logo.ToImageSource();

<Image
    Width="50"
    Height="50"
    Margin="10"
    HorizontalAlignment="Left"
    VerticalAlignment="Bottom"
    Source="{Binding Banner}" />

See https://github.com/oleg-shilo/wixsharp/tree/wix-v3-master/Source/src/WixSharp.Samples/Wix%23%20Samples/Bootstrapper/WixBootstrapper_UI for details

[NJullienSweet]

Thank you for the quick answer!
I tried to replicate what is written in the project you pointed me. I added a RESX resource file and my PNG image into it.

I then tried both ways:

1. Like you wrote me, with a prop and a {Binding ...}:
   • Ends up in nothing being displayed, in the designer and in the built project.

public partial class MainView : Window
{
	MainViewModel viewModel;

	public BitmapImage VerticalBanner => Resource1.VerticalBanner.ToImageSource();

	// ...

<Image Source="{Binding VerticalBanner}" Grid.Column="0" />

2. With a resource dictionary and {StaticResource ...}:
   • Ends up in the image being displayed in the designer but not when built.

<Window.Resources>
	<ResourceDictionary>
		<BitmapImage x:Key="VerticalBanner" UriSource="Resources/VerticalBanner.png"/>
	</ResourceDictionary>
</Window.Resources>
<!-- ... -->
<Image Source="{StaticResource VerticalBanner}" Grid.Column="0" />

Both still end up with the same result: a blank window. Also, side note, I couldn't manage to build your sample.
Yet, my project is based on one of your starting templates, the "Custom BA".

Thanks for your help :)

[oleg-shilo]

Yep, with resources dictionaries it's harder to control the URI, that's why I dynamically load it from resources. You can also add the resource in the MSI and then extract it. But you still will need to have that bound image source property dynamically resolved in the code behind.

I am sure there is a special value of UriSource that would give you what you want. But it needs to have a "magic" prefix (e.g. application://). This is because your WPF assembly is initialized differently at runtime during the installation. NOt like for a desktop app.

For a simple single image I would go with embedded resources (resex or msi) but if your WPF is extensive then you will need to sort out your embedded resources URI.