WPF ListBox绑定应用内图片失败求助（避免后台代码）

问题描述 #

在WPF ListBox中填充3张应用内部图片时，图片无法正常显示，但ListBox已生成3个项（选中项显示绿色方块）。需求是获取选中的图片项来更新应用主题，且尽量减少后台代码使用。

相关代码 #

当前XAML代码 #

<ListBox ItemContainerStyle="{DynamicResource ThemeListBoxItem}"
         ItemsSource="{Binding Themes}"
         SelectedItem="{Binding SelectedTheme, Mode=TwoWay}"
         Style="{DynamicResource ThemeListBox}">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <Image Source="{Binding Theme.PreviewImagePath}" />
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

ViewModel绑定的Themes属性 #

public ITheme[] Themes => _themeService.Themes;

ThemeService代码 #

public ThemeService()
{
   Themes = new[]
   {
      DarkTheme,
      DefaultTheme,
      MonoTheme
   };
}

public ITheme[] Themes { get; }

public ITheme DarkTheme { get; } = new Theme("Dark Theme",
                                             "pack://application:,,,/MyApp;component/Themes/DarkTheme.xaml",
                                             "pack://application:,,,/MyApp;component/Assets/Media/BG_DarkTheme.png");

public ITheme MonoTheme { get; } = new Theme("Monochrome Theme",
                                             "pack://application:,,,/MyApp;component/Themes/MonochromeTheme.xaml",
                                             "pack://application:,,,/MyApp;component/Assets/Media/BG_Monochrome.png");

public ITheme DefaultTheme { get; } = new Theme("Light Theme",
                                                "pack://application:,,,/MyApp;component/Themes/DefaultTheme.xaml",
                                                "pack://application:,,,/MyApp;component/Assets/Media/BG_LightTheme.png");

Theme接口与实现代码 #

public interface ITheme
{
    string DisplayName { get; }

    string PreviewImagePath { get; }

    string ThemeName { get; }

    string ThemePath { get; }
}

public Theme(string name, string themePath, string previewImagePath)
{
    DisplayName = name;
    PreviewImagePath = previewImagePath;
    ThemePath = themePath;
}

修复方案 #

1. 修正绑定路径错误 #

XAML中Image的绑定路径存在错误：ListBox的每个数据项已经是ITheme实例，无需添加Theme.前缀。修正后的绑定代码：

<Image Source="{Binding PreviewImagePath}" />

2. 验证图片资源的生成属性 #

确保所有图片文件的生成操作设置为Resource（右键图片文件→属性→生成操作），否则pack URI无法正确访问内部资源。

3. 添加绑定错误排查辅助 #

可以给Image添加FallbackValue或检查VS输出窗口的绑定错误日志，快速定位问题：

<Image Source="{Binding PreviewImagePath, FallbackValue='pack://application:,,,/MyApp;component/Assets/Placeholder.png'}" />

4. 选中项绑定确认 #

如果SelectedTheme的类型为ITheme，当前SelectedItem="{Binding SelectedTheme, Mode=TwoWay}"的绑定是正确的，选中后可直接通过该对象的ThemePath加载主题，无需额外后台代码。

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