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

Question

我有 3 个项目： 数据(实体、数据库上下文等( WebAPI (ASP.NET CORE( 桌面管理员客户端(WPF、MVVM(

我有带图像的书。

使用 API，我可以从数据项目中获取图像(字节 [](和书籍。 在视图模型的管理客户端中，我可以看到正确的字节[]。

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

相关代码：

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 属性。

集合中的每个项都应保存图像的字节 []。

在项模板中，将图像的源属性绑定到保存项中 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
}