Silverlight实用窍门系列：52.Silverlight中的MVVM框架极速入门(以MVVM Light Toolkit为例)

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

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

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

本文转自程兴亮 51CTO博客，原文链接:http://blog.51cto.com/chengxingliang/826890