WPF MVVM示例讲解
在没给大家讲解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示例讲解的全部内容,并附有效果图,看着还不错吧,希望大家能够喜欢,欢迎提出宝贵意见。
相关文章
c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)
这篇文章主要介绍了c# WPF中通过双击编辑DataGrid中Cell的示例(附源码),帮助大家更好的理解和学习使用c#,感兴趣的朋友可以了解下...2021-03-03- 最近在网上看到了新版的360安全卫士,感觉界面还不错,于是用WPF制作了一个,时间有限,一些具体的控件没有制作,用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25
- 这篇文章主要为大家详细介绍了WPF仿三星手机充电界面实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了C# WPF 通过委托实现多窗口间的传值的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
- 这篇文章主要为大家详细介绍了WPF TextBox实现按字节长度限制输入功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了C#中WPF使用多线程调用窗体组件的方法,涉及C#中多线程的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要为大家详细介绍了WPF InkCanvas绘制矩形和椭圆,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
web面试MVC与MVVM区别及Vue为什么不完全遵守MVVM解答
这篇文章主要介绍了web面试中常问问题,MVC与MVVM区别以及Vue为什么不完全遵守MVVM的难点解答,有需要的朋友可以借鉴参考下,希望能够有所帮助...2021-09-24- 这篇文章主要给大家介绍了关于WPF基础教程之形状画刷与变换的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
- 这篇文章主要给大家介绍了关于WPF如何自定义TabControl控件样式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。...2020-06-25
- 以AngularJS为代表的MVVM结构框架或库这两年来在前端界真是火到不行,大有对抗传统jQuery绑定思想的趋势,这里我们结合传统的MVC结构,来浅谈JavaScript前端开发的MVC结构与MVVM结构...2016-06-12
- 本篇文章是对WPF实现音频文件循环顺序播放的方法进行了详细的分析介绍,需要的朋友参考下...2021-09-22
- 下面小编就为大家分享一篇WPF水珠效果按钮组的实现教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-09-22
- 这篇文章主要为大家详细介绍了WPF实现转圈进度条效果,如何设计自定义的绕圈进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
- 如果注册快捷键,RegisterHotKey中的fsModifiers参数为0,即None选项,一些安全软件会警报,可能因为这样就可以全局监听键盘而造成安全问题,感兴趣的你可以参考下本文...2020-06-25
- 这篇文章主要为大家详细介绍了WPF中自定义GridLengthAnimation的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
- 这篇文章主要介绍了WPF/Silverlight实现图片局部放大的方法,结合实例形式分析了WPF/Silverlight针对图片属性操作相关实现技巧,需要的朋友可以参考下...2020-06-25
- 这篇文章主要为大家详细介绍了WPF MVVM发送短信小按钮的制作方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要给大家介绍了关于WPF中窗体最大化问题的解决方法,文中通过示例代码介绍的非常详细,对大家学习或者使用wpf具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
- 这篇文章主要介绍了C# WPF 父控件通过使用可视化树找到子控件的示例代码,需要的朋友可以参考下...2020-06-25