WPF 和 MVVM : Update an image field without breaking the pattern

Question

我目前正在学习如何使用 MVVM 模式编写 WPF 应用程序。我正在编写一个小型联系人管理器应用程序，因此我的应用程序显示绑定(bind)到我的 View 模型的列表框，以及绑定(bind)到 ListBox.SelectedItem 的一组字段。这些字段之一是联系人的照片。

我想使用 OpenFileDialog 更改编辑部分中的照片，以便更新列表框项目，因为它适用于所有其他字段。

我首先尝试更新 Image 控件的源属性，但这样做，我失去了 Binding...
然后我在 Button_Click 上编写了一个处理程序来更新 Contact.Photo 属性(它的类型是 byte[])，并且它可以工作。但不是从“更新控件”绑定(bind)到 View 模型，而是从 VM 绑定(bind)到控件，就好像数据来自数据库一样。

(在代码中，LoadPhoto 返回一个 byte[])

private void Button_Click(object sender, RoutedEventArgs e)
{
    OpenFileDialog OpenFileDialog = new OpenFileDialog();
    if (OpenFileDialog.ShowDialog() == true)
    {
        (listbox.SelectedItem as ContactManager.ViewModel.Contact).Photo = 
                LoadPhoto(OpenFileDialog.FileName);
    }
}

我想知道它是否不会破坏 MVVM 模式...我不确定在 View 中可以做什么...这是更新联系人对象的正确方法吗？有没有人有更好的解决这个问题的方法？

Answer 1

查看将您的按钮绑定(bind)到命令绑定(bind)而不是单击事件。
您可以使用 Google 找到 DelegateCommand 的实现。
接下来，您可以从您的 ViewModel 公开一个 ImageSource，您可以从您的 XAML 绑定(bind)到您的 Image。

我已经包含了一些代码片段来帮助您入门。

了解基础知识后，请查看 MVVM 框架，例如 Cinch ，您将找到一种使用 Services Interfaces 处理 OpenFileDialog 的方法。 IOpenFileService.cs 不违反 MVVM 模式。

这是 XAML:

  <Button Content="Update Photo" Command="{Binding UpdatePictureCommand}"/>

  <Image Source="{Binding EmployeePicture}"
                   VerticalAlignment="Center" HorizontalAlignment="Center"
                   Stretch="Fill" />

这是 View 模型:

  public MainViewModel()
  {
     UpdatePictureCommand = new DelegateCommand<object>(OnUpdatePictureCommand, CanUpdatePictureCommand);
  }

  public ICommand UpdatePictureCommand { get; private set; }
  private void OnUpdatePictureCommand(object obj)
  {
    OpenFileDialog OpenFileDialog = new OpenFileDialog();
   if (OpenFileDialog.ShowDialog() == true)
   {
     //(listbox.SelectedItem as ContactManager.ViewModel.Contact).Photo = 
     //    LoadPhoto(OpenFileDialog.FileName);
     Stream reader = File.OpenRead(OpenFileDialog.FileName);
     System.Drawing.Image photo = System.Drawing.Image.FromStream((Stream)reader);

     MemoryStream finalStream = new MemoryStream();
     photo.Save(finalStream, ImageFormat.Png);

     // translate to image source
     PngBitmapDecoder decoder = new PngBitmapDecoder(finalStream, BitmapCreateOptions.PreservePixelFormat,
                                         BitmapCacheOption.Default);
     EmployeePicture =  decoder.Frames[0];;
  }

  private bool CanMoveFirstCommand(object obj)
  {
     return true;
  }

  private ImageSource _employeePicture;
  public ImageSource EmployeePicture
  {
     get
     {
        return _employeePicture;
     }
     set
     {
        _employeePicture = value;
        OnPropertyChanged("EmployeePicture");
     }
  }