如何显示图像从ObservableCollection在mvvm

本文关键字：ObservableCollection mvvm 图像 何显示 显示 | 更新日期: 2023-09-27 17:51:18

我还在努力理解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的情况下，映像源会自动将文件路径转换为映像。有人知道我哪里做错了吗?谢谢你的帮助。

如何显示图像从ObservableCollection在mvvm

ImageSource实际上并没有在运行时很好地从字符串转换。实际上，您可能会遇到几个System.Data异常，表明转换失败。

你通常会在这里做的是使用IValueConverter来取你的路径，并从中产生BitmapImage。

你的XAML变成:

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

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

public object Convert(...)
{
     return new BitmapImage(new Uri((string)value));
}
相关文章：