[讨论][WPF][C#] [原创] MVVM 程式设计入门小教程。

宅男-兜着走

Model View ViewModel

From Wikipedia, the free encyclopedia
The Model View ViewModel (MVVM) is an architectural pattern used in software engineering that originated from Microsoft as a specialization of the Presentation Model design pattern introduced by Martin Fowler.[1] Largely based on the Model-view-controller pattern (MVC), MVVM is targeted at modern UI development platforms (Windows Presentation Foundation and Silverlight) in which there is a User Experience (UX) developer who has different requirements than a more “traditional” developer (i.e. oriented toward business logic and back end development). The View-Model of MVVM is “basically a value converter on steroids”[2] meaning that the View-Model is responsible for exposing the data objects from the Model in such a way that those objects are easily managed and consumed. In this respect, the View-Model is more Model than View, and handles most if not all of the View’s display logic (though the demarcation between what functions are handled by which layer is a subject of ongoing discussion[3] and exploration).
MVVM was designed to make use of specific functions in WPF to better facilitate the separation of View layer development from the rest of the pattern by removing virtually all “code behind” from the View layer.[4] Instead of requiring Interactive Designers to write View code, they can use the native WPF markup language XAML and create bindings to the ViewModel, which is written and maintained by application developers. This separation of roles allows Interactive Designers to focus on UX needs rather than programming or business logic, allowing for the layers of an application to be developed in multiple work streams.

原文来自： http://xiaoyinnet.blog.51cto.com/909896/196071

微软的WPF带来了新的技术体验，如Sliverlight、音频、视频、3D、动画……，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性揉合进去,以应对客户日益复杂的需求变化。

      WPF的数据绑定与Presentation Model相集合是非常好的做法,使得开发人员可以将View和逻辑分离出来,但这种数据绑定技术非常简单实用，也是WPF所特有的，所以我们又称之为Model-View-ViewModel (MVVM)。这种模式跟经典的MVP（Model-View-Presenter）模式很相似，除了你需要一个为View量身定制的model，这个model就是ViewModel。ViewModel包含所有由UI特定的接口和属性，并由一个ViewModel 的视图的绑定属性，并可获得二者之间的松散耦合，所以需要在ViewModel 直接更新视图中编写相应代码。数据绑定系统还支持提供了标准化的方式传输到视图的验证错误的输入的验证。

MVVM=
Model , View , ViewModel

目前为止， 使用MVVM的人都明白 Model， View 是什么。 但是ViewModel 目前还真的是个谜，
20 多个开发员，每个都可能有不同的看法与使用的方法。
那么这里分享点我的小小小小小小心得。也建议学WPF的确实不使用 Prism， MEF， MVVM Light 的人也可以参考下他们的做法。

由于有点大工程， 所以这个只有Save Command。
= =
至于怎么连接资料库，方法也无差别， 希望大家勤力多多翻书， 这个只是针对 MVVM。
Note: 教程内用到 AttachedCommandBehavior 的 Library， 可以到这里下载，里面有 这个Project的最终样貌， AttachedCommandBehavior 的 Source Code
如果没有的话：-
http://cid-478d11236bf4657f.offi ... aspx/MVVM%20Article

更多关于 AttachedCommandBehavior v 2 ：
http://marlongrech.wordpress.com ... ehavior-v2-aka-acb/

第一步： 首先打开个新专题。 然后输入你喜欢的名字。
- 我这里有lib , model, viewModel Solution Folder
- lib 我会放Library进去， AttachCommandBehavior.dll。
- model 会开个新的Class，Person.cs
- ViewModel 资料的 Collection， CRUD Method， Command。

请参考图片， Right Click 滑鼠然后 Add Folder。



第二步： Expand Refrence 的Folder， 然后 right click add reference -> Browse -> 找你Project 里面的(AttachCommandBehavior.dll)

如果做到了， 就会看到AttachCommandBehavior.dll 在你的 Reference List 里面了。


第三步： Right Click 刚才 Add 的 Folder， 然后 Add Class 进去，
- Model/ Person.cs
- ViewModel/ PersonViewModel.cs


第四步： 做个UI 出来， 我做成这样， 你喜欢怎样就怎样。

1. 
   
2. <Window x:Class="SampleProject.Window1"
   
3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   
4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   
5.     Title="Sample mvvm program" Height="400" Width="550" ResizeMode="NoResize">
   
6.     <Grid x:Name="root">
   
7.         <Grid.RowDefinitions>
   
8.             <RowDefinition Height="169*" />
   
9.             <RowDefinition Height="193*" />
   
10.         </Grid.RowDefinitions>
    
11.         <Button Height="23" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="54" Margin="0,0,12,8">Save</Button>
    
12.         <Label Margin="12,12,0,0" Height="28" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120">First Name</Label>
    
13.         <Label HorizontalAlignment="Left" Margin="12,46,0,0" Name="label2" Width="120" Height="28" VerticalAlignment="Top">Last Name</Label>
    
14.         <Label Margin="12,80,0,61" HorizontalAlignment="Left" Width="120">Age</Label>
    
15.         <Label Height="28" Margin="12,0,0,27" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="120">Telephone</Label>
    
16.         <TextBox Height="23" Margin="138,17,185,0" VerticalAlignment="Top" />
    
17.         <TextBox Height="23" Margin="138,49,185,0" VerticalAlignment="Top" />
    
18.         <TextBox Margin="138,82,185,64" />
    
19.         <TextBox Height="23" Margin="138,0,185,29" VerticalAlignment="Bottom" />
    
20.         <ListView Grid.Row="1">
    
21.             <ListView.View>
    
22.                 <GridView>
    
23.                     <GridViewColumn Header="First Name" Width="100"/>
    
24.                     <GridViewColumn Header="Last Name" Width="100"/>
    
25.                     <GridViewColumn Header="Age" Width="80"/>
    
26.                     <GridViewColumn Header="Tel" Width="200"/>
    
27.                 </GridView>
    
28.             </ListView.View>
    
29.         </ListView>
    
30.     </Grid>
    
31. </Window>
    

复制代码

第五步: 打开你的 Window1.xaml.cs （Code Behind） 然后改点东西
-不需要太大的变动， 只要把 ViewModel Assign 给你的 DataContext 就好了。
-Code Behind 接下来也不会有什么逻辑， Code 的添加。
-可以放着不管丢去一边。
-View 可以说是暂时完成了。

1. 
   
2. using System.Windows;
   
3. using SampleProject.ViewModel;
   
4. 
   
5. namespace SampleProject
   
6. {
   
7.     /// <summary>
   
8.     /// Interaction logic for Window1.xaml
   
9.     /// </summary>
   
10.     public partial class Window1 : Window
    
11.     {
    
12.         public Window1()
    
13.         {
    
14.             InitializeComponent();
    
15.             DataContext = new PersonViewModel();
    
16.         }
    
17.     }
    
18. }
    

复制代码

第六步： 完成 Person.cs
-没什么特别， 一堆 Getter Setter， 跟一个Contructor。 Person.cs 就完成了。
-有必要的话， Validation 也能在这里做， 也可以Implement IDataErrorInfo, 看个人喜欢。
-那么可以关起来了， 也不会再打开了。

1. 
   
2. namespace SampleProject.Model
   
3. {
   
4.     public class Person
   
5.     {
   
6.         public string FirstName { get; set; }
   
7.         public string LastName {get;set;}
   
8.         public int Age { get; set; }
   
9.         public string TelPhone { get; set; }
   
10. 
    
11.         public Person(string fName, string lName, int age, string tel)
    
12.         {
    
13.             FirstName = fName;
    
14.             LastName = lName;
    
15.             Age = age;
    
16.             TelPhone = tel;
    
17.         }
    
18. 
    
19.     }
    
20. }
    

复制代码

宅男-兜着走

今晚应该会更新 RelayCommad

宅男-兜着走

回复  宅男-兜着走


    请教一些问题,

     在databinding gridview 那个部分, 我看到多数是一个一 ...
derricklee82 发表于 2010-8-23 10:09 AM

1.如果转换成 自己的Class， 自然会显得比较慢 (目前我是如此，可是我认了)。
2.如果单单使用 Dataset 也是可以， 只要Binding Path 是正确的话一切不是问题。
3.建议使用 LINQ To Sql， Ado.Entity。

derricklee82

回复 14# 宅男-兜着走


    请教一些问题,

     在databinding gridview 那个部分, 我看到多数是一个一个record 加进class再放进Icollector里..
这样会慢吗? 如果1M record 这不会很慢? 可以用dataset 吗?

谢谢~~

宅男-兜着走

老大，
我正要学习WPF +　MVVM。。　
还有教程吗？？？
derricklee82 发表于 2010-8-17 03:40 PM

就差不多这些了。
如果要附上 Prism 的原文教程的话， 我会死。。。太长了。

我这里已经教了 Commanding， Binding， DelgateCommand 了。
EventAggregator 我还不懂要怎么表达，怎么教 = = 。
但是最近我爱上了 RelayCommand。 有兴趣的话参考 MVVM Light Toolkit 吧。
不过太新了， 没什么教程。

要什么东西的话， 跟我说， 我再贴上来吧。

derricklee82

老大，
我正要学习WPF +　MVVM。。　
还有教程吗？？？

宅男-兜着走

衰仔，我的靓仔 也开发着 WPF 的
你几时下来和他交流？？？
JL 那边有地方睡哦
goodday 发表于 2010-8-7 10:38 PM

我也超想交流，只是身不由己， 一有空会过来的， 时间大把， 只是现在真的没法自由。==

呆板笨蛋

我佩服的五体投地 you are my GOD  OMG

goodday

衰仔，我的靓仔 也开发着 WPF 的
你几时下来和他交流？？？
JL 那边有地方睡哦

shinn1080

精华啊楼主~感谢分享~~~~