WPF程序中使用MVVM模式

        前两周有个紧急项目,项目到我们手上时离最后交付日期只有三周,虽然功能很简单就几个页面,但需要做的还是很多。于是临时找了北京的同事帮忙做界面,我们这边负责做后台通信和消息分发。上周合并代码一看,发现界面代码有点乱,各种贴代码的痕迹,有很明显的MVVM框架的样子,但用的有些混乱,看他的代码自己也迷糊了一阵,因为MVVM只是了解点(我还以为是我理解错了的,我们前几个项目都是采用Winform的思维做的项目)。于是花了几个晚上研究了下,并写成 Demo(各位可下载下来对照代码自行研究),以便后用。

        首先什么是MVVM,MVVM解决了什么问题。MVVM是Model、View和连接两者的ViewModel组成,Model负责提供数据的业务逻辑,View负责页面的显示,ViewModel连接View和Model,ViewModel通过调用Model获得页面所需要的数据并通过View中的绑定将数据显示到页面上。

        如何做到页面与逻辑分离的呢,理想状态下,View层的Code-Behind文件中只有在构造函数中调用初始UI元素的一行代码及设置View层的DataContext为对应的ViewModel。这样美工可根据原始设计图去做相应的美化设计,设计好直接替换即可。当然了还有一个好处就是可以方便的进行单元测试。
        一个完整的三层效果如下:
        View层(数据和事件都通过绑定实现):

WPF程序中使用MVVM模式_第1张图片

WPF程序中使用MVVM模式_第2张图片
        ViewModel层(注意看圈出来的,圈出来的是View页面所绑定的属性):

WPF程序中使用MVVM模式_第3张图片
        Model层(这里MainModel文件里没有代码,用其他的Model代替看效果):

WPF程序中使用MVVM模式_第4张图片

          项目结构以及最终效果(DataAccess模拟测试所需要的数据,实际项目一般是数据库):

WPF程序中使用MVVM模式_第5张图片

WPF程序中使用MVVM模式_第6张图片

        至此全部完成,只是个人的一些总结,对自己是一个记录,同时希望也能对别人有些帮助,如果有什么错误,还望不吝指出,共同进步,转载请保留原文地址。

        源码下载


你可能感兴趣的:(WPF,MVVM,WPF)