WPF MVVM示例讲解

WPF技术的主要特点是数据驱动UI,所以在使用WPF技术开发的过程中是以数据为核心的，WPF提供了数据绑定机制，当数据发生变化时，WPF会自动发出通知去更新UI，这篇文章通过示例让大家体验下WPF MVM，有需要的朋友可以参考下

在没给大家讲解wpf mwm示例之前先给大家简单说下MVVM理论知识：

WPF技术的主要特点是数据驱动UI,所以在使用WPF技术开发的过程中是以数据为核心的，WPF提供了数据绑定机制，当数据发生变化时，WPF会自动发出通知去更新UI。

我们使用模式，一般是想达到高内聚低耦合。在WPF开发中，经典的编程模式是MVVM，是为WPF量身定做的模式，该模式充分利用了WPF的数据绑定机制，最大限度地降低了Xmal文件和CS文件的耦合度，也就是UI显示和逻辑代码的耦合度，如需要更换界面时，逻辑代码修改很少，甚至不用修改。与WinForm开发相比，我们一般在后置代码中会使用控件的名字来操作控件的属性来更新UI，而在WPF中通常是通过数据绑定来更新UI;在响应用户操作上，WinForm是通过控件的事件来处理，而WPF可以使用命令绑定的方式来处理，耦合度将降低。

首先MVVM设计模式的结构

Views: 由Window/Page/UserControl等构成，通过DataBinding与ViewModels建立关联;

ViewModels：由一组命令，可以绑定的属性，操作逻辑构成;因为View与ViewModel进行了解耦，我们可以对ViewModel进行Unit Test;

Models：可以是实体对象或者Web服务;

下面通过一个简单的例子，来介绍一些WPF MVVM模式。示例将展示一个图片浏览器，打开图片，放大/缩小图片大小。首先项目结构：

UI:

1. <Grid> 
2. <DockPanel> 
3. <Menu DockPanel.Dock="Top"> 
4. <Menu> 
5. <MenuItem Header="_Open" Command="{Binding OpenFileCommand}"/> 
6. </Menu> 
7. <Menu> 
8. <MenuItem Header="_ZoomIn" Command="{Binding ZoomCommand}" CommandParameter="ZoomIn"/> 
9. </Menu> 
10. <Menu> 
11. <MenuItem Header="_ZoomOut" Command="{Binding ZoomCommand}" CommandParameter="ZoomOut"/> 
12. </Menu> 
13. <Menu> 
14. <MenuItem Header="_Normal" Command="{Binding ZoomCommand}" CommandParameter="Normal"/> 
15. </Menu> 
16. </Menu> 
17. <ScrollViewer> 
18. <Image Source="{Binding ImagePath}" Stretch="None"> 
19. <Image.LayoutTransform> 
20. <ScaleTransform ScaleX="{Binding Zoom}" ScaleY="{Binding Zoom}"/> 
21. </Image.LayoutTransform> 
22. </Image> 
23. </ScrollViewer> 
24. </DockPanel> 
25. </Grid> 

ViewModelBase(用来实现修改通知):

1. public class ViewModelBase : INotifyPropertyChanged 
2. { 
3. public event PropertyChangedEventHandler PropertyChanged; 
4. protected virtual void OnPropertyChanged(string propName) 
5. { 
6. if(PropertyChanged!=null) 
7. { 
8. PropertyChanged(this, new PropertyChangedEventArgs(propName)); 
9. } 
10. } 
11. } 

OpenFileCommand:

1. public class OpenFileCommand : ICommand 
2. { 
3. private MainViewModel _data; 
4. public OpenFileCommand(MainViewModel data) 
5. { 
6. _data = data; 
7. } 
8. public event EventHandler CanExecuteChanged; 
9. public bool CanExecute(object parameter) 
10. { 
11. return true; 
12. } 
13. public void Execute(object parameter) 
14. { 
15. OpenFileDialog dialog = new OpenFileDialog() { Filter = "Image Files|*.jpg;*.png;*.bmp;*.gif" }; 
16. if(dialog.ShowDialog().GetValueOrDefault()) 
17. { 
18. _data.ImagePath = dialog.FileName; 
19. } 
20. } 

ZoomCommand:

1. public enum ZoomType 
2. { 
3. ZoomIn = 0, 
4. ZoomOut = 1, 
5. Normal = 2 
6. } 
7. public class ZoomCommand : ICommand 
8. { 
9. private MainViewModel _data; 
10. public ZoomCommand(MainViewModel data) 
11. { 
12. _data = data; 
13. } 
14. public event EventHandler CanExecuteChanged 
15. { 
16. add { CommandManager.RequerySuggested += value; } 
17. remove { CommandManager.RequerySuggested -= value; } 
18. } 
19. public bool CanExecute(object parameter) 
20. { 
21. return _data.ImagePath != null; 
22. } 
23. public void Execute(object parameter) 
24. { 
25. ZoomType type = (ZoomType)Enum.Parse(typeof(ZoomType), (string)parameter, true); 
26. switch(type) 
27. { 
28. case ZoomType.Normal: 
29. _data.Zoom = 1; 
30. break; 
31. case ZoomType.ZoomIn: 
32. _data.Zoom *= 1.2; 
33. break; 
34. case ZoomType.ZoomOut: 
35. _data.Zoom /= 1.2; 
36. break; 
37. } 
38. } 
39. } 

MainViewModel:

1. public class MainViewModel : ViewModelBase 
2. { 
3. private string _imagePath; 
4. public string ImagePath 
5. { 
6. get 
7. { 
8. return _imagePath; 
9. } 
10. set 
11. { 
12. if (_imagePath != value) 
13. { 
14. _imagePath = value; 
15. OnPropertyChanged("ImagePath"); 
16. } 
17. } 
18. } 
19. private double _zoom = 1.0; 
20. public double Zoom 
21. { 
22. get 
23. { 
24. return _zoom; 
25. } 
26. set 
27. { 
28. if(_zoom != value) 
29. { 
30. _zoom = value; 
31. OnPropertyChanged("Zoom"); 
32. } 
33. } 
34. } 
35. private ICommand _openFileCommand; 
36. public ICommand OpenFileCommand 
37. { 
38. get { return _openFileCommand; } 
39. } 
40. private ZoomCommand _zoomCommand; 
41. public ZoomCommand ZoomCommand 
42. { 
43. get { return _zoomCommand; } 
44. } 
45. public MainViewModel() 
46. { 
47. _openFileCommand = new OpenFileCommand(this); 
48. _zoomCommand = new ZoomCommand(this); 
49. } 
50. } 

下一步我们要做的是将MainViewModel绑定到MainWindow上，我们可以通过下面两种方式绑定：

1. 直接在MainWindow的Code Behind中进行绑定：

1. public MainWindow() 
2. { 
3. InitializeComponent(); 
4. DataContext = new MainViewModel(); 
5. } 

2. 在App.xaml后台代码中绑定(将App.xaml中StartupUri="MainWindow.xaml"删除掉)：

1. public App() 
2. { 
3. MainWindow window = new MainWindow(); 
4. window.DataContext = new MainViewModel(); 
5. window.Show(); 
6. } 

运行效果图如下：

以上就是针对WPF MVVM示例讲解的全部内容，并附有效果图，看着还不错吧，希望大家能够喜欢，欢迎提出宝贵意见。