WPF MVVM示例讲解

2019-12-26 13:10:24刘景俊

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设计模式的结构

WPF MVVM示例讲解

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

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

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

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

WPF MVVM示例讲解

UI:

 

 
  1. <Grid>  <DockPanel> 
  2. <Menu DockPanel.Dock="Top">  <Menu> 
  3. <MenuItem Header="_Open" Command="{Binding OpenFileCommand}"/>  </Menu> 
  4. <Menu>  <MenuItem Header="_ZoomIn" Command="{Binding ZoomCommand}" CommandParameter="ZoomIn"/> 
  5. </Menu>  <Menu> 
  6. <MenuItem Header="_ZoomOut" Command="{Binding ZoomCommand}" CommandParameter="ZoomOut"/>  </Menu> 
  7. <Menu>  <MenuItem Header="_Normal" Command="{Binding ZoomCommand}" CommandParameter="Normal"/>