.NET 7.0 WPF项目VS设计器无法显示绑定图片的问题排查

使用Visual Studio 2022开发基于.NET 7.0的WPF应用，创建了如下UserControl：

<UserControl x:Class="MyApp.Views.Test"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:MyApp.Views"
             xmlns:vm="clr-namespace:MyApp.Views.ViewModels"
             mc:Ignorable="d" 
             d:DataContext="{d:DesignInstance Type=vm:TestViewModel, IsDesignTimeCreatable=True}"
             d:DesignHeight="450" d:DesignWidth="800">
  <UserControl.DataContext>
    <vm:TestViewModel/>
  </UserControl.DataContext>
  <StackPanel>
    <Image Source="{Binding ImgSrc}" HorizontalAlignment="Center" MaxHeight="100"/>
    <TextBlock Text="{Binding Text}" HorizontalAlignment="Center" Foreground="Silver"/>
  </StackPanel>
</UserControl>

对应的ViewModel代码：

internal sealed class TestViewModel
{
  public Uri ImgSrc => new Uri("/Resources/MyImage.png", UriKind.Relative);
  public string Text => "This is the text";
}

说明：MyImage.png已添加到项目的Resources文件夹，生成操作设置为“Resource”。将该UserControl插入MainWindow后，运行应用时图片和文本均正常显示，但在UserControl或MainWindow的设计器中，仅文本绑定内容正常显示，绑定的图片始终无法出现。已知设计器DataContext设置正确、绑定逻辑无误，请问问题出在哪或遗漏了什么？

• 问题根源：设计器解析相对Uri时，无法自动识别WPF资源的程序集打包路径。运行时应用会自动补全资源的程序集前缀，但设计器环境下，单纯的相对Uri缺少程序集标识，导致无法定位到资源文件。

• 解决办法：

  1. 使用带程序集名称的绝对Uri格式：将ViewModel中的ImgSrc改为包含程序集名称的pack格式Uri，示例如下（将MyApp替换为你的项目程序集名称）：

     public Uri ImgSrc => new Uri("pack://application:,,,/MyApp;component/Resources/MyImage.png", UriKind.Absolute);
     

  2. 改用BitmapImage实例返回：在ViewModel中创建BitmapImage对象并配置缓存选项，避免设计器缓存干扰，代码如下：

     public BitmapImage ImgSrc
     {
         get
         {
             var bitmap = new BitmapImage();
             bitmap.BeginInit();
             bitmap.UriSource = new Uri("/Resources/MyImage.png", UriKind.Relative);
             bitmap.CacheOption = BitmapCacheOption.OnLoad;
             bitmap.CreateOptions = BitmapCreateOptions.IgnoreImageCache;
             bitmap.EndInit();
             return bitmap;
         }
     }
     

  3. 添加设计器专属绑定（可选）：在XAML的Image控件上单独设置d:Source属性，仅作用于设计器环境，不影响运行时：

     <Image Source="{Binding ImgSrc}" 
            d:Source="/MyApp;component/Resources/MyImage.png"
            HorizontalAlignment="Center" MaxHeight="100"/>
     

内容的提问来源于stack exchange，提问作者Gilles jr Bisson