1.MVVM 是什么？

MVVM是一种设计模式，核心思想是实现将界面（View）与 逻辑（ViewModel）彻底分开，实现前后端分离

2.MVVM的三大元素

一、Model （模型）数据类 ，例如一个 User类 有Name、Age属性

二、View （视图，窗口，页面）用户能看到的界面 UI

三、ViewModel （视图模型）处理View上用户的操作，如点击按钮，输入数字 ，实现Mode与View的双向更新

3.下面带大家实现一个最简单的MVVM项目

    1.打开Vs2022 创建一个WPF项目

a、把原来的MainWindow.xaml删掉

b、然后添加分别三个文件夹（Models、ViewModels、Views）

c、在Views文件夹中添加窗口（WPF），命名MainWindow，如下图

在App.xaml中修改StartupUri为

StartupUri="Views/MainWindow.xaml"，如图

2.设计界面

实现效果：按下按钮后，展示姓名和年龄到输入框

界面代码如下：

<Window x:Class="第一个MVVM程序.Views.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"        xmlns:local="clr-namespace:第一个MVVM程序.Views"        mc:Ignorable="d"        Title="MainWindow" Height="220" Width="350">    <Grid>        <Grid.RowDefinitions>            <RowDefinition Height="auto" />            <RowDefinition Height="auto" />            <RowDefinition Height="auto" />        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">            <Label  Width="50"  Height="30"  Content=" 姓名" />            <TextBox  x:Name="TexBoxName" Width="100"  Height="20"  Text="{Binding User.Name}" />        </StackPanel>
        <StackPanel Grid.Row="1" Orientation="Horizontal">            <Label Width="50" Height="30" Content=" 年龄" />            <TextBox  x:Name="TexBoxAge"   Width="100"  Height="20" Text="{Binding User.Age}" />        </StackPanel>
        <StackPanel Grid.Row="2" Orientation="Horizontal">            <Button Width="100"  Height="20"  Margin="20,0"  Click="Button_Click" Content="显示" />        </StackPanel>    </Grid></Window>

3.View设计完毕，添加Model与ViewModel类

Model（User.cs）

ViewModel（MainWindowModels,cs）

using System.Windows;using 第一个MVVM程序.Models;using 第一个MVVM程序.ViewModels;
namespace 第一个MVVM程序.Views{    /// <summary>    /// MainWindow.xaml 的交互逻辑    /// </summary>    public partial class MainWindow : Window    {        public MainWindowModel mainWindowModel = new MainWindowModel();  //实例化ViewMode        public MainWindow()        {            InitializeComponent();
            this.DataContext = mainWindowModel; //将View 数据上下文绑定到ViewMode        }
        private void Button_Click(object sender, RoutedEventArgs e)        {            mainWindowModel.User = new User { Name = "张三", Age = "18" };
            //直接操作UI            //TexBoxName.Text = "张三";            // TexBoxAge.Text = "18";        }    }}

4.将View与ViewMode进行绑定

进入MainWindow.xaml.cs

using System.Windows;using 第一个MVVM程序.Models;using 第一个MVVM程序.ViewModels;
namespace 第一个MVVM程序.Views{   public partial class MainWindow : Window   {       public MainWindowModel mainWindowModel = new MainWindowModel();  //实例化ViewMode       {
         InitializeComponent();         this.DataContext = mainWindowModel; //将View 数据上下文绑定到ViewMode                  }        private void Button_Click(object sender, RoutedEventArgs e)        {
          mainWindowModel.User = new User { Name = "张三", Age = "18" };             //直接操作UI                            //TexBoxName.Text = "张三";           // TexBoxAge.Text = "18";                 }             }}

5.将UI组件与ViewModel中的属性进行绑定

为按钮添加事件：

这里我还是采用传统Winfrom的方式将事件逻辑写在界面后台，写完以后，将鼠标光标放到Button_Click 这里，点击F12 ，就会自动在界面后台代码，生成一个事件方法

展示：

点击按钮显示