WPF-MVVM的简单入门（第一个MVVM程序）

来自群友毕方的投稿，给大家做一个MVVM的体验demo

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.设计界面

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

界面代码如下

cs 复制代码

<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）

cs 复制代码

using System.ComponentModel;
using 第一个MVVM程序.Models;

namespace 第一个MVVM程序.ViewModels
{
    public class MainWindowModel : INotifyPropertyChanged
    {
        private User _user = new User();

        public User User
        {
            get => _user;
            set
            {
                _user = value;
                OnPropertyChanged(nameof(User));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

4.将View与ViewMode进行绑定

进入MainWindow.xaml.cs

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";
        }
    }
}

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

为按钮添加事件：

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

展示：

点击按钮显示