微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Mvvm Light Toolkit for wpf/silverlight系列之搭建mvvmlight开发框架

本章节,我将通过示例介绍如何搭建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
  1. using galaSoft.MvvmLight;  
  2.   
  3. namespace MvvmlightDataBinding.WPF4.viewmodel  
  4. {  
  5.     public class Mainviewmodel : viewmodelBase  
  6.     {  
  7.         /// <summary>  
  8.         /// Initializes a new instance of the Mainviewmodel class.  
  9. /// </summary>  
  10.         public Mainviewmodel()  
  11.         {  
  12.             ////if (IsInDesignMode)  
  13.             ////{  
  14. ////    // Code runs in Blend --> create design time data.  
  15. ////}  
  16. ////else  
  17. ////    // Code runs "for real": Connect to service, etc...  
  18.         }  
  19.   
  20. override void Cleanup()  
  21. // Clean own resources if needed  
  22.             base.Cleanup();  
  23.         }  
  24.     }  
  25. }  
        

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

 

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

copy
    {   
  1. class viewmodelLocator  
  2. /// Initializes a new instance of the viewmodelLocator class.  
  3. public viewmodelLocator()  
  4. ////if (viewmodelBase.IsInDesignModeStatic)  
  5. ////    // Create design time view models  
  6. ////    // Create run time view models  
  7. /// <summary>  
  8. /// Cleans up all the resources.  
  9. /// </summary>  
  10.         static void Cleanup()  
  11.         {  
  12. // Call ClearviewmodelName() for each viewmodel.  
  13.     }  
  14. }  

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

 

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

copy
    #region Mainviewmodel  
  1. private static Mainviewmodel _main;  
  2. /// Gets the Main property.  
  3. static Mainviewmodel MainStatic  
  4.             get  
  5.             {  
  6.                 if (_main == null)  
  7.                 {  
  8.                     CreateMain();  
  9.                 }  
  10.                 return _main;  
  11.             }  
  12.         [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Performance",  
  13.             "CA1822:MarkMembersAsstatic",  
  14.             Justification = "This non-static member is needed for data binding purposes.")]  
  15. public Mainviewmodel Main  
  16. get  
  17.             {  
  18. return MainStatic;  
  19. /// Provides a deterministic way to delete the Main property.  
  20. void ClearMain()  
  21.             _main.Cleanup();  
  22.             _main = null;  
  23. /// Provides a deterministic way to create the Main property.  
  24. void CreateMain()  
  25. null)  
  26.                 _main = new Mainviewmodel();  
  27.  
  28. #endregion  

 

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

[xhtml]  copy
    <Application x:Class="MvvmlightDataBinding.WPF4.App"  
  1.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  2.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  3.              xmlns:vm="clr-namespace:MvvmlightDataBinding.WPF4.viewmodel"  
  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.              StartupUri="MainWindow.xaml">  
  8.   Application.Resources>  
  9.     <!--全局 View Model 加载器-->  
  10.     vm:viewmodelLocator x:Key="Locator"  
  11.                 d:IsDataSource="True" />  
  12. </ Application>  

 

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

copy
    <Window x:Class="MvvmlightDataBinding.WPF4.MainWindow"  
  1.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  2.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  3.         Title="MainWindow" Height="250" Width="300"  
  4.         DataContext="{Binding Main,Source={StaticResource Locator}}">  
  5.   <Grid>  
  6.     <TextBlock FontSize="16" Text="{Binding WelcomText}"/>  
  7.   </Grid>  
  8. </Window>  

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

copy
    string WelcomText  
  1. get;  
  2.     set;  
  3. }  
  4. /// Initializes a new instance of the Mainviewmodel class.  
  5. public Mainviewmodel()  
  6. if (IsInDesignMode)  
  7. // Code runs in Blend --> create design time data.  
  8.         WelcomText = "设计时的值";  
  9. else  
  10.     {  
  11. // Code runs "for real": Connect to service,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px">         WelcomText = "运行时的值";  
  12. }  

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

 

设计时截图如下:

 

运行时截图如下:

 

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

 

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

 

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

copy
    protected void OnStartup(StartupEventArgs e)  
  1. base.OnStartup(e);  
  2.             MainWindow = new MainWindow();  
  3.             MainWindow.Show();  
  4.             MainWindow.DataContext = new viewmodel.Mainviewmodel();  
  5.         }  

 

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

 

7、修改MainWindow.xaml,完整代码如下:

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

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

 

 

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

 

 

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

 

 

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

 

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐