c# - 导入图像 MVVM WPF

Question

我是 WPF 的新手，在尝试学习它时，我遇到了 MVVM 框架。现在我正在尝试使用我制作的一个简单的应用程序来实现它，该应用程序可以导入并显示图像。

XAML:

<Window x:Class="mvvmSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Width="1024" Height="768">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>
    <GroupBox Grid.Row="0" Header="Imported Picture">
        <Image x:Name="_image" Stretch="Fill"/>
    </GroupBox>
    <Button Height="50" Grid.Row="1" Content="Import Picture"    Click="Button_Click"/>
    </Grid>
</Window>

代码背后:

using Microsoft.Win32;
using System;
using System.Windows;
using System.Windows.Media.Imaging;

namespace mvvmSample
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }


    private void Button_Click(object sender, RoutedEventArgs e)
    {
        OpenFileDialog open = new OpenFileDialog();
        open.DefaultExt = (".png");
        open.Filter = "Pictures (*.jpg;*.gif;*.png)|*.jpg;*.gif;*.png";

        if (open.ShowDialog() == true)
            _image.Source = new BitmapImage(new Uri(open.FileName));
      }
   }
}

我看了很多关于 mvvm 初学者的教程，阅读了很多关于它的文章，我掌握了它背后的概念。对于我的应用程序，我假设 View 与我所拥有的 View 相同，但不使用事件，而是对源和按钮使用命令绑定(bind)。对于模型，我假设我应该有一个图像属性，但我不确定它是否应该获取并设置文件路径或图像本身。然后， View 模型将包含用于图像检索 (OpenFileDialog) 和按钮命令的函数。我的假设是否正确，或者是否有更好的方法将此应用程序转换为 mvvm。一个示例编码会很棒，所以我可以分析它。

提前致谢，

Answer 1

在 ViewModel 中，您应该定义单击按钮时要执行的逻辑。为此，您需要使用命令。我的建议是使用 RelayCommand ，这是一个通用命令:

public class RelayCommand : ICommand
{
    #region Fields

    readonly Action<object> _execute;
    readonly Predicate<object> _canExecute;

    #endregion // Fields

    #region Constructors

    public RelayCommand(Action<object> execute)
        : this(execute, null)
    {
    }

    public RelayCommand(Action<object> execute, Predicate<object> canExecute)
    {
        if (execute == null)
            throw new ArgumentNullException("execute");

        _execute = execute;
        _canExecute = canExecute;
    }
    #endregion // Constructors

    #region ICommand Members

    //[DebuggerStepThrough]
    /// <summary>
    /// Defines if the current command can be executed or not
    /// </summary>
    /// <param name="parameter"></param>
    /// <returns></returns>
    public bool CanExecute(object parameter)
    {
        return _canExecute == null || _canExecute(parameter);
    }

    public event EventHandler CanExecuteChanged
    {
        add { CommandManager.RequerySuggested += value; }
        remove { CommandManager.RequerySuggested -= value; }
    }

    public void Execute(object parameter)
    {
        _execute(parameter);
    }

    #endregion // ICommand Members
}

假设您使用的是 RelayCommand如上定义，您需要为其提供一个或两个委托(delegate)，一个返回一个 bool 值，用于确定命令是否处于要运行的有效状态，另一个则不返回任何内容并实际运行该命令。如果您不提供 CanExecute委托(delegate)然后命令将认为它始终处于有效状态。

在您的 ViewModel 中，您还需要一个属性来保存图像路径。此属性将与 Source 绑定(bind)。 Image 的属性(property)你在 View 中。因此，您的 ViewModel 类将是这样的:

public class MainViewModel: INotifyPropertyChanged
{
    private string imagePath;

    public string ImagePath
    {
        get { return imagePath; }
        set
        {
            imagePath = value;
            SetPropertyChanged("ImagePath");
        }
    }

    ICommand _loadImageCommand;
    public ICommand LoadImageCommand
    {
        get
        {
            if (_loadImageCommand == null)
            {
                _loadImageCommand = new RelayCommand(param => LoadImage());
            }
            return _loadImageCommand;
        }
    }

    private void LoadImage()
    {
        OpenFileDialog open = new OpenFileDialog();
        open.DefaultExt = (".png");
        open.Filter = "Pictures (*.jpg;*.gif;*.png)|*.jpg;*.gif;*.png";

        if (open.ShowDialog() == true)
            ImagePath = open.FileName;
    }

    #region Property Changed Event Handler
    protected void SetPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
    public event PropertyChangedEventHandler PropertyChanged;
    #endregion Property Changed Event Handler
}

使用此 ViewModel，您无需在 View 的代码开头执行任何操作。您只需在窗口的资源中实例化您的 ViewModel 并设置 DataContext根网格的属性。之后，您可以将属性和命令与适当的控件绑定(bind):

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wpfApplication1="clr-namespace:WpfApplication1"
    Title="MainWindow" Width="1024" Height="768">
<Window.Resources>
    <wpfApplication1:MainViewModel x:Key="MainViewModel"/>
</Window.Resources>
<Grid DataContext="{StaticResource MainViewModel}">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>
    <GroupBox Grid.Row="0" Header="Imported Picture">
        <Image x:Name="_image" Stretch="Fill" Source="{Binding ImagePath}"/>
    </GroupBox>
    <Button Height="50" Grid.Row="1" Content="Import Picture" Command="{Binding LoadImageCommand}"  />
</Grid>