WPF图片运行时正常显示但设计器中不显示问题求助

问题概述 #

.NET 5.0 WPF应用中，Image控件运行时能正常显示图片，但设计器里会消失。临时的解决方式是修改XAML制造语法错误再改回，图片会在设计器中重现，但运行应用后又会消失。

涉事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>

图片BannerImageBackground.png的生成操作已设置为Resource，项目目录无特殊字符。

已尝试无效操作 #

• 重命名图片及资源键名
• 迁移图片到其他文件夹
• 将图片声明为Border的资源并改用静态资源引用
• 修改图片生成操作为Content，设置“复制到输出目录”为始终复制

曾查询到类似问题，官方称已在VS 2019 16.5 Preview 2修复，但使用VS 2019 16.11.26版本时问题仍存在。

可行解决方案 #

参考Volatile Pulse的回答，通过以下两点修改解决问题：

1. 为BitmapImage的UriSource使用绝对pack URI路径
2. 将Image的资源引用从DynamicResource改为StaticResource

修改后的代码如下：

资源声明部分

<Window.Resources>
    <BitmapImage x:Key="BannerImageBackground" UriSource="pack://application:,,,/Resources/BannerImageBackground.png"/>
</Window.Resources>

Image控件部分

<Image x:Name="BannerBottonLayerImage"
       Source="{StaticResource BannerImageBackground}"
       HorizontalAlignment="Left"
       Width="1550"
       SnapsToDevicePixels="True"
       RenderOptions.BitmapScalingMode="HighQuality">
</Image>

原理说明 #

绝对pack URI能明确告知设计器图片的资源位置，避免相对路径解析的潜在bug；StaticResource在加载阶段就完成解析，相比DynamicResource的按需加载模式，设计器能更稳定地识别并渲染资源。

内容的提问来源于stack exchange，提问作者NWB_Ark