如何在 mvvm 中显示来自 ObservableCollection 的图像答案

【问题标题】：How to display images from ObservableCollection in mvvm如何在 mvvm 中显示来自 ObservableCollection 的图像
【发布时间】：2015-05-30 00:08:11
【问题描述】：

我仍然很想了解 MVVM。我一直在显示我的图像，哪些路径存储在 observableCollection 中。过去我可以在视图中使用代码，但现在当我尝试在我的项目上实现 MVVM 时，它不再显示任何图像。

这是我在视图模型中的代码

private ObservableCollection<Image> _selectedImageList = new ObservableCollection<Image>();
public ObservableCollection<Image> SelectedImageList
{
        get { return _findImageList; }
        set { _findImageList = value; }
}

public ImageLibraryViewModel()
{
        string dbConnectionString = @"Data Source =movieprepper.sqlite;";
        SQLiteConnection cnn = new SQLiteConnection(dbConnectionString);
        cnn.Open();
        string Query = "Select* from images";
        SQLiteDataAdapter sda = new SQLiteDataAdapter(Query, cnn);
        DataTable dt = new DataTable();
        sda.Fill(dt);
        cnn.Close();

        foreach (DataRow row in dt.Rows)
        {
            string path = AppDomain.CurrentDomain.BaseDirectory.Substring(0, (AppDomain.CurrentDomain.BaseDirectory.Length - 10));
            string name = row["path"].ToString();
            Uri uri = new Uri(path + name);

            Image I = new Image(uri.ToString(), row["path"].ToString(), row["title"].ToString());

            SelectedImageList.Add(I);
        }
}

这就是我在 XAML 中的内容

 <ListBox  ItemsSource="{Binding SelectedImageList}" dd:DragDrop.IsDropTarget="True">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <Image Source="{Binding Thumbnail}" Width="200"/>
                    <TextBox Text="{Binding Thumbnail}"></TextBox>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

在绑定到缩略图的文本中，我可以清楚地读取图像指向的路径，但图像不会显示在列表中。在过去没有 MVVM 的情况下，Image Source 会自动将文件路径转换为图像。有人知道我哪里出错了吗？感谢您的帮助。

【问题讨论】：

如果您分享如何在 Image 类上定义 Thumbnail 属性，可能会有所帮助。它是什么类型的？此外，在您的问题案例中，它从它的 getter 返回什么值？我在提供的代码中看不到任何会导致您所描述的问题的内容。
BaseDirectory.Substring(0, (AppDomain.CurrentDomain.BaseDirectory.Length - 10)) 是不是要切断当前目录的“bin\Debug\”部分？你不应该那样做。发布版本是什么，它是“bin\Release\”，或者当应用程序以完全不同的路径安装时？图片的根文件夹可能是您的应用程序的配置设置。

标签： c# wpf xaml mvvm bitmap

【解决方案1】：

ImageSource 实际上并没有在运行时从字符串转换得那么好。事实上，您可能有几个 System.Data 异常表明转换失败。

您通常会在这里使用IValueConverter 来选择您的路径并从中创建一个BitmapImage。

您的 XAML 变为：

<Image Source="{Binding ThumbnailPath, Converter={StaticResource PathToImageConverter}"/>

转换器中的Convert 方法类似于：

public object Convert(...)
{
     return new BitmapImage(new Uri((string)value));
}

【讨论】：

重要的是您绑定到绝对 URI 或绝对 URI 的字符串表示形式。当您尝试使用相对路径时，通常会出现问题。使用绝对路径时，我从来不需要自定义转换器，但可能有些情况我根本没有遇到过。
@Xavier 也许我从未使用过绝对路径 :) 但我一直使用转换器。
除了 Xavier 所说的之外，您可以通过使用带有 Uri 参数的 BitmapImage 构造函数来简化您的 Convert 方法。因此，您将保存 BeginInit 和 EndInit 调用，而只需 return new BitmapImage(new Uri((string)value));