WPF 项目中 MVVM模式的简单例子说明

一、概述

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.DoExecute=new Action(Add);
        }

        // 业务逻辑方法  加法
        private void Add()
        {
            Model.Rs = Model.Num1 + Model.Num2;
        }

    }
}

（四）view 层

view层 xaml部分

<Window.Resources>
  <Style TargetType="TextBlock">
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="FontSize" Value="33"/>
  </Style>
  <Style TargetType="TextBox">
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="FontSize" Value="33"/>
    <Setter Property="Width" Value="300"/>
  </Style>
  <Style TargetType="Button">
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="FontSize" Value="33"/>
  </Style>
</Window.Resources>
<Grid ShowGridLines="True">
  <Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition/>
    <RowDefinition/>
    <RowDefinition/>
  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="1*"/>
    <ColumnDefinition Width="2*"/>
  </Grid.ColumnDefinitions>

  <TextBlock Text="数字1" Grid.Row="0" Grid.Column="0"/>
  <TextBlock Text="数字2" Grid.Row="1" Grid.Column="0"/>
  <TextBlock Text="操作" Grid.Row="2" Grid.Column="0"/>
  <TextBlock Text="结果" Grid.Row="3" Grid.Column="0"/>

  <TextBox Text="{Binding Model.Num1}"  Grid.Row="0" Grid.Column="1"/>
  <TextBox Text="{Binding Model.Num2}"  Grid.Row="1" Grid.Column="1"/>
  <Button Content="加法"  Command="{Binding Model.BtnCommand}" Grid.Row="2" Grid.Column="1" Width="300"/>
  <TextBox Text="{Binding Model.Rs}" Grid.Row="3" Grid.Column="1"/>

</Grid>

view层 cs部分

namespace WpfMvvM.views
{
    /// <summary>
    /// AddView.xaml 的交互逻辑
    /// </summary>
    public partial class AddView : Window
    {
        public AddView()
        {
            InitializeComponent();
            // 设置当前窗体的数据上下文 为 AddViewModel 模型
            this.DataContext = new AddViewModel();
        }
    }
}

view层的Cs代码部分几乎为空，只写了当前的数据上下文环境为 ViewModel 模型。

点击按钮后触发，同时结果数据进行更新

在这里插入图片描述