一个使用 MVVM 为 Windows 8 Metro 风格应用制作的通讯录应用程序

WPF 世界中新出现的框架是 MVVM 框架。MVVM 代表 Model - View - ViewModel。我在这里不解释理论内容，您可以参考这篇文章。我们将构建这个 MVVM 应用程序，而不使用任何框架。仅使用我们自己编写的 C# 代码。

简而言之，

• Model - 应用程序的基本单元。它不过是一个简单的类
• ViewModel - "Model" 的集合，如 List<> 或 ObservableCollection<>。它还包含连接适当 View 事件的代码
• View - 这是 UI。您可以在这里放置按钮、文本块、文本框和列表框

那么，让我们开始吧。启动 Visual Studio 2011。点击新建项目。选择 Metro 和 Blank Application。点击确定。

您将看到的第一个屏幕是默认的 Metro UI。它不过是一个空白的黑色背景。没有按钮。什么都没有。代码隐藏文件包含一些默认的代码行和很多注释。我们只会使用一次代码隐藏文件，在构造函数中编写一行代码。

现在在解决方案中创建 2 个文件夹。Model 和 ViewModel。Model 文件夹将包含我们的“类”，ViewModel 将包含，嗯，类，但这些类将代表 Model 类的集合，并且还将包含将 View 与我们的 ViewModel 连接的代码。

接下来，我们编写 Model。对于这个应用程序，我将选择一个简单的 Contact 类，它有一个 Name 和一个 Email，以及一个 GUID 来唯一标识它。因此，右键单击 Model 文件夹，添加 -> 类。将类命名为 Contact.cs。导入 System.ComponentModel 命名空间，因为我们将使用 INotifyPropertyChanged 接口。这将允许 ViewModel 在 Model 发生更改时进行通信。我将保持讨论简单。

在 Model 之后，让我们专注于 ViewModel。右键单击 ViewModel 文件夹，添加 -> 类。
由于此 ViewModel 将与我们的 Contact.cs Model 一起工作，因此我们将将其命名为“ContactViewModel.cs”。点击确定。

现在请密切关注，这正是 MVVM 的神奇之处所在。我们的 ContactViewModel 实现 INotifyPropertyChanged 接口，这次是为了通知 View 属性的变化以及反之亦然。导入 System.ComponentModel 并隐式实现 INotifyPropertyChanged。
我将在这里简单介绍如何构建一个基本的 ViewModel。

1. 创建 Model 的 List<> 属性。这里我将创建一个名为“Contacts”（注意复数形式！）的 ObservableCollection<Contact> 属性。为此，您需要导入 System.Collections.ObjectModel，并且还需要通过添加 import Mvvm2_Basic.Model 来导入 Model 引用。
2. 接下来，我们需要一些东西来连接我们的 ViewModel 和 View。我们将创建一个类，当 View 上发生任何事件（例如按钮单击）时，该类将调用适当的方法。该类将是一个泛型类，并将用于所有按钮单击事件。
1. 右键单击 ViewModel 文件夹，然后选择添加 -> 类。将类命名为 MyCommand，或者您可以在现有文件中创建一个新类。
2. 这个类实现了一个称为“回调”的机制，其中“我们将一个方法的*名称*传递给另一个方法，并告诉另一个方法在另一个方法完成其工作时调用已命名的那个方法”。这听起来很疯狂而且令人困惑，但它确实很容易理解。学习一些回调的例子，您就会发现它相当容易。
3. 为简单起见，我将在同一个类中创建 MyCommand。MyCommand 将实现 ICommand 接口。为此，您需要导入 System.Windows.Input 命名空间。
   
4. 设置完命令后，让我们开始使用它。为此，我们将创建适当的方法来处理我们的 UI 生成的各种事件。
   我们感兴趣的事件是 Add、Save、Update、Delete 和 Refresh。这些事件将通过单击 View 上的相应按钮来生成。
5. 这些方法接受一个 object 参数。我们将创建 5 个方法。
   
6. 现在，在我们的方法准备好之后，让我们将它们与 View 上的按钮连接起来。为此，我们将创建 5 个 MyCommand 类的属性来表示我们的 5 个方法。然后，这 5 个属性将连接到我们 View 上的 5 个按钮。所以现在您应该明白，我们不是像传统的代码隐藏方法那样直接将方法连接到 UI。
7. 因此，这 5 个属性的一端将连接到我们的 5 个方法，另一端将连接到按钮。如果您仔细查看我们的 MyCommand 类，您会发现我们在构造函数中接受一个回调“Action<T>”参数。此参数包含指向 5 个方法之一的引用。为了简单起见，MyCommand 类中的构造函数将把我们的 MyCommand 属性连接到 5 个方法之一。
   
8. 现在，在“ContactViewModel”的构造函数中，我们将定义这些属性。在执行此操作时，我们传递需要与属性关联的方法的名称。这很重要，因为我们需要确保当我们单击“保存”按钮时，只有执行“保存”操作的方法才会被调用。这可以通过以下方式完成：
   
3. 就这样。我们现在完成了 ViewModel。下一步是创建 View。

我们的 View 是一个非常简单的 UI。如前所述，我们的 View 上只有 5 个按钮。所以，让我们继续创建我们的 View。对于我们的 View，我们将使用 *BlankPage.xaml*。打开 *BlankPage.xaml.cs*（代码隐藏文件）。我们需要告诉我们的 View，View 上将引发的任何事件都将由我们的 ViewModel 处理。

DataContext 将当前 UI 与我们的 ContactViewModel 联系起来。

现在让我们创建 5 个按钮。它们将是“刷新”、“添加新”、“保存”、“更新”、“删除”

请注意每个按钮上的“Command”属性。Command 属性告诉 View 当该按钮被单击时应该去哪里查找。在我们的 Command 属性中，我们指定了我们想要调用的 ViewModel 属性。该 ViewModel 属性随后将调用适当的方法。

您现在应该明白，调用适当的方法是 ViewModel 属性的职责。这分离了 UI 在响应事件方面的关注点。整个设置允许我们单独测试每个“部分”。 

因此，当单击“保存”按钮时，将调用 SaveCommand 属性。ViewModel 中的 SaveCommand 属性已传递 OnSave() 方法的签名。因此，ViewModel 的 SaveCommand 将最终调用 OnSave() 方法。

您可以在输出窗口中看到，当每个方法被调用时，它会输出一些我们在每个方法中的 Debug.WriteLine 中编写的文本。

非常好。这完成了我们 MVVM XML Metro 应用程序的基本框架。在下一系列文章中，我们将了解如何使用 XML 文件执行 CRUD 操作。敬请期待。 

如果本文中的图片不正确，请下载图片。