Silverlight MVVM 模式下与子窗体交互

Model View viewmodel（MVVM）是在 Silverlight 和 WPF 项目开发中应用最多的结构模式，也是 Silverlight 和 WPF 项目开发的最佳模式。本文的主要目的不是讲解 MVVM 模式。目前已有很多 MVVM 框架可以用来简化 MVVM 开发，如 Prism、SilverlightFX、MvvmLight、Caliburn、Simple MVVM Toolkit等。

　　本文将使用 MvvmLight 框架来演示如何在 MVVM 模式下与子窗体交互，即如何在 viewmodel 中弹出一个子窗体。　　在 程序开发中经常会遇到诸如弹出提示框、确认框、用户输入窗口等的情况，在 Silverlight 中这些情况都可以用子窗体（Child Window）来处理。在未使用 MVVM 模式的情况下，我们可以在用户控件或页面的后置代码（Code Behind）中实例化一个子窗体，调用子窗体的 Show 方法来弹出子窗体，然后通过子窗体的 Closed 方法用户的操作结果。但是在使用 MVVM 模式的情况下，为了使 Model 和 View 最大限度的分离，我们要使用尽可能少的后置代码。如果在后置代码中实例化并显示子窗体，这就使用代码和视图结合在一起了；当然也可以在 viewmodel 里实例化并显示子窗体，这样又使子窗体和 viewmodel 结合在一起了。

　　首先我们来看一下示例程序的运行结果：

　

　　程序运行后当用户单击 New Customer 按钮时，就会弹出一个子窗体，用户输入Customer Id、Customer Name、Customer City 后单击 OK 按钮就会在主页面的客户列表中显示出刚才输入的客户信息。下面是本示例具体的实现。

　　新 建一个 Silverlight 项目，然后在项目中添加Views、Models、viewmodels、Locators文件夹（如果是通过 MvvmLight 模板创建的 Silverlight 项目，默认 viewmodel Locator 和 viewmodel 在同一文件夹中）。添加对程序集 galaSoft.MvvmLight.Extras.SL4 和 galaSoft.MvvmLight.SL4 的引用（如果通过 MvvLight 模板创建则会自动引用）。在 Model 文件夹中新建一个 Customer Model，完整代码如下：

 

01	public class Customer : INotifyPropertyChanged
02	{
03	    private string customerId;
04	    public string CustomerId
05	    {
06	        get { return customerId; }
07	        set
08	        {
09	            customerId = value;
10	            NotifyPropertyChanged("CustomerID");
11	        }
12	    }
13	
14	    private string customerName;
15	    public string CustomerName
16	    {
17	        get { return customerName; }
18	        set
19	        {
20	            customerName = value;
21	            NotifyPropertyChanged("CustomerName");
22	        }
23	    }
24	
25	    private string city;
26	    public string City
27	    {
28	        get { return city; }
29	        set
30	        {
31	            city = value;
32	            NotifyPropertyChanged("City");
33	        }
34	    }
35	
36	    public event PropertyChangedEventHandler PropertyChanged;
37	
38	    public void NotifyPropertyChanged(string propertyName)
39	    {
40	        if (PropertyChanged != null)
41	            PropertyChanged(this,new PropertyChangedEventArgs(propertyName));
42	    }
43	}

　　下面是 MainPage 的后置代码:

 

01 public partial class MainPage : UserControl 02 { 03 public MainPage() 04 { 05 InitializeComponent(); 06 07 Messenger.Default.Register<string>( 08 this,09 "MainWindow",10 msg => 11 { 12 NewCustomerView newCustomer = new NewCustomerView(); 13 newCustomer.Title = msg; 14 newCustomer.Show(); 15 }); 16 } 17 }

　　从上面的代码中可以看到，我使用 MvvmLight 的 Messenger 在主窗体中注册了一个消息接收者，用于接收 viewmodel 发来的消息并弹出子窗体。下面是子窗体 NewCustomerView 的后置代码：

 

01 public partial class NewCustomerView : ChildWindow 02 { 03 public NewCustomerView() 04 { 05 InitializeComponent(); 06 07 Messenger.Default.Register<Customer>( 08 this,09 "ChildWindow",10 msg => 11 { 12 this.DialogResult = true; 13 }); 14 } 15 }

　　我同样在子窗体中也注册一个消息接收者，接收 viewmodel 发来的消息并关闭子窗体。注意主窗体中注册的消息接收者的 Token 为 “MainWindow”，子窗体中注册的消息接收者的 Token 为 “ChildWindow”，在 viewmodel 中发送消息时，只有与发送的消息的 Token 相同的接收者才收到消息。下面是 Mainviewmodel 的代码，这里只是为了演示，主窗体和子窗体共用了一个 viewmodel。

 

01 public class Mainviewmodel : viewmodelBase 02 { 03 public Mainviewmodel() 04 { 05 OKButtonCommand = new RelayCommand<Customer>(OKButtonClick); 06 NewCustomerCommand = new RelayCommand(NewCustomer); 07 08 _customer = new Customer(); 09 _customers = new ObservableCollection<Customer>(); 10 // 注册一个接收者 Token 为 ChildWindow 11 Messenger.Default.Register<Customer>(this,"ChildWindow",AddCustomer); 12 } 13 14 private void AddCustomer(Customer param) 15 { 16 _customers.Add(param); 17 RaisePropertyChanged("Customers"); 18 } 19 20 // customer list 21 private ObservableCollection<Customer> _customers; 22 public ObservableCollection<Customer> Customers 23 { 24 get 25 { 26 return _customers; 27 } 28 } 29 30 // customer model 31 private Customer _customer; 32 public Customer Model 33 { 34 get 35 { 36 return _customer; 37 } 38 set 39 { 40 _customer = value; 41 RaisePropertyChanged("Model"); 42 } 43 } 44 45 // add customer command 46 public RelayCommand NewCustomerCommand { get; private set; } 47 private void NewCustomer() 48 { 49 /* 50 * 发送一个字符串信息 New Customer 51 * Token 为 MainWindow 只有具有相同 Token 接收者都会接收到该信息 52 */ 53 Messenger.Default.Send("New Customer","MainWindow"); 54 } 55 56 public RelayCommand<Customer> OKButtonCommand { get; private set; } 57 private void OKButtonClick(Customer param) 58 { 59 /* 60 * 发送一个 Customer 信息 61 * Token 为 ChildWindow 只有具有相同 Token 接收者都会接收到该信息 62 */ 63 Messenger.Default.Send<Customer>(param,"ChildWindow"); 64 } 65 }

　　在 viewmodel 中也注册了一个消息接收者，用于接收子窗体返回的数据。viewmodel 中的 NewCustomerCommand 是绑定到主窗体的 NewCustomer 按钮的，单击按钮 NewCustomer 时调用 NewCustomer() 方法向主窗体发送一个消息， 主窗体接收到消息后弹出子窗体。viewmodel 中的 OKButtonCommand 是绑定到子窗体的 OKButton 的，单击按钮 OKButton 时调用 OKButtonClick() 向子窗体和 viewmodel 发送一个消息，子窗体接收到消息时关闭，viewmodel 接收到消息时将参数 Customer 添加 Customer 列表中。以下是按钮的事件绑定代码：

 

01 <Button Content="New Customer" Width="120" Height="30"> 02 <i:Interaction.Triggers> 03 <i:EventTrigger EventName="Click"> 04 <cmd:EventToCommand Command="{Binding NewCustomerCommand}" /> 05 </i:EventTrigger> 06 </i:Interaction.Triggers> 07 </Button> 08 09 <Button x:Name="OkButton" Content="OK" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,0" Grid.Row="1"> 10 <i:Interaction.Triggers> 11 <i:EventTrigger EventName="Click"> 12 <cmd:EventToCommand Command="{Binding OKButtonCommand}" CommandParameter="{Binding ElementName=Customer,Path=DataContext}" /> 13 </i:EventTrigger> 14 </i:Interaction.Triggers> 15 </Button>

　　本示例只是提供一个在 MVVM 模式下与子窗体交互的解决方法，这个解决方法也并不是纯粹的 MVVM，完整的示例请查看附件的示例代码。