如何用WPF实现一个最简单的Mvvm示例

2025-05-23 21:18:33

本文会根据步骤编写一个最简单的示例,让大家快速了解MVVM是如何实现的

工具/原料

MVVM基本知识

MVVM 简介

1、MVVM,即 Model-View-ViewModel,是一种针对WPF、Silverlight、Windows Phone的设计模式,从MVC,MVP等模式中演化而来。主要目的也是为了解耦。设想一下,当你用 Winform 开发完一个界面超级复杂的项目之后,正当心里暗自切喜时,客户突然提出 “这个界面不好看,想用滑动条代替所有的按钮”,此时你会不会有种冲动想请他爷爷的爷爷的爷爷的....爷爷喝个茶??因为你知道这看似很简单的改动,却是项很繁重的体力活,原来按钮的事件处理函数全都用不了了,必须要把所有这些事件处理函数中的代码手动移动到滑动条的处理函数中,前提还必须不依赖事件参数。说不定一编译还各种错误,提示你某某控件不存在。如果用 WPF 结合 Mvvm 模式,那就是轻松加愉快了。因为你不需要移动任何代码,要做的只是重新把View和ViewModel绑定一下就可以解决了。其它的好处,我就不啰嗦了,谷歌上太多了。

准备基础代码

1、创建一个 ViewModelBasepublicabstractclassViewModelBase:INotifyPropertyChanged{//属性改变事件publiceventPropertyChangedEventHandlerPropertyChanged; //当属性改变的时候,调用该方法来发起一个消息,通知View中绑定了propertyName的元素做出调整publicvoidRaisePropertyChanged(stringpropertyName){PropertyChangedEventHandlerhandler=PropertyChanged;if(handler!=null){handler(this,newPropertyChangedEventArgs(propertyName));}}}

2、创建一个DelegateCommandpublicclassDelegateCommand:ICommand{readonlyAction<object>_execute;readonlyPredicate<object>_canExecute;publicDelegateCommand(Action<object>execute):this(execute,null){}publicDelegateCommand(Action<object>execute,Predicate<object>canExecute){if(execute==null)thrownewArgumentNullException("execute");_execute=execute;_canExecute=canExecute;}publicvoidExecute(objectparameter){_execute(parameter);}publicboolCanExecute(objectparameter){return_canExecute==null?true:_canExecute(parameter);}publiceventEventHandlerCanExecuteChanged{add{CommandManager.RequerySuggested+=value;}remove{CommandManager.RequerySuggested-=value;}}}

创建示例用 ViewModel

1、让 ViewModel 继承自 ViewModelBase。publicclassMainWindowViewModel:ViewModelBase{privatestring_input;publicstringInput{get{return_input;}set{_input=value;RaisePropertyChanged("Input");}}privatestring_display;publicstringDisplay{get{return_display;}set{_display=value;RaisePropertyChanged("Display");}}publicDelegateCommandSetTextCommand{get;set;}privatevoidSetText(objectobj){Display=Input;}publicMainWindowViewModel(){SetTextCommand=newDelegateCommand(newAction<object>(SetText));}}

创建 View

1、最少只需要三个控件:一个textbox拿来做输入,一个label拿来做输出,一个button拿来提交数据。<Windowx多唉捋胝:Class="WpfApplication1.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:WpfApplication1.ViewModel"Title="MainWindow"Height="237"Width="215"><Grid><ButtonContent="提交"HorizontalAlignment="Left"Margin="37,137,0,0"VerticalAlignment="Top"Width="75"/><TextBoxx:Name="tb"HorizontalAlignment="Left"Height="23"Margin="37,30,0,0"TextWrapping="Wrap"VerticalAlignment="Top"Width="120"/><LabelHorizontalAlignment="Left"Margin="37,76,0,0"VerticalAlignment="Top"/></Grid></Window>

绑定 View 和 ViewModel

1、当 View 和 ViewModel 都但诌诎箬已经创建完之后,最后一步就是把它哥俩绑定在一起了。这样,当 V足毂忍珩iew 改变的时候,ViewModel 就会发生相应的改变,反之亦然。<Grid><ButtonContent="提交"HorizontalAlignment="Left"Margin="37,137,0,0"VerticalAlignment="Top"Width="75"Command="{BindingSetTextCommand}"/><TextBoxx:Name="tb"HorizontalAlignment="Left"Height="23"Margin="37,30,0,0"TextWrapping="Wrap"VerticalAlignment="Top"Width="120"Text="{BindingInput}"/><LabelHorizontalAlignment="Left"Margin="37,76,0,0"VerticalAlignment="Top"Content="{BindingDisplay}"/></Grid>

源代码管理

1、关于此项目的代码,您可以在谷歌中搜索 The simplest demo for MVVM

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢