WPF xaml如何在按钮单击时显示来自API的图像？

Question

我有 3 个项目： 数据（实体、DbContext 等） WebAPI (ASP.NET 核心) 桌面管理客户端（WPF、mvvm）

我有带图片的书。

使用 API，我可以从 Data 项目中获取图像（字节 []）和书籍。 在 ViewModel 的管理客户端，我可以看到正确的字节 []。

但我不知道如何在我的窗口显示。

相关代码：

MainWindow.xaml

<StackPanel Grid.Row="2" Orientation="Horizontal" Width="600">
    <TextBlock Text="Book ID: " Margin="1" />
    <TextBox Width="50" Text="{Binding BookIdProp}" Margin="0" />
    <Button Content="Show image" Command="{Binding ShowBookImage}" Width="114" IsEnabled="{Binding IsLoaded}" />
</StackPanel>

我想在这里显示图片：

    <ListBox Grid.Row="3" Grid.ColumnSpan="2" Name="imageListBox" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel IsItemsHost="True" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Image Height="100" Width="Auto" Source="{Binding ShowImageCommand, Converter={StaticResource bookImageConverter}}" />
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

现在在视图模型中，我可以通过 bookId（文本框）获取图像的字节 []。 我正在使用数据传输对象。

DTO：

public class ImageDTO
{
    public int Id { get; set; }
    public int BookId { get; set; }
    public byte[] ImageContent { get; set; }
}

public class BookDTO
{
    public int Id { get; set; }
    public String Title { get; set; }
    public String Author { get; set; }
    public ImageDTO Image { get; set; }
    public BookDTO()
    {
        Image = new ImageDTO();
    }

}

视图模型：

public DelegateCommand ShowImageCommand{ get; private set; }

ShowImageCommand= new ShowImageCommand(param => ShowImage());

private void ShowImage(int id)
{
??
}

转换器：

    public object Convert(Object value, Type targetType, Object parameter, CultureInfo culture)
    {
        if (!(value is Byte[]))
            return Binding.DoNothing;

        try
        {
            using (MemoryStream stream = new MemoryStream(value as Byte[])) 
            {
                BitmapImage image = new BitmapImage();
                image.BeginInit();
                image.CacheOption = BitmapCacheOption.OnLoad;
                image.StreamSource = stream;
                image.EndInit();
                return image;
            }
        }
        catch
        {
            return Binding.DoNothing;
        }
    }

    public object ConvertBack(Object value, Type targetType, Object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }

如何在视图模型上绑定以显示正确的图像？

Answer 1

您的 ViewModel 缺少用于 ListBox 的 ObservableCollection 来绑定它的 ItemsSource 属性。

集合中的每个项目都应该包含图像的字节[]。

在 ItemTemplate 中，将 Image 的 Source 属性绑定到项目中保存 byte[] 的字段。

Answer 2

绑定图像 MVVM： 你的问题有点不清楚，但通常你会遵循这个方向。 希望对您有所帮助。

第 1 步：首先，在您的 Model 中，创建转换器类： 您必须绑定 BookDTO 类的实例，而不是 byte 数组：

using System;
using System.Globalization;
using System.Windows.Data;
using System.Windows.Media.Imaging;

namespace YourNamespace.Models
{
    public class BookDTOToImageConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (!(value is BookDTO))
            return Binding.DoNothing;

            try
            {
                BookDTO bookDTO = value as BookDTO;
                using (MemoryStream stream = new MemoryStream(bookDTO.Image.ImageContent)) 
                {
                    BitmapImage image = new BitmapImage();
                    image.BeginInit();
                    image.CacheOption = BitmapCacheOption.OnLoad;
                    image.StreamSource = stream;
                    image.EndInit();
                    return image;
                }
            }
            catch
            {
                return Binding.DoNothing;
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotSupportedException();
        }
    }
}

第 2 步：在您的View：

<!--Your code here-->
<Window.Resources>
        <local:BookDTOToImageConverter x:Key="bookDTOToImageConverter"/>
</Window.Resources>
<!--Your code here-->
<!--Your image here-->
<Image Height="100" Width="Auto" Source="{Binding YourImage, Converter={StaticResource bookDTOToImageConverter}}" />

第 3 步：在ViewModel 中，创建一个完整的属性以绑定到View：

using System.ComponentModel;
namespace YourNamespace.ViewModel
{
    public class MainViewModel : INotifyPropertyChanged
    {
        publicMainViewModel()
        {
            // Your code...
        }
        private BookDTO yourBookDTO;
        public BookDTO yourBookDTO
        {
            get { return yourBookDTO; }
            set { yourBookDTO = value; NotifyPropertyChanged("YourBookDTO"); }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(string Obj)
        {
            if (PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(Obj));
            }
        }
    }

    public class ImageDTO
    {
        public int Id { get; set; }
        public int BookId { get; set; }
        public byte[] ImageContent { get; set; }
    }
    public class BookDTO
    {
        public int Id { get; set; }
        public String Title { get; set; }
        public String Author { get; set; }
        public ImageDTO Image { get; set; }
        public BookDTO()
        {
            Image = new ImageDTO();
        }
    }
}

第 4 步：您的ShowImage 方法：

private void ShowImage(int id)
{
    this.YourBookDTO = someYourBookDTO; //Image.ImageContent property will be updated automatically
}