济宁城乡建设局网站,照片编辑在线,中国室内装饰设计网,泉州专业网站建设一、概述
MVVM 是 Model view viewModel 的简写。MVVM模式有助于将应用程序的业务和表示逻辑与用户界面清晰分离。 几个概念的说明#xff1a;
model :数据#xff0c;界面中需要的数据#xff0c;最好不要加逻辑代码view : 视图就是用户看到的UI结构 xaml 文件viewModel …一、概述
MVVM 是 Model view viewModel 的简写。MVVM模式有助于将应用程序的业务和表示逻辑与用户界面清晰分离。 几个概念的说明
model :数据界面中需要的数据最好不要加逻辑代码view : 视图就是用户看到的UI结构 xaml 文件viewModel : 业务逻辑代码绑定器声明性数据和命令绑定隐含在MVVM模式中。
使用MVVM模式并不会减少代码量反而会增加很多代码。MVVM设计模式的根本目的是把界面和业务逻辑分离。 WPF的依赖属性数据绑定等机制很好地帮助我们实现MVVM模式基本可以做到在界面层不出现业务逻辑代码。 二、mvvm 的实现
首先新建 views models viewModels文件夹用于存放不同模型
以简单的加法操作为例。
因为使用mvvm模式后数据都是c#后端代码提供前端使用后端的数据只能通过值绑定的方式同时如果后端业务逻辑导致数据改动那么就需要后端去将这一改动通知到前端去。
前端绑定值通过 {Binding 数据名} 的方式去绑定。前端绑定事件的话需要在viewModel层实现 Icommand 接口以提供命令绑定事件 前端通过 {Binding 数据名}后端通知前端数据修改则需要实现一个 INotifyPropertyChanged 的接口通过该接口中的 PropertyChangedEventArgs(“监听的业务操作名称”)去通知给前端。
一Command类 实现命令接口
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;namespace WpfMvvM
{public class Command : ICommand{public event EventHandler CanExecuteChanged;public bool CanExecute(object parameter){return true;}public void Execute(object parameter){DoExecute?.Invoke();}public Action DoExecute { get; set; }}
}
二model层
model层即数据层
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;namespace WpfMvvM.Models
{public class AddModule:INotifyPropertyChanged // 实现INotifyPropertyChanged接口{public event PropertyChangedEventHandler PropertyChanged;public int Num1 { get; set; } 10;public int Num2 { get; set; } 20;private int _Rs;public int Rs{get { return _Rs; }set { _Rs value;// 事件委托通知 new PropertyChangedEventArgs(xx) xx为数据属性名PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(Rs));}}public Command BtnCommand { get; set; } // 命令属性}
}三ViewModel 层
viewModel层用来进行业务处理操控model层的数据将model层注入为其属性
using System;
using System.Collections.Generic;
using System.Text;
using System.Threading.Tasks;
using WpfMvvM.Models;namespace WpfMvvM.ViewModels
{public class AddViewModel{// model 层数据注入public AddModule Model { get; set; } new AddModule();// 空构造器为model层绑定命令及事件通知public AddViewModel(){Model.BtnCommand new Command();Model.BtnCommand.DoExecutenew Action(Add);}// 业务逻辑方法 加法private void Add(){Model.Rs Model.Num1 Model.Num2;}}
}四view 层
view层 xaml部分
Window.ResourcesStyle TargetTypeTextBlockSetter PropertyHorizontalAlignment ValueCenter/Setter PropertyVerticalAlignment ValueCenter/Setter PropertyFontSize Value33//StyleStyle TargetTypeTextBoxSetter PropertyHorizontalAlignment ValueCenter/Setter PropertyVerticalAlignment ValueCenter/Setter PropertyFontSize Value33/Setter PropertyWidth Value300//StyleStyle TargetTypeButtonSetter PropertyHorizontalAlignment ValueCenter/Setter PropertyVerticalAlignment ValueCenter/Setter PropertyFontSize Value33//Style
/Window.Resources
Grid ShowGridLinesTrueGrid.RowDefinitionsRowDefinition/RowDefinition/RowDefinition/RowDefinition//Grid.RowDefinitionsGrid.ColumnDefinitionsColumnDefinition Width1*/ColumnDefinition Width2*//Grid.ColumnDefinitionsTextBlock Text数字1 Grid.Row0 Grid.Column0/TextBlock Text数字2 Grid.Row1 Grid.Column0/TextBlock Text操作 Grid.Row2 Grid.Column0/TextBlock Text结果 Grid.Row3 Grid.Column0/TextBox Text{Binding Model.Num1} Grid.Row0 Grid.Column1/TextBox Text{Binding Model.Num2} Grid.Row1 Grid.Column1/Button Content加法 Command{Binding Model.BtnCommand} Grid.Row2 Grid.Column1 Width300/TextBox Text{Binding Model.Rs} Grid.Row3 Grid.Column1//Gridview层 cs部分
namespace WpfMvvM.views
{/// summary/// AddView.xaml 的交互逻辑/// /summarypublic partial class AddView : Window{public AddView(){InitializeComponent();// 设置当前窗体的数据上下文 为 AddViewModel 模型this.DataContext new AddViewModel();}}
}view层的Cs代码部分几乎为空只写了当前的数据上下文环境为 ViewModel 模型。
点击按钮后触发同时结果数据进行更新
