WPF新手村教程（七）—— 终章（MVVM架构初见杀）

WPF个人文档（七）——  MVVM初见杀

1. # MVVM
3. View            # ?
4. ViewModel        # ?
5. Model            # ?

复制代码

温馨提示：请不要企图一次就看懂MVVM架构，也不要妄图一次就明白MVVM，更不要妄想一次就可以上手开写
MVVM架构初期学习，需要反复看，反复学习，反复受折磨，反复骂街，然后接着去学......
别人学习一门架构，需要花数个月，甚至一两年，才能做到完全熟悉里面的每一个东西
所以你就不要想着，一两周甚至几天时间就可以学会并且熟练使用一门架构了
因此，这篇随笔，仅做对MVVM架构的初步了解，而不是去教会你怎么熟练使用
关于标题，初见杀，你以为杀的是谁，是我啊，也是你，
随笔的另一个目的，后面要是忘记了，我们也可以回来回顾回顾，和弄和弄
如果你是第一次接触前端架构，或者你以前没有搞过Web前端什么的，那么
恭喜你，一起一脸蒙圈的看着这MVVM架构吧
前期学习MVVM架构，大脑里面无时无刻浮现出宇宙三大终究问题：我是谁，我在哪，我从哪里来
因为MVVM其实是一门非常复杂的技术架构，涉及的知识点很多很多，但凡你对其中一项核心技术不甚了解
就会像过年的时候被亲戚灌酒喝断片一样——不对，刚刚发生什么了，我没走神吧，怎么一瞬间什么都不明白了
学习MVVM架构，最好去找一个小的教学Demo或者视频，如果你对其中的许多概念感到非常陌生
请去学习前置内容，我就不推荐你继续深入学习MVVM了，
毕竟，第一关那多没意思解锁，就单挑BOSS，你也想给BOSS修脚吗，那得修脚修到何年何月去了
（修脚就是字面意思，游戏里打下半身，一般说视野受限打不到上半身的情况所以修脚，在这里你可以理解为：
你把BOSS卡在一个角落，由于地形原因，他打不到你，然后你又只能打他的脚，但是你的伤害只有1，Boss有9999血）
零.引题

1. # 为什么我们需要MVVM架构?
2. # 如果不使用MVVM架构会产生什么问题?

复制代码

• 有人说MVVM架构是为了前后端分离，人不分离，
  换句话说，也就是业务层和界面分离，做到互不干扰，
  你也可以说是，将表现层和逻辑层分离，
  
• 但总的来说，其实就是为了解耦，你也不想我写个业务逻辑（界面），还得去搞明白前端（后端）怎么写的吧
  
• 所以为了避免业务逻辑和UI黏在一起，比强力粘鼠板还粘，于是MVVM架构诞生了
  
  
  
  • MVVM将 界面、逻辑、数据  彻底拆开，终于不用测试的时候还要烧纸祈祷了（bushi
    
  
  

附赠博客园讲的比较通俗易懂的一篇文章：
为什么要用MVVM - maanshancss - 博客园

• 然后先来看几行简单的代码和超级简易的MVVM架构
  
  
  
  • 这里实现了一个非常简单的功能：点击按钮之后跳出一个弹窗
    但是会发现，事件交互逻辑和UI完完全全绑死了，
    如果我后面想要复用这个控件或者在其他页面代码中复用对应的事件逻辑，怎么办呢
    
  • 1. <Grid>
    2.     <StackPanel>
    3.         <TextBox x:Name="txtname"/>
    4.         <Button Height="100" Width="100" Click="Button_Click" Content="登录"/>
    5.     </StackPanel>
    6. </Grid>

    复制代码
    1. private void Button_Click(object sender, RoutedEventArgs e)
    2. {
    3.     string accout = txtname.Text;
    4.     MessageBox.Show($"{accout}");
    5. }

    复制代码
    1. # 交互逻辑
    2. 点击按钮
    3.    ↓
    4. 读控件
    5.    ↓
    6. 执行逻辑        # 事件Button_Click()
    7.    ↓
    8. 完成交互        # 弹窗

    复制代码
  
  

<ul>现在我们用MVVM来实现一下，不懂没关系，先留下一个简单的印象

• 1. # 项目
  2. MVVM_Demo
  3. ├─ Views
  4. │  └─ MainWindow.xaml
  5. ├─ ViewModels        # 数据
  6. │  └─ MainViewModel.cs
  7. └─ Commands
  8.    └─ RelayCommand.cs

  复制代码
• 1.UI去掉 x:Name，绑定数据，引入数据ViewModel雏形
  

  由于现在的代码逻辑过于依赖UI控件，所以我们需要将数据和UI解耦，你们不能在一起        她是你妹妹

  1. // 现在
  2. string accout = txtname.Text;
  4. // 目标：实现UI和数据绑定
  5.         // TextBox.Text ←→ Account

  复制代码

  
  
  
  
  • 1）代码中加入属性
    
    
    
    • 1. public string Account { get; set; }

      复制代码
    
    
  • 2）UI去掉 x:Name，绑定数据（这里以TextBox为例，Button同理）
    然后，别问我为什么混入了两种语言的注释.....
    
    
    
    • 1. # 绑定 ViewModel<Grid>
      2.     <StackPanel>
      3.         <TextBox x:Name="txtname"/>
      4.         <Button Height="100" Width="100" Click="Button_Click" Content="登录"/>
      5.     </StackPanel>
      6. </Grid>#<Grid>
      7.     <StackPanel>
      8.         <TextBox x:Name="txtname"/>
      9.         <Button Height="100" Width="100" Click="Button_Click" Content="登录"/>
      10.     </StackPanel>
      11. </Grid>      

      复制代码
    
    
  
  
• 2.核心 — UI自动刷新：实现绑定更新（这里依旧以TextBox为例）
  
  
  
  • 1. public class MainViewModel : INotifyPropertyChanged
    2. {
    3.     public event PropertyChangedEventHandler? PropertyChanged;
    5.     // 绑定的数据
    6.     private string _account = string.Empty;
    7.     // 属性: get + set
    8.     public string Account
    9.     {
    10.         get => _account;
    11.         set
    12.         {
    13.             _account = value;
    14.             OnPropertyChanged(nameof(Account));
    15.         }
    16.     }
    18.     // 绑定更新
    19.     void OnPropertyChanged(string propertyName)
    20.     {
    21.         PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    22.     }
    23. }

    复制代码
  
  
• 3.事件改命令Command（再次提醒：⚠命令不是事件的上位替代！！！）
  
  
  
  • 你问为什么要改啊，因为：MVVM 不允许 UI 调后台函数
    
  • 1. [/code]
    2. [*][code]public MainViewModel()
    3. {
    4.     LoginCommand = new RelayCommand(Execute);
    5. }
    7. public ICommand LoginCommand { get; }

    复制代码
  
  

附上完整示例代码：
如果下面你遇到一些看不懂的代码，不要慌不要急，因为啊，私密马赛我也看不懂
但是你要明白大致的内容和结构，不会的，随时随查
我才学C#几个月啊，我要是可以这么短时间可以纯手搓MVVM，我就是真的天赋狗了

• MainWindow.xaml
  

  
  
  
  
  • 1. <Grid>
    2.     <StackPanel>
    3.         <TextBox x:Name="txtname"/>
    4.         <Button Height="100" Width="100" Click="Button_Click" Content="登录"/>
    5.     </StackPanel>
    6. </Grid><Grid>
    7.     <StackPanel>
    8.         <TextBox x:Name="txtname"/>
    9.         <Button Height="100" Width="100" Click="Button_Click" Content="登录"/>
    10.     </StackPanel>
    11. </Grid><Grid>
    12.     <StackPanel>
    13.         <TextBox x:Name="txtname"/>
    14.         <Button Height="100" Width="100" Click="Button_Click" Content="登录"/>
    15.     </StackPanel>
    16. </Grid>                    

    复制代码
  
  

• MainViewModel.cs
  

  
  
  
  
  • 1. using System.ComponentModel;
    2. using System.Windows;
    3. using System.Windows.Input;
    4. using MVVM_Demo.Commands;
    6. namespace MVVM_Demo.ViewModels
    7. {
    8.     public class MainViewModel : INotifyPropertyChanged
    9.     {
    10.         public MainViewModel()
    11.         {
    12.             LoginCommand = new RelayCommand(ExecuteLogin, CanExecuteLogin);
    13.         }
    15.         public event PropertyChangedEventHandler? PropertyChanged;
    17.         // 密码
    18.         private string _account = string.Empty;
    19.         public string Account
    20.         {
    21.             get => _account;
    22.             set
    23.             {
    24.                 _account = value;
    25.                 OnPropertyChanged(nameof(Account));
    27.                 // 通知按钮状态变化
    28.                 (LoginCommand as RelayCommand)?.RaiseCanExecuteChanged();
    29.             }
    30.         }
    32.         // 登录绑定命令
    33.         public ICommand LoginCommand { get; }
    35.         // 执行登录
    36.         private void ExecuteLogin(object? obj)
    37.         {
    38.             MessageBox.Show($"{Account}");
    39.         }
    41.         // 控制按钮是否可点
    42.         private bool CanExecuteLogin(object? obj)
    43.         {
    44.             return !string.IsNullOrWhiteSpace(Account);
    45.         }
    47.         // 绑定更新
    48.         void OnPropertyChanged(string propertyName)
    49.         {
    50.             PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    51.         }
    52.     }
    53. }

    复制代码
  
  
• RelayCommand.cs
  
  
  
  • 1. using System;
    2. using System.Collections.Generic;
    3. using System.Linq;
    4. using System.Text;
    5. using System.Threading.Tasks;
    6. using System.Windows.Input;
    8. namespace MVVM_Demo.Commands
    9. {
    10.     public class RelayCommand : ICommand
    11.     {
    12.         private readonly Action<object?> _execute;
    13.         private readonly Func<object?, bool>? _canExecute;
    15.         public event EventHandler? CanExecuteChanged;
    17.         public RelayCommand(Action<object?> execute, Func<object?, bool>? canExecute = null)
    18.         {
    19.             _execute = execute;
    20.             _canExecute = canExecute;
    21.         }
    23.         // 能否启用
    24.         public bool CanExecute(object? parameter)
    25.         {
    26.             return _canExecute == null || _canExecute(parameter);
    27.         }
    29.         // 执行逻辑
    30.         public void Execute(object? parameter) => _execute(parameter);
    32.         // 手动刷新按钮状态
    33.         public void RaiseCanExecuteChanged()
    34.         {
    35.             CanExecuteChanged?.Invoke(this, EventArgs.Empty);
    36.         }
    37.     }
    38. }

    复制代码
  
  

<blockquote>
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！