搭建简易MVVM项目

　　由于最近一直在学习Windows Phone相关知识，而伴随着WIN8的发布，新一代的编程使得很多语言使用唯一的核心库“Winmd”以及可以基于WINRT之上的AppStore环境设计。

　　而MVVM是一种架构模式，主要在WPF、Silverlight和WP7开发里使用，它的目标是从视图层移除几乎所有代码隐藏（code-behind）。交互设计师可以专注于使用XAML表达用户体验需求，然后创建和视图模型的绑定，而视图模型则是由应用程序开发者开发和维护的，最大好处之一是分离关注点，以便用户体验设计师和应用程序开发者可以并行工作。

　　稍微了解MVVM以后，我们就开始着手实现MVVM吧。实现的功能就挑选登录功能吧。

　　项目结构如下：

　　

　　首先我们创建一个LoginUser类，由于需要绑定到相关的控件上，且在控件的值或实体类属性发生改变时，需要得到同步的更新，因此我们需要让实体类实现INotifyPropertyChange接口，代码如下：

View Code 
 1 public class BaseModel : INotifyPropertyChanged
 2 {
 3     public event PropertyChangedEventHandler PropertyChanged;
 4 
 5     protected void OnPropertyChanged(string propertyName)
 6     {
 7         if (null != PropertyChanged)
 8         {
 9             PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
10         }
11     }
12 }
13 
14 
15 public class LoginUser : BaseModel
16 {
17     private string m_Name;
18     public string Name
19     {
20         set
21         {
22             if (null != value)
23             {
24                 m_Name = value;
25                 OnPropertyChanged("Name");
26             }
27         }
28         get { return m_Name; }
29     }
30 
31     private string m_Password;
32     public string Password
33     {
34         set
35         {
36             if (null != value)
37             {
38                 m_Password = value;
39                 OnPropertyChanged("Password");
40             }
41         }
42         get { return m_Password; }
43     }
44 }

　　接着我们要使用xmal编码界面，具体的UI代码如下：

View Code 
 1 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"
 2       HorizontalAlignment="Center"
 3       VerticalAlignment="Center">
 4 
 5     <Grid.RowDefinitions>
 6         <RowDefinition Height="auto"/>
 7         <RowDefinition Height="auto"/>
 8         <RowDefinition Height="auto"/>
 9     </Grid.RowDefinitions>
10     <Grid.ColumnDefinitions>
11         <ColumnDefinition Width="60"/>
12         <ColumnDefinition Width="120"/>
13         <ColumnDefinition Width="180"/>
14     </Grid.ColumnDefinitions>
15 
16     <TextBlock Name="txtblkName"
17                Grid.Row="0"
18                Grid.Column="0"
19                VerticalAlignment="Center"
20                Text="用户名"/>
21     <TextBox Name="txtName"
22              Grid.Row="0"
23              Grid.Column="1"
24              Grid.ColumnSpan="2"/>
25 
26     <TextBlock Name="txtblkPwd"
27                Grid.Row="1"
28                Grid.Column="0"
29                VerticalAlignment="Center"
30                Text="密码"/>
31     <TextBox Name="txtPwd"
32              Grid.Row="1"
33              Grid.Column="1"
34              Grid.ColumnSpan="2"/>
35 
36     <Button Grid.Row="2"
37             Grid.Column="0"
38             Grid.ColumnSpan="2"
39             Content="登录"/>
40     <Button Grid.Row="2"
41             Grid.Column="2"
42             Content="重置"/>
43 </Grid>

　　从XAML代码中，我们需要绑定2个文本的Text以及要绑定2个Button的事件，对于要绑定到控件的对象必须实现ICommand接口。

　　登录的时候，我们需要判断用户名密码是否正确，如果正确的话，则执行登录并跳转到其他的页面，如果帐号密码不正确则要求提示，代码如下：

View Code 
 1 public class LoginCommand : ICommand                                                    
 2 {                                                                                       
 3     private LoginUser m_User = null;                                                    
 4     public event EventHandler CanExecuteChanged;                                        
 5                                                                                         
 6     public LoginCommand(LoginUser user)                                                 
 7     {                                                                                   
 8         m_User = user;                                                                  
 9     }                                                                                   
10                                                                                         
11     public bool CanExecute(object parameter)                                            
12     {                                                                                   
13         return true;                                                                    
14     }                                                                                   
15                                                                                         
16     public void Execute(object parameter)                                               
17     {                                                                                   
18         if (m_User.Name != "ahl5esoft" || m_User.Password != "123456")                  
19         {                                                                               
20             MessageBox.Show("帐号或密码错误!");                                         
21         }                                                                               
22         else                                                                            
23         {                                                                               
24             MessageBox.Show("登录成功");                                                
25         }                                                                               
26     }                                                                                   
27                                                                                         
28     public void RaiseCanExecuteChanged()                                                
29     {                                                                                   
30         if (null != CanExecuteChanged)                                                  
31         {                                                                               
32             CanExecuteChanged(this, EventArgs.Empty);                                   
33         }                                                                               
34     }                                                                                   
35 }

　　重置按钮跟登录代码差不多，只是Execute对LoginUser重新实例化了，这里就省略了。有以上的Command实现，我们不难发现，其实大部分的实现代码都是差不多，只是实现的CanExecute、Execute方法有所不同，那么我们可以重构出一个基类，代码如下：

View Code 
 1 public class DelegateCommand : ICommand                                      
 2 {                                                                            
 3     private readonly Func<bool> m_canExecute;                                
 4     private readonly Action m_execute;                                       
 5     public event EventHandler CanExecuteChanged;                             
 6                                                                              
 7     public DelegateCommand(Action execute, Func<bool> canExecute = null)     
 8     {                                                                        
 9         if (null == execute)                                                 
10             throw new ArgumentNullException("execute", "Cannot be null");    
11                                                                              
12         m_execute = execute;                                                 
13         m_canExecute = canExecute;                                           
14     }                                                                        
15                                                                              
16     [DebuggerStepThrough]                                                    
17     public bool CanExecute(object parameter)                                 
18     {                                                                        
19         return null == m_canExecute || m_canExecute();                       
20     }                                                                        
21                                                                              
22     public void Execute(object parameter)                                    
23     {                                                                        
24         m_execute();                                                         
25     }                                                                        
26                                                                              
27     public void RaiseCanExecuteChanged()                                     
28     {                                                                        
29         if (null != CanExecuteChanged)                                       
30         {                                                                    
31             CanExecuteChanged(this, EventArgs.Empty);                        
32         }                                                                    
33     }                                                                        
34 }

　　以上我们用一个Action替代了Execute内部的实现，然后用Func<bool>来替代CanExecute的实现，但是大家这时候会发现，如果我们在绑定Command的时候传入参数那该怎么办呢，因此我们这里还要提供一个泛型版本的基类，来处理传入参数的情况，代码如下：

View Code 
 1 public class DelegateCommand<T> : ICommand
 2 {
 3     private readonly Predicate<T> m_canExecute;
 4     private readonly Action<T> m_execute;
 5     public event EventHandler CanExecuteChanged;
 6 
 7     public DelegateCommand(Action<T> execute, Predicate<T> canExecute = null)
 8     {
 9         if (null == execute)
10             throw new ArgumentNullException("execute", "Cannot be null");
11 
12         m_execute = execute;
13         m_canExecute = canExecute;
14     }
15 
16     public bool CanExecute(object parameter)
17     {
18         return null == m_canExecute || m_canExecute((T)parameter);
19     }
20 
21     public void Execute(object parameter)
22     {
23         m_execute((T)parameter);
24     }
25 
26     public void RaiseCanExecuteChanged()
27     {
28         if (null != CanExecuteChanged)
29         {
30             CanExecuteChanged(this, EventArgs.Empty);
31         }
32     }
33 }

　　完成了以上的Command基类以后，我们只要删除原有的LoginCommand，并相应的修改LoginUserViewModel内的代码，修改如下：

View Code 
 1 private ICommand m_LoginCommand = null;
 2 public ICommand LoginCommand
 3 {
 4     get
 5     {
 6         if (null == m_LoginCommand)
 7         {
 8             m_LoginCommand = new DelegateCommand(() =>
 9             {
10                 if (m_User.Name != "ahl5esoft" || m_User.Password != "123456")
11                 {
12                     MessageBox.Show("帐号或密码错误!");
13                 }
14                 else
15                 {
16                     MessageBox.Show("登录成功");
17                 }
18             });
19         }
20         return m_LoginCommand;
21     }
22 }

　　完成了ViewModel，我们只要将ViewModel赋值给Page的DataContext，并调整XAML内的绑定就将这个简易的MVVM完成啦，XAML代码如下：

View Code 
 1 <TextBlock Name="txtblkName"
 2            Grid.Row="0"
 3            Grid.Column="0"
 4            VerticalAlignment="Center"
 5            Text="用户名"/>
 6 <TextBox Name="txtName"
 7          Grid.Row="0"
 8          Grid.Column="1"
 9          Grid.ColumnSpan="2"
10          Text="{Binding Path=User.Name, Mode=TwoWay}"/>
11 
12 <TextBlock Name="txtblkPwd"
13            Grid.Row="1"
14            Grid.Column="0"
15            VerticalAlignment="Center"
16            Text="密码"/>
17 <PasswordBox Name="txtPwd"
18              Grid.Row="1"
19              Grid.Column="1"
20              Grid.ColumnSpan="2"
21              Password="{Binding Path=User.Password, Mode=TwoWay}" />

　　以上在绑定TextBox以及PasswordBox的时候，我们选择了TwoWay的方式，是为了在控件的值或LoginUser的值发生改变时，都能收到通知，使控件与LoginUser的值能达到同步。

　　另一方面，对于MVVM不足之处在于它对于UI操作比较简单的情况有点杀鸡用牛刀的感觉，数据绑定有点难以调试，以及大量使用数据绑定可能带来性能问题等等，虽然有着众多的不足，但是能理解它也是有好处的。

　　那么今天的简易MVVM就到这里啦，由于大部分的代码已经贴出，因此就不再提供源代码了，如有什么误解或者错误的观点还望指出，谢谢。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/ahl5esoft/p/2684527.html