Mvvm Light Toolkit for wpfsilverlight系列之搭建mvvmlight开发框架

概述本章节，我将通过示例介绍如何搭建mvvmlight开发环境。示例中的我会针对wpf代码进行介绍，SL下有区别的地方我会注明，下载示例中会同时包含WPF和SL源代码，但是只会提供VS2010版本的示例程序。   前提条件：按照前一章节安装的模板和代码片段，或者下载 MVVM Light Toolkit V3 开发环境：VS2010/Blend4   为了方便大家了解框架结构，我将不使用mvvm项目模

本章节，我将通过示例介绍如何搭建mvvmlight开发环境。示例中的我会针对wpf代码进行介绍，SL下有区别的地方我会注明，下载示例中会同时包含WPF和SL源代码，但是只会提供VS2010版本的示例程序。

 

前提条件：按照前一章节安装的模板和代码片段，或者下载 MVVM Light Toolkit V3

开发环境：VS2010/Blend4

 

为了方便大家了解框架结构，我将不使用mvvm项目模板，而是从空白项目开始创建mvvm light项目，下面将以两种使用mvmmlight框架的方式进行说明（以下示例针对WPF，SL *** 作步骤跟WPF基本一样，不做过多说明，大家可以在文章最后下载代码对照阅读）：

 

1、在VS2010中，文件/新建/WPF/Silverlight应用程序项目，项目名称MvvmlightDataBinding.SL4/MvvmlightDataBinding.WPF4

 

2、添加mvvmlight引用，如果使用模板创建，会自动生成引用，而这里我们需要自己添加，这里我将MVVM Light Toolkit V3的源代码附到了示例中，因此，直接添加项目引用就可以了，如果要支持Blend的功能，还需要添加System.windows.Interactivity.dll引用，如果安装了Blend，在.net引用列表中能找到，没有安装Blend，在示例中解决方案目录/AssemblIEs/galaSoft.Mvvmlight/External中能找到，添加后引用列表如下：

 

3、在解决方案浏览器中，右键项目名称，添加新文件夹，文件夹名称为viewmodel

 

4、在解决方案浏览器中，右键项目名称，添加新文件夹，文件夹名称为VIEw

 

5、为MainWindow添加viewmodel，在解决方案浏览器中，右键viewmodel文件夹，添加新类，类名称为Mainviewmodel，如果安装了mvvmlight模板，选择类模板为Mvvmviewmodel

自动创建的代码如下：

[c-sharp]  view plain copy using galaSoft.Mvvmlight;      namespace MvvmlightDataBinding.WPF4.viewmodel   {       public class Mainviewmodel : viewmodelBase       {           /// <summary>           /// Initializes a new instance of the Mainviewmodel class.   /// </summary>           public Mainviewmodel()           {               ////if (IsInDesignmode)               ////{   ////    // Code runs in Blend --> create design time data.   ////}   ////else   ////    // Code runs "for real": Connect to service, etc...           }      overrIDe voID Cleanup()   // Clean own resources if needed               base.Cleanup();           }       }   }           

代码很简单，我去掉了类注释，它是一个框架，继承自viewmodelBase，如果没装类模板，可以直接复制以上代码。

 

6、添加类viewmodelLocator，我们叫它viewmodel加载器，在解决方案浏览器中，右键项目名称，添加新类，类名称为viewmodelLocator，如果安装了mvvmlight模板，选择类模板为MvvmviewmodelLocator，自动创建的代码如下：

copy {    class viewmodelLocator   /// Initializes a new instance of the viewmodelLocator class.   public viewmodelLocator()   ////if (viewmodelBase.IsInDesignmodeStatic)   ////    // Create design time vIEw models   ////    // Create run time vIEw models   /// <summary>   /// Cleans up all the resources.   /// </summary>           static voID Cleanup()           {   // Call Clearviewmodelname() for each viewmodel.       }   }  

在Cleanup方法下面添加Mainviewmodel加载方法，这里要用到我们安装的代码片段，在类的空白处输入mvvm，在d出的代码提示中选择mvvmlocatorproperty，如下：

 

然后按2次tab键，会自动Mainviewmodel加载方法，代码片段要设置的地方有3个，他们以黄色背景高亮显示，其他相关联地方会自动保持与这3个地方一致，生成的方法如下：

copy #region Mainviewmodel   private static Mainviewmodel _main;   /// Gets the Main property.   static Mainviewmodel MainStatic               get               {                   if (_main == null)                   {                       CreateMain();                   }                   return _main;               }           [System.Diagnostics.CodeAnalysis.SuppressMessage(@H_865_419@"Microsoft.Performance",               @H_865_419@"CA1822:MarkMembersAsstatic",               Justification = @H_865_419@"This non-static member is needed for data binding purposes.")]   public Mainviewmodel Main   get               {   return MainStatic;   /// ProvIDes a deterministic way to delete the Main property.   voID ClearMain()               _main.Cleanup();               _main = null;   /// ProvIDes a deterministic way to create the Main property.   voID CreateMain()   null)                   _main = new Mainviewmodel();     #endregion  

 

7、打开App.Xaml，先添加viewmodel命名控件引用，然后为viewmodelLocator添加一个全局的资源，app.xaml的内容如下：

[xhtml]  copy <Application x:Class="MvvmlightDataBinding.WPF4.App"                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"                xmlns:vm="clr-namespace:MvvmlightDataBinding.WPF4.viewmodel"                xmlns:d="http://schemas.microsoft.com/Expression/blend/2008"                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"                mc:Ignorable="d"                StartupUri="MainWindow.xaml">     Application.Resources>       <!--全局 VIEw Model 加载器-->       vm:viewmodelLocator x:Key="Locator"                   d:IsDataSource="True" />   </ Application>  

 

8、打开MainWindow.xaml文件，首先为MainWindow设置DataContext为Mainviewmodel，当然也可以为GrID设置DataContext，只要我们使用的时候，他在视觉树中可见的范围内，MainWindow.xaml代码如下:

copy <Window x:Class=@H_865_419@"MvvmlightDataBinding.WPF4.MainWindow"           xmlns=@H_865_419@"http://schemas.microsoft.com/winfx/2006/xaml/presentation"           xmlns:x=@H_865_419@"http://schemas.microsoft.com/winfx/2006/xaml"           Title=@H_865_419@"MainWindow" Height=@H_865_419@"250" WIDth=@H_865_419@"300"           DataContext=@H_865_419@"{Binding Main,Source={StaticResource Locator}}">     <GrID>       <TextBlock FontSize=@H_865_419@"16" Text=@H_865_419@"{Binding WelcomText}"/>     </GrID>   </Window>  

我在窗体中放了一个TextBlock，TextBlock的Text属性绑定到WelcomText，这个WelcomText应该是DataContext对象的WelcomText属性，这里TextBlock从视觉树最顶层也就是Window继承DataContext绑定，因此这里绑定的WelcomText也就是Mainviewmodel的WelcomText属性，因此我们需要在Mainviewmodel中添加WelcomText属性，修改Mainviewmodel代码如下：

copy string WelcomText   get;       set;   }   /// Initializes a new instance of the Mainviewmodel class.   public Mainviewmodel()   if (IsInDesignmode)   // Code runs in Blend --> create design time data.           WelcomText = @H_865_419@"设计时的值";   else       {   // Code runs "for real": Connect to service,108); List-style:decimal-leading-zero outsIDe; color:inherit; line-height:18px">         WelcomText = @H_865_419@"运行时的值";   }  

注意这里IsInDesignmode是判断当前环境是否是设计模式，这在界面和逻辑分离时非常实用，比如当业务逻辑开发未完成时，界面设计人员也可以进行设计，这时只需在IsInDesignmode为True时创造一些测试数据就可以了，同时也实现了所见即所得的界面设计模式；示例中我们在设计时和运行时窗体显示不同的值：

 

设计时截图如下：

 

运行时截图如下：

 

OK，到这里我们已经完成搭建Mvvmlight框架了，接着我们继续看不使用viewmodelLocator来搭建Mvvm环境：

 

1~5步与前面搭建标准Mvvmlight框架一样。

 

6、这里我们不创建viewmodelLocator，直接打开app.xaml.cs，添加如下代码：

copy protected voID OnStartup(StartupEventArgs e)   base.OnStartup(e);               MainWindow = new MainWindow();               MainWindow.Show();               MainWindow.DataContext = new viewmodel.Mainviewmodel();           }  

 

在App.xaml中去掉StarupUri属性设置。

 

7、修改MainWindow.xaml，完整代码如下：

copy <Window x:Class=@H_865_419@"normalMVVM.WPF4.MainWindow"           Title=@H_865_419@"MainWindow" Height=@H_865_419@"350" WIDth=@H_865_419@"525"           xmlns:vm=@H_865_419@"clr-namespace:normalMVVM.WPF4.viewmodel"           xmlns:d=@H_865_419@"http://schemas.microsoft.com/Expression/blend/2008"           xmlns:mc=@H_865_419@"http://schemas.openxmlformats.org/markup-compatibility/2006"           mc:Ignorable=@H_865_419@"d"           d:DataContext=@H_865_419@"{d:DesignInstance Type=vm:Mainviewmodel, IsDesignTimeCreatable=True}">       <TextBlock HorizontalAlignment=@H_865_419@"Center" VerticalAlignment=@H_865_419@"Center" FontSize=@H_865_419@"36" Text=@H_865_419@"{Binding WelcomText}"/>   </Window>  

注意这里没有使用全局的viewmodelLocator，要在设计时显示viewmodel的内容，需要使用d:DataContext创建一个设计时的实例，这个实例只有在设计时有效，在运行时MainWindow仍然使用app.xaml.cs中动态创建的viewmodel

 

 

OK，运行示例，得到与前面示例相同的结果。

 

 

综合看这两种方法，第一个是将viewmodel定义为静态的全局变量，第二个是动态创建，这里不谈孰优孰劣，我觉得应该灵活运用，一个项目往往包含很多个VIEw和viewmodel，全部都定义为静态并不合适，因此我一般都是两种方法混合使用

 

 

至此，我们应该已经知道搭建和使用mvvmlight框架了，下一章节将介绍mvvm下的数据绑定，以下是本章节的源代码下载：

 

http://download.csdn.net/source/3246642

总结

以上是内存溢出为你收集整理的Mvvm Light Toolkit for wpf/silverlight系列之搭建mvvmlight开发框架全部内容，希望文章能够帮你解决Mvvm Light Toolkit for wpf/silverlight系列之搭建mvvmlight开发框架所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。