MVVM模式在Windows Phone 7上的简单实现

苏童

做WPF/Silverlight/Windows Phone 7 这种Markup+Code类型的项目，程序员和Blend的Designer配合起来有时候真是一个“抓狂”，最近研究了MVVM模式后深切体会到这个模式的优越性，我研究不不是很深，希望走过路过的高手多多指教！

先贴个图：





按照MVVM模式的思想编写的程序应该在思想上抛弃Xaml文件的code behind（即xaml.cs）文件，这样才能让coder和designer各尽其能。coder需要做的就是在designer设计好的xaml文件里对UI控件的值进行Binding，这里应该会用到Command和Behavior。

在我要做到例子里，我需要对UI的Event监听，实现方法将event绑定到Command（这里需要用到一个MVVM Light Toolkit框架, GalaSoft.MvvmLight, 此下载的文件中包括WPF/Silverlight/WP7的dll版本），而不是用原来的注册event事件（当然这也是MVVM的思想）。关于MVVM Light Toolkit,可以看这篇文章。

接下来我开始展示一个小Demo：

1. 首先看一下我的项目目录及引用的程序集:



2. view里的ContractsItem， 这个view是展示每个联系人的控件，这个控件很简单，只是简单的绑定了姓名和电话  



View Code



1   
14     
15         
16     
17   
18     
19         
20            
21                 
25            
26         
27         
28         
29            
30            
31         
32     
33  


3. view里的ContractsList.xaml，这个view负责显示所有的联系人列表，列表的数据加载方式有两种，一种是用command绑定viewmodel的command，另一种是让viewmodel实现IEnumerable接口，这两种方法我都例子里都会有所显示





View Code



1
17
18     
19                  
20            
21                 
22                                   
23                 
24            
25            
26            
27         
28         
30         
35            
36                 
37                     
38                 
39            
40            
41            
42                 
43                     
44                 
45            
46         
47     
48  




4. ViewModel: ContactsListViewModel.cs 类中定义了Command及IEnumerable的方法



View Code



1 using System;
2  using System.Net;
3  using System.Windows;
4  using System.Windows.Controls;
5  using System.Windows.Documents;
6  using System.Windows.Ink;
7  using System.Windows.Input;
8  using System.Windows.Media;
9  using System.Windows.Media.Animation;
10  using System.Windows.Shapes;
11 using System.Collections.Generic;
12 using TwitterPlatform.Model;
13 using System.Collections.ObjectModel;
14 using System.ComponentModel;
15 using TwitterPlatform.Commands;
16
17 namespace TwitterPlatform.ViewModel
18 {
19     public class ContactsListViewModel : IEnumerable
20     {
21
22         public ContactsListViewModel()
23         {
24             this.LoadedCommand = new ShowMessageCommand();
25         }
26
27         public ShowMessageCommand LoadedCommand { get; private set; }
28
29         //GetEnumerator() 加载数据
30         public IEnumerator GetEnumerator()
31         {
32             var l = new List(){
33                         new Person() { Name="Michael", Tel="1234567890" },
34                         new Person() { Name="dali", Tel="1234567890" },
35                         new Person() { Name="houjun", Tel="1234567890" },
36                         new Person() { Name="tony", Tel="1234567890" },
37                         new Person() { Name="jing", Tel="1234567890" },
38                         new Person() { Name="Joel", Tel="98564875" }
39                     };
40             l.Sort();
41             return l.GetEnumerator();
42         }
43
44         System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
45         {
46             return this.GetEnumerator();
47         }
48     }
49 }






5. Person类里只定义了Name和Tel两个属性～～

6. 最后是负责显示list的MainPage 了，在这个page里我用了个Paronama，小戏一下呵呵



View Code



1  
5         
6            
7                 
8                     
9                 
10                 
11                     
12                 
13                 
14
15                 
16                 
17
18                 
19            
20
21         
22     
23  




以上就是这个小小的Demo，简单的实现了MVVM模式，在这个Demo里主要实现了Event To Command，也是MVVM模式经常用到的东西。

如果有时间我会再做一个更加详细的大一点点demo，呵呵

欢迎讨论～～



源码下载