WPF MVVM示例讲解

更新时间：2015年08月04日 15:52:11 投稿：mrr

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:

 <Grid>
  <DockPanel>
   <Menu DockPanel.Dock="Top">
    <Menu>
     <MenuItem Header="_Open" Command="{Binding OpenFileCommand}"/>
    </Menu>
    <Menu>
     <MenuItem Header="_ZoomIn" Command="{Binding ZoomCommand}" CommandParameter="ZoomIn"/>
    </Menu>
    <Menu>
     <MenuItem Header="_ZoomOut" Command="{Binding ZoomCommand}" CommandParameter="ZoomOut"/>
    </Menu>
    <Menu>
     <MenuItem Header="_Normal" Command="{Binding ZoomCommand}" CommandParameter="Normal"/>
    </Menu>
   </Menu>
   <ScrollViewer>
    <Image Source="{Binding ImagePath}" Stretch="None">
     <Image.LayoutTransform>
      <ScaleTransform ScaleX="{Binding Zoom}" ScaleY="{Binding Zoom}"/>
     </Image.LayoutTransform>
    </Image>
   </ScrollViewer>
  </DockPanel>
 </Grid>

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

 public class ViewModelBase : INotifyPropertyChanged
 {
  public event PropertyChangedEventHandler PropertyChanged;
  protected virtual void OnPropertyChanged(string propName)
  {
   if(PropertyChanged!=null)
   {
    PropertyChanged(this, new PropertyChangedEventArgs(propName));
   }
  }
 }

OpenFileCommand:

public class OpenFileCommand : ICommand
 {
  private MainViewModel _data;
  public OpenFileCommand(MainViewModel data)
  {
   _data = data;
  }
  public event EventHandler CanExecuteChanged;
  public bool CanExecute(object parameter)
  {
   return true;
  }
  public void Execute(object parameter)
  {
   OpenFileDialog dialog = new OpenFileDialog() { Filter = "Image Files|*.jpg;*.png;*.bmp;*.gif" };
   if(dialog.ShowDialog().GetValueOrDefault())
   {
    _data.ImagePath = dialog.FileName;
   }
  }

ZoomCommand:

 public enum ZoomType
 {
  ZoomIn = 0,
  ZoomOut = 1,
  Normal = 2
 }
 public class ZoomCommand : ICommand
 {
  private MainViewModel _data;
  public ZoomCommand(MainViewModel data)
  {
   _data = data;
  }
  public event EventHandler CanExecuteChanged
  {
   add { CommandManager.RequerySuggested += value; }
   remove { CommandManager.RequerySuggested -= value; }
  }
  public bool CanExecute(object parameter)
  {
   return _data.ImagePath != null;
  }
  public void Execute(object parameter)
  {
   ZoomType type = (ZoomType)Enum.Parse(typeof(ZoomType), (string)parameter, true);
   switch(type)
   {
    case ZoomType.Normal:
     _data.Zoom = 1;
     break;
    case ZoomType.ZoomIn:
     _data.Zoom *= 1.2;
     break;
    case ZoomType.ZoomOut:
     _data.Zoom /= 1.2;
     break;
   }
  }
 }

MainViewModel:

public class MainViewModel : ViewModelBase
 {
  private string _imagePath;
  public string ImagePath
  {
   get
   {
    return _imagePath;
   }
   set
   {
    if (_imagePath != value)
    {
     _imagePath = value;
     OnPropertyChanged("ImagePath");
    }
   }
  }
  private double _zoom = 1.0;
  public double Zoom
  {
   get
   {
    return _zoom;
   }
   set
   {
    if(_zoom != value)
    {
     _zoom = value;
     OnPropertyChanged("Zoom");
    }
   }
  }
  private ICommand _openFileCommand;
  public ICommand OpenFileCommand
  {
   get { return _openFileCommand; }
  }
  private ZoomCommand _zoomCommand;
  public ZoomCommand ZoomCommand
  {
   get { return _zoomCommand; }
  }
  public MainViewModel()
  {
   _openFileCommand = new OpenFileCommand(this);
   _zoomCommand = new ZoomCommand(this);
  }
 }

下一步我们要做的是将MainViewModel绑定到MainWindow上，我们可以通过下面两种方式绑定：
1. 直接在MainWindow的Code Behind中进行绑定：

 public MainWindow()
  {
   InitializeComponent();
   DataContext = new MainViewModel();
  }

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

  public App()
  {
   MainWindow window = new MainWindow();
   window.DataContext = new MainViewModel();
   window.Show();
  }

运行效果图如下：

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

您可能感兴趣的文章:

WPF
MVVM

C#文件操作的简单实例
这篇文章主要介绍了C#文件操作的简单实例,需要的朋友可以参考下
2014-02-02
c#图片处理之图片裁剪成不规则图形
最近项目要求实现不规则裁剪功能。本来想用html5的canvas在前端实现的，但是发现有点困难，以下为C#端对图对片的处理
2014-05-05
详解C# WebApi 接口测试工具：WebApiTestClient
这篇文章主要介绍了详解C# WebApi 接口测试工具：WebApiTestClient，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
C# Socket网络编程实例
这篇文章主要介绍了C# Socket网络编程实例,分析了Socket网络通信的原理与具体应用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-01-01
浅谈C#数组(一)
本篇文章小编要得大家介绍的是C#数组，数组是一种数据结构，它可以包含同一个类型的多个元素，如果需要使用同一类型的多个对象，可以使用数组和集合,需要的朋友可以参考下面文章的具体内容
2021-09-09
C#中async和await的深入分析
Async/Await是C# 5引入的关键字,用以提高用户界面响应能力和对Web资源的访问能力,同时它使异步代码的编写变得更加容易,下面这篇文章主要给大家介绍了关于C#中async和await的相关资料,需要的朋友可以参考下
2022-11-11
c#索引器详解示例
索引器是一种特殊的类成员，它能够让对象以类似数组的方式来存取，使程序看起来更为直观，更容易编写。
2014-04-04
unity中实现Edge浏览器鼠标手势的功能思路详解
这篇文章主要介绍了unity中实现Edge浏览器鼠标手势的功能思路详解,实现起来其实并不复杂,涉及的技术点有pc端和移动端屏幕拖动事件,二维向量的相关运算,手势匹配算法,事件系统设计模式,需要的朋友可以参考下
2023-12-12
C# 邮件发送和接收实现代码
这两个方法很容易理解，只实现了最基本的功能，如果需要可以查看源代码获取更多信息。
2009-07-07
c#异常处理示例分享
这篇文章主要介绍了c#异常处理示例,需要的朋友可以参考下
2014-04-04

软件下载

源码下载

软件编程

网络编程

在线工具

数据库

CMS

常用工具

WPF MVVM示例讲解

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具