本章节,我将通过示例介绍如何搭建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开发框架所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)