在本文将以MVVM Light Toolkit为例讲解MVVM框架在现实中的使用入门,首先我们在http://mvvmlight.codeplex.com/下载它的MVVM框架下来。也可以通过 http://files.cnblogs.com/chengxingliang/GalaSoft.MvvmLight.V3.rar 下载MVVM Light Toolkit。然后我们安装这个安装包,然后重新打开VS2010,新建一个项目,如下图所示:

   Tip:MVVM分为Model、ViewMode、View三层。

        •Model是实体类层,它存放所有需要用到的实体类。

        •ViewMode层是逻辑层,操作所有Model层和View界面层的逻辑运算并且作为一个大的实体类,提供属性绑定到View层上面去。

        •View层是界面显示层,只需要它的Xaml代码去绑定相应的ViewMode层的属性即可。

        下面我们来看新建成功的项目结构如下:

        一、在这里我们先来看MainPage.xaml中的代码,在这里绑定的MainPage.xaml是View层,它绑定上了ViewModel层,也就是MainViewModel.cs类

 

  1. <UserControl x:Class="MvvmLight1.MainPage" 
  2.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  4.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  5.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  6.              mc:Ignorable="d" 
  7.              Height="300" 
  8.              Width="300" 
  9.              DataContext="{Binding Main, Source={StaticResource Locator}}"
  10.     <!--在这里绑定App.xaml中的静态资源,以连接MainViewModel类(ViewMode层)  MainPage.xaml代码为View层--> 
  11.      
  12.      
  13.     <UserControl.Resources> 
  14.         <ResourceDictionary> 
  15.             <ResourceDictionary.MergedDictionaries> 
  16.                 <ResourceDictionary Source="Skins/MainSkin.xaml" /> 
  17.             </ResourceDictionary.MergedDictionaries> 
  18.         </ResourceDictionary> 
  19.     </UserControl.Resources> 
  20.  
  21.     <Grid x:Name="LayoutRoot"
  22.  
  23.         <TextBlock FontSize="36" 
  24.                    FontWeight="Bold" 
  25.                    Foreground="Purple" 
  26.                    Text="{Binding Welcome}" 
  27.                    VerticalAlignment="Center" 
  28.                    HorizontalAlignment="Center" 
  29.                    TextWrapping="Wrap" Margin="12,25,20,171" /> 
  30.         <Button Content="{Binding BtnContent}" Height="23" HorizontalAlignment="Left" Margin="12,178,0,0" 
  31.                 Command="{Binding ShowMessage}" Name="button1" VerticalAlignment="Top" Width="75" /> 
  32.         <Button Content="点我改变文字" Height="23" HorizontalAlignment="Left" Command="{Binding ChangeText}" 
  33.                 Margin="187,178,0,0" Name="button2" VerticalAlignment="Top" Width="75" /> 
  34.     </Grid> 
  35. </UserControl> 

        二、然后我们看ViewModel层,在这里我们申明了一些string属性以绑定到View层得显示内容上,然后对于鼠标的点击事件采用Command 命令传递事件和处理方法,并且设置绑定。这样我们可以直接将前台的点击事件等和后台分离,并且我们可以继承INotifyPropertyChanged 接口,以让ViewModel层的属性被改变的时候,也反映到View层,在Command方法中改变ViewModel层的属性即可改变View层的前 台显示。其具体的详解在下面的代码中已经给出。

 

  1. using GalaSoft.MvvmLight; 
  2. using System.Windows.Input; 
  3. using GalaSoft.MvvmLight.Command; 
  4. using System.Windows; 
  5. using System.ComponentModel; 
  6.  
  7. namespace MvvmLight1.ViewModel 
  8.     /// <summary> 
  9.     /// This class contains properties that the main View can data bind to
  10.     /// <para> 
  11.     /// Use the <strong>mvvminpc</strong> snippet to add bindable properties to this ViewModel. 
  12.     /// </para> 
  13.     /// <para> 
  14.     /// You can also use Blend to data bind with the tool's support. 
  15.     /// </para> 
  16.     /// <para> 
  17.     /// See http://www.galasoft.ch/mvvm/getstarted 
  18.     /// </para> 
  19.     /// </summary> 
  20.     public class MainViewModel : ViewModelBase, INotifyPropertyChanged 
  21.  
  22.     { 
  23.         public string Welcome 
  24.         { 
  25.             get 
  26.             { 
  27.                 return "欢迎使用MVVM Light! "
  28.             } 
  29.         } 
  30.  
  31.         /// <summary> 
  32.         /// 类初始化 
  33.         /// </summary> 
  34.         public MainViewModel() 
  35.         { 
  36.             _btnContent = "点击我"
  37.             RegistCommand(); 
  38.         } 
  39.  
  40.         //A.对于属性的绑定 
  41.         private string _btnContent; 
  42.         public string BtnContent 
  43.         { 
  44.             set 
  45.             { 
  46.                 _btnContent = value; 
  47.                 NotifyPropertyChanged("BtnContent"); 
  48.  
  49.             } 
  50.             get 
  51.             { 
  52.                 return _btnContent; 
  53.             } 
  54.         } 
  55.  
  56.         //B.1申明对于点击事件的绑定 
  57.         public RelayCommand ShowMessage { get; set; } 
  58.         //使用C步骤的注册,将Command和需要运行的方法联系起来。 
  59.         private void showmsg() 
  60.         { 
  61.             MessageBox.Show("你成功的将命令绑定到界面层!"); 
  62.         } 
  63.  
  64.         //B.2改变界面上的控件显示文字 
  65.         public RelayCommand ChangeText { get; set; } 
  66.         //执行改变文字操作 
  67.         private void changeTxt() 
  68.         { 
  69.             BtnContent = "我已经被改变了"
  70.         } 
  71.         //是否可以改变文字 
  72.         private bool canchangeTxt() 
  73.         { 
  74.             if (BtnContent == "点击我"
  75.             { 
  76.                 return true
  77.             } 
  78.             else 
  79.             { 
  80.                 return false
  81.             } 
  82.         } 
  83.  
  84.         //C.对于所有的事件进行注册 
  85.         private void RegistCommand() 
  86.         { 
  87.             //C.1指定需要执行的函数showmsg() 
  88.             ShowMessage = new RelayCommand(() => showmsg()); 
  89.             //先执行canchangeTxt()函数,验证是否可以改变文字,如果可以改变则执行changeTxt()函数 
  90.             ChangeText = new RelayCommand(() => changeTxt(), () => canchangeTxt()); 
  91.         } 
  92.  
  93.          
  94.         public event PropertyChangedEventHandler PropertyChanged; 
  95.         public void NotifyPropertyChanged(string propertyName) 
  96.         { 
  97.             if (PropertyChanged != null
  98.             { 
  99.                 PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
  100.             } 
  101.         } 
  102.  
  103.     } 

        三、在这里我们没有使用到Model层,它用于构造实体集合以绑定诸如DataGrid之类的控件。

        最后我们来看实例的运行效果如下,如需源码请点击 MvvmLight1.rar 下载。