WPF中的MVVM

WPF中的MVVM

模型和视图模型

模型的定义经常引起激烈争论，模型和视图模型之间的界限可能会模糊不清。有些人不喜欢“污染”他们的模型与INotifyPropertyChanged接口，而是在视图模型，它确实实现了这个接口复制的模型属性。像软件开发中的许多东西一样，没有正确或错误的答案。

拆开视图

MVVM的目的是将这三个不同的区域分开 - 模型，视图模型和视图。虽然视图可以接受视图模型（VM）和（间接）模型，但MVVM最重要的规则是VM应该无权访问视图或其控件。 VM应通过公共属性公开视图所需的所有内容。 VM不应直接公开或操纵UI控件，如TextBox ， Button等。

在某些情况下，这种严格的分离可能很难处理，特别是如果你需要启动并运行一些复杂的UI功能。在这里，在视图的“代码隐藏”文件中使用事件和事件处理程序是完全可以接受的。如果它纯粹是UI功能，那么无论如何都要利用视图中的事件。这些事件处理程序也可以在VM实例上调用公共方法 - 只是不要将它传递给UI控件或类似的东西。

RelayCommand

不幸的是，这个例子中使用的RelayCommand类不是WPF框架的一部分（应该是！），但几乎每个WPF开发人员的工具箱都会找到它。在线快速搜索将显示大量可以解除的代码片段，以创建自己的代码片段。

RelayCommand一个有用的替代RelayCommand是ActionCommand ，它作为Microsoft.Expression.Interactivity.Core一部分提供，它提供了类似的功能。

使用WPF和C＃的基本MVVM示例

这是使用WPF和C＃在Windows桌面应用程序中使用MVVM模型的基本示例。示例代码实现了一个简单的“用户信息”对话框。

View

XAML

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
Grid.RowDefinitions>

<TextBlock Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Margin="4" Text="{Binding FullName}" HorizontalAlignment="Center" FontWeight="Bold"/>

<Label Grid.Column="0" Grid.Row="1" Margin="4" Content="First Name:" HorizontalAlignment="Right"/>

<TextBox Grid.Column="1" Grid.Row="1" Margin="4" Text="{Binding FirstName, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Left" Width="200"/>

<Label Grid.Column="0" Grid.Row="2" Margin="4" Content="Last Name:" HorizontalAlignment="Right"/>
<TextBox Grid.Column="1" Grid.Row="2" Margin="4" Text="{Binding LastName, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Left" Width="200"/>

<Label Grid.Column="0" Grid.Row="3" Margin="4" Content="Age:" HorizontalAlignment="Right"/>
<TextBlock Grid.Column="1" Grid.Row="3" Margin="4" Text="{Binding Age}" HorizontalAlignment="Left"/>

Grid>

和背后的代码

 public partial class MainWindow : Window
    {
        private readonly MyViewModel _viewModel;
        public MainWindow()
        {
            InitializeComponent();
            _viewModel = new MyViewModel();
            //DataContext作为绑定路径的起点
            DataContext = _viewModel;
        }
    }
    // INotifyPropertyChanged通知View属性更改，以便更新绑定。
    sealed class MyViewModel : INotifyPropertyChanged
    {
        private User user;

        public string FirstName
        {
            get { return user.FirstName; }
            set
            {
                if (user.FirstName != value)
                {
                    user.FirstName = value;
                    OnPropertyChange("FirstName");
                    //如果名字已更改，则FullName属性也需要更新。
                    OnPropertyChange("FullName");
                }
            }
        }

        public string LastName
        {
            get { return user.LastName; }
            set
            {
                if (user.LastName != value)
                {
                    user.LastName = value;
                    OnPropertyChange("LastName");
                    //如果名字已更改，则FullName属性也需要更新。
                    OnPropertyChange("FullName");
                }
            }
        }
        //此属性是如何将模型属性与视图呈现方式不同的示例。
        //在这种情况下，我们将出生日期转换为用户的年龄，这是只读的。
        public int Age
        {
            get
            {
                DateTime today = DateTime.Today;
                int age = today.Year - user.BirthDate.Year;
                if (user.BirthDate > today.AddYears(-age)) age--;
                return age;
            }
        }

        //此属性仅用于显示目的，是现有数据的组成。
        public string FullName
        {
            get { return FirstName + " " + LastName; }
        }

        public MyViewModel()
        {
            user = new User
            {
                FirstName = "John",
                LastName = "Doe",
                BirthDate = DateTime.Now.AddYears(-30)
            };
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChange(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

模型

   sealed class User
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime BirthDate { get; set; }
    }

MVVM中的命令

命令用于在遵守MVVM模式的同时处理WPF中的Events 。

一个普通的EventHandler看起来像这样（位于Code-Behind ）：

public MainWindow()
{
       _dataGrid.CollectionChanged += DataGrid_CollectionChanged;
}    
private void DataGrid_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
      //做任何事
}

不在MVVM中做同样的事我们使用Commands ：

<Button Command="{Binding Path=CmdStartExecution}" Content="Start" />

我建议为命令属性使用某种前缀（ Cmd ），因为你将主要在xaml中使用它们 - 这样它们更容易识别。

因为它是MVVM，所以你想要在ViewModel处理该命令（For Button “eq” Button_Click ）。

为此，我们基本上需要两件事：

System.Windows.Input.ICommand
RelayCommand（例如从这里获取） 。
一个简单的例子可能如下所示：

private RelayCommand _commandStart;
public ICommand CmdStartExecution
{
get
{
if(_commandStart == null)
{
    _commandStart = new RelayCommand(param => Start(), 
    param => CanStart());
}
return _commandStart;
}
}

public void Start()
{
    //...
}

public bool CanStart()
{
      return (DateTime.Now.DayOfWeek == DayOfWeek.Monday); //Can only click that button on mondays.
}

那么这个细节是做什么的：

ICommand是xaml中的Control绑定的内容。 RelayCommand将你的命令路由到Action （即调用Method ）。 Null-Check只确保每个Command只会初始化一次（由于性能问题）。如果你已经阅读了上面RelayCommand的链接，你可能已经注意到RelayCommand对它的构造函数有两个重载。 (Action