WPF 和 MVVM ：在不破坏模式的情况下更新图像字段

Question

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

我想使用 OpenFileDialog 更改编辑部分中的照片，以便更新列表框项，就像所有其他字段一样。

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

（在代码中，LoadPhoto 返回一个字节[]）

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 模式...我不确定在视图中可以做什么...这是更新联系人对象的正确方法吗？有没有人有更好的解决这个问题的方法？

Answer 1

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

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

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

这是 XAML：

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

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

这是视图模型：

  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");
     }
  }