WPF image showing up in runtime but not in designer

Question

Update: Issue resolved, please refer to Volatile Pulse's answer below.

I have an image control in my WPF application(.net 5.0), which shows the image at runtime with no issue, but not showing up in designer.

Here's the XAML:

<Window>
    <Grid x:Name="MainGrid" 
        VerticalAlignment="Stretch" 
        HorizontalAlignment="Stretch" 
        SnapsToDevicePixels="True">

        <Grid.RowDefinitions>
            <RowDefinition x:Name="BannerArea" Height="192"/>
            <RowDefinition x:Name="MainArea" Height="2.5*"/>
        </Grid.RowDefinitions>

        <Border x:Name="BannerImageBorder" Grid.Row="0">
             <Image x:Name="BannerBottonLayerImage"
                Source="{DynamicResource BannerImageBackground}"
                HorizontalAlignment="Left"
                Width="1550"
                SnapsToDevicePixels="True"
                RenderOptions.BitmapScalingMode="HighQuality">
             </Image>
        </Border>
    </Grid>
</Window>

<Window.Resources>
    <BitmapImage x:Key="BannerImageBackground" UriSource="Resources\BannerImageBackground.png"/>
</Window.Resources>

I've set the build action for "BannerImageBackground.png" to "Resource".

The image shows up in runtime without a problem while in designer it disappears. Interestingly enough, if I change the XAML to force a syntax error then change it back, the image re-appears in designer, only to disappear again if I run the application in VS.

What I have tried so far:

• Rename both image's file name and resource key name, no avail.
• Move the image to another folder, no avail.
• Declare the image as a resource of the border "BannerImageBorder" and set the source as static resource, no avail.
• Set the image's build action to "Content" and "Copy to Output Directory" to "Copy Always", no avail.

My project's directory path doesn't contain any special characters.

I searched online and that's the closest issue posted by others that I can find: .Net Core 3: Image disappear in Designer after run, in that thread the Visual Studio team says this bug was already fixed in VS 2019 16.5 Preview 2, but I'm using 16.11.26 yet this problem still persists...

I don't know if I did something wrong or it's just a bug? It's certainly not blocking anything but just super annoying.

Thanks in advance.

Answer 1

Update:

I managed to find an acceptable workaround to my issue, but I'm not sure it will be helpful for your issue. All images being stored in a dedicated ResourceDictionary file and then referencing that file via App.xaml allows the designer to show the StaticResource images without hard coding their paths.

I've modified the below code to be a minimally reproducible example and was hoping you could verify if your issue persists using a new solution. If that doesn't work, does specifying the absolute path work correctly for you instead of using the StaticResource or relative paths?

Original:

I don't have enough reputation yet to comment, but I believe I'm experiencing the same issue as you with a significantly different configuration. I'm unable to see the images in the designer at all though. I'm using Visual Studio 2022 with a .Net Framework 4.8 project.

After tons of research I've only managed to show the image in the designer when the image source is a URI or the resource is defined in the same file where the resource is to be used. All three of the following solutions work for runtime, but the one that doesn't work for design time is the one I want to use.

And unfortunately no matter what I try, I can't get it to temporarily show either.

Updated Code:

<!-- Images.xaml -->
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <BitmapImage x:Key="ResourceImage" UriSource="/Image.png" />
</ResourceDictionary>

<!-- App.xaml -->
<Application x:Class="WpfApp1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="/Main.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Images.xaml" />
            </ResourceDictionary.MergedDictionaries>
            
            <BitmapImage x:Key="AppImage" UriSource="/Image.png" />
        </ResourceDictionary>
    </Application.Resources>
</Application>

<!-- Main.xaml -->
<Window x:Class="WpfApp1.Main"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Images.xaml" />

            </ResourceDictionary.MergedDictionaries>
            <BitmapImage x:Key="MainImage" UriSource="/Image.png" />
        </ResourceDictionary>
    </Window.Resources>

    <Grid>
        <StackPanel>
            <!-- Not Displayed - "App.xaml" -->
            <Image Source="{StaticResource AppImage}" Width="100" Height="100" />
            
            <!-- Displayed - "Images.xaml" via "App.xaml" -->
            <Image Source="{StaticResource ResourceImage}" Width="100" Height="100" />

            <!-- Displayed - "ResourceDictionary" -->
            <Image Source="{StaticResource MainImage}" Width="100" Height="100" />

            <!-- Displayed - "/Image.png" -->
            <Image Source="/Image.png" Width="100" Height="100" />
        </StackPanel>
    </Grid>
</Window>

Designer Output: