使用Simple MVVM框架开发windows phone应用程序(2)
Simple MVVM下载安装
从http://simplemvvmtoolkit.codeplex.com/下载最新的安装包,最新的版本是2.1
安装完毕后,会自动在vs建立simple MVVM的template
创建第一个Simple MVVM项目
启动vs2010,选择Silverlight for Windows Phone--Mvvm
![3-1-2012 3-47-18 PM.png 3-1-2012 3-47-18 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/162330to470n6j2zzc6zgj.png)
创建成功后,解决方案如下:
![3-1-2012 3-48-25 PM.png 3-1-2012 3-48-25 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/1624115hc6cl64a45aaqar.png)
Simple MVVM自动把你的项目安装MVVM的要求分成各个文件夹。非常清晰
Views,Models,ViewModels文件夹就不用我多讲了吧,很清楚了。
Locators文件夹是用来关联View和ViewModel的
Services文件夹放了一个接口和一个实现接口的类,主要用来实现你应用程序的业务逻辑。采用了接口,所以在Locators文件夹里,可以通过IOC来实现接口的不同的实例化。本例子中没有使用IOC.
另外Simple MVVM新建的项目里,默认带了一个实现的例子,Customer
下面我们一步一步来,实现一个自己的页面。这个页面很简单就是单击一个按钮,显示一个list在页面上。
1) 在models文件夹,新增加一个Product类,这个类继承ModelBase<Product>
2) 使用mvvmprop code snippet增加两个属性:
ProductId (int)
ProductName (string)
![3-1-2012 3-58-36 PM.png 3-1-2012 3-58-36 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/162502rd86g1sl19g2z2k1.png)
3) 在Services文件夹增加一个接口IProductServiceAgent
![3-1-2012 4-00-01 PM.png 3-1-2012 4-00-01 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/16253444no1ftsonhe7co4.png)
4) 增加MockProductServiceAgent类实现接口IProductServiceAgent
![3-1-2012 4-08-54 PM.png 3-1-2012 4-08-54 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/162551fqsgzjqffjwuepky.png)
5) 右键单击ViewModels文件夹,选择新增一个item. 从模板中选择SimpleMvvmViewModel,名字改为ProductListViewModel
![3-1-2012 4-04-07 PM.png 3-1-2012 4-04-07 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/162630xykqk2z2yo5yylqd.png)
把注释的/* IXxxServiceAgent */ 换为IProductServiceAgent
在ProductListViewModel里使用mvvmprop code snippet增加一个Products属性。
增加一个LoadProducts()方法
![3-1-2012 4-10-00 PM.png 3-1-2012 4-10-00 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/1627017pwdoiuprn0s8dwo.png)
增加一个command用来绑定页面上button的click事件:
![3-1-2012 4-11-40 PM.png 3-1-2012 4-11-40 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/1627147tzjqd54pd7cayaa.png)
接下来,我们要绑定view和viewmodel直接的联系了。
在Locators文件夹下面,更改ViewModelLocator.cs的代码
增加下面的代码:
![3-1-2012 4-17-08 PM.png 3-1-2012 4-17-08 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/162739w2lk3x2ozzttwftx.png)
接下来,我们该创建一个页面,用来显示数据。添加一个页面,名字为:ProductListView.xaml
在页面上,引用以下命名空间,并且绑定Locator,用来关联view和view model
![3-1-2012 4-14-38 PM.png 3-1-2012 4-14-38 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/1628023w9xktkqkqti9hso.png)
然后在页面上增加一个button,单击加载数据,增加一个listbox显示数据,如图:
![3-1-2012 4-19-12 PM.png 3-1-2012 4-19-12 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/162816a145xr3r4u42ush5.png)
注意红色标注的地方。
大功告成,启动页面,看看效果,单击按钮,会加载数据再listbox
从http://simplemvvmtoolkit.codeplex.com/下载最新的安装包,最新的版本是2.1
安装完毕后,会自动在vs建立simple MVVM的template
创建第一个Simple MVVM项目
启动vs2010,选择Silverlight for Windows Phone--Mvvm
![3-1-2012 3-47-18 PM.png 3-1-2012 3-47-18 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/162330to470n6j2zzc6zgj.png)
创建成功后,解决方案如下:
![3-1-2012 3-48-25 PM.png 3-1-2012 3-48-25 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/1624115hc6cl64a45aaqar.png)
Simple MVVM自动把你的项目安装MVVM的要求分成各个文件夹。非常清晰
Views,Models,ViewModels文件夹就不用我多讲了吧,很清楚了。
Locators文件夹是用来关联View和ViewModel的
Services文件夹放了一个接口和一个实现接口的类,主要用来实现你应用程序的业务逻辑。采用了接口,所以在Locators文件夹里,可以通过IOC来实现接口的不同的实例化。本例子中没有使用IOC.
另外Simple MVVM新建的项目里,默认带了一个实现的例子,Customer
下面我们一步一步来,实现一个自己的页面。这个页面很简单就是单击一个按钮,显示一个list在页面上。
1) 在models文件夹,新增加一个Product类,这个类继承ModelBase<Product>
2) 使用mvvmprop code snippet增加两个属性:
ProductId (int)
ProductName (string)
![3-1-2012 3-58-36 PM.png 3-1-2012 3-58-36 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/162502rd86g1sl19g2z2k1.png)
3) 在Services文件夹增加一个接口IProductServiceAgent
![3-1-2012 4-00-01 PM.png 3-1-2012 4-00-01 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/16253444no1ftsonhe7co4.png)
4) 增加MockProductServiceAgent类实现接口IProductServiceAgent
![3-1-2012 4-08-54 PM.png 3-1-2012 4-08-54 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/162551fqsgzjqffjwuepky.png)
5) 右键单击ViewModels文件夹,选择新增一个item. 从模板中选择SimpleMvvmViewModel,名字改为ProductListViewModel
![3-1-2012 4-04-07 PM.png 3-1-2012 4-04-07 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/162630xykqk2z2yo5yylqd.png)
把注释的/* IXxxServiceAgent */ 换为IProductServiceAgent
在ProductListViewModel里使用mvvmprop code snippet增加一个Products属性。
增加一个LoadProducts()方法
![3-1-2012 4-10-00 PM.png 3-1-2012 4-10-00 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/1627017pwdoiuprn0s8dwo.png)
增加一个command用来绑定页面上button的click事件:
![3-1-2012 4-11-40 PM.png 3-1-2012 4-11-40 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/1627147tzjqd54pd7cayaa.png)
接下来,我们要绑定view和viewmodel直接的联系了。
在Locators文件夹下面,更改ViewModelLocator.cs的代码
增加下面的代码:
![3-1-2012 4-17-08 PM.png 3-1-2012 4-17-08 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/162739w2lk3x2ozzttwftx.png)
接下来,我们该创建一个页面,用来显示数据。添加一个页面,名字为:ProductListView.xaml
在页面上,引用以下命名空间,并且绑定Locator,用来关联view和view model
![3-1-2012 4-14-38 PM.png 3-1-2012 4-14-38 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/1628023w9xktkqkqti9hso.png)
然后在页面上增加一个button,单击加载数据,增加一个listbox显示数据,如图:
![3-1-2012 4-19-12 PM.png 3-1-2012 4-19-12 PM.png](http://122.70.156.176/attachment_remote/forum/201203/01/162816a145xr3r4u42ush5.png)
注意红色标注的地方。
大功告成,启动页面,看看效果,单击按钮,会加载数据再listbox