WPF中MVVM架构学习笔记

🕗 发布于 2024-05-25 15:58 microsoft c# 开发语言

MVVM架构是一种基于数据驱动的软件开发架构，它将数据模型（Model）、视图（View）和视图模型（ViewModel）三者进行分离，使得开发者可以更加专注于各自领域的开发。其中，Model负责存储和管理数据，View负责数据的展示，而ViewModel则作为Model和View之间的桥梁，负责数据的双向绑定和业务逻辑的处理。

MVVM架构的特点

数据驱动：MVVM架构的核心是数据驱动，当数据发生变化时，视图会自动更新，反之亦然。这种双向数据绑定的机制大大减少了开发者在视图和数据之间手动同步的工作量。
分离关注点：通过将Model、View和ViewModel三者进行分离，开发者可以更加专注于各自领域的开发，提高了代码的可维护性和可重用性。
视图与业务逻辑解耦：ViewModel负责处理业务逻辑，而View只负责展示数据，这种设计使得视图和业务逻辑之间的耦合度大大降低，提高了代码的可读性和可测试性。

实现效果：

阶段一：代码创建文件放置，搭建出INotifyPropertyChanged进行前后台数据更新

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition Height="150"/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Border BorderThickness="1" BorderBrush="Black" Grid.Row="1" Height="30" Width="200" VerticalAlignment="Top" >
        <TextBox  Text="{Binding UserName}"/>
    </Border>

    <Border BorderThickness="1" BorderBrush="Black" Grid.Row="1" Height="30" Width="200" VerticalAlignment="Top" Margin="0,40,0,0"  >
        <TextBox Text="{Binding PassWord}" />
    </Border>
    <Button Grid.Row="1" Height="30" Width="200" VerticalAlignment="Bottom" Content="按钮" Click="Button_Click"/>

 



</Grid>

namespace WpfApp_libarymassage
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
       
        public MainWindow()
        {
            this.DataContext = this;
            InitializeComponent();
         
        }


        private string _UserName;
        public string UserName
        {
            get { return _UserName; }
            set { _UserName = value;
                OnPropertyChanged("UserName");
            }
        }

        private string _PassWord;
        public string PassWord
        {
            get { return _PassWord; }
            set { _PassWord = value;
                OnPropertyChanged(PassWord);
            }
        }




        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
        }



        private void Button_Click(object sender, RoutedEventArgs e)
        {
            //string useName = textUserName.Text;
            //string passWord = textPassWord.Text;
            
            if (UserName == "AA" && PassWord == "123456" )
            {
                MessageBox.Show("Loding Successful");
            }
            else
            {
                MessageBox.Show("Load Fail");
                UserName = "";
                PassWord = "";
            }

        }
    }


}

阶段二：创建Model和ViewModel文件，降低数据的关联

LoginModel.cs文件

public class LoginModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }


    private string _UserName;
    public string UserName
    {
        get { return _UserName; }
        set
        {
            _UserName = value;
            OnPropertyChanged("UserName");
        }
    }

    private string _PassWord;
    public string PassWord
    {
        get { return _PassWord; }
        set
        {
            _PassWord = value;
            OnPropertyChanged(PassWord);
        }
    }
}

LoginViewModel.cs

 public class LoginViewModel
 {
     private LoginModel _loginM; //创建LoginModel类型的变量_loginM
     public LoginModel LoginM   
     {
         get { 
             if (_loginM == null)   //如果没有实列化LoginModel，实列化LoginModel
                 _loginM = new LoginModel();
             return _loginM; }
         set { _loginM = value; }
     }
 }

XAM文件

 public partial class MainWindow : Window
 {
     LoginViewModel loginViewModel; //创建变量LoginViewModel类型的变量loginViewModel
     public MainWindow()
     {         
         loginViewModel = new LoginViewModel(); //loginViewModel进行实列化
         this.DataContext = loginViewModel;    //绑定上下文
         InitializeComponent();

     }



     private void Button_Click(object sender, RoutedEventArgs e)
     {
         //因为我们实列话了LoginViewModel（），绑定的的变量是在LoginViewModel中的LoginM中
         //所以变量连接为loginViewModel.LoginM.UserName
         if (loginViewModel.LoginM.UserName == "AA" && loginViewModel.LoginM.PassWord == "123456" )
         {
             MessageBox.Show("Loding Successful");
         }
         else
         {
             MessageBox.Show("Load Fail");
             loginViewModel.LoginM.UserName = "";
             loginViewModel.LoginM.PassWord = "";
         }

     }
 }

  <Border BorderThickness="1" BorderBrush="Black" Grid.Row="1" Height="30" Width="200" VerticalAlignment="Top" >
      <TextBox  Text="{Binding LoginM.UserName}"/>
  </Border>

  <Border BorderThickness="1" BorderBrush="Black" Grid.Row="1" Height="30" Width="200" VerticalAlignment="Top" Margin="0,40,0,0"  >
      <TextBox Text="{Binding LoginM.PassWo

阶段三：将按钮放入ViewModel中

ICommand接口调用

RelayCommander.cs

internal class RelayCommander:ICommand
{
    readonly Func<bool> _canExecute; //命令是否能够执行
    readonly Action _execute; //命令需要执行的方法
    public RelayCommander(Action action, Func<bool> canExecute)
    {
        _execute =action;
        _canExecute =canExecute;
    }

    public bool CanExecute(object parameter)
    {
        if (_canExecute != null)
        {
            return true;
        }
        return _canExecute();
    }

    public void Execute(object parameter)
    {
        _execute();
    }

    public event EventHandler CanExecuteChanged
    {
        add
        {
            if (_canExecute != null)
            {
                CommandManager.RequerySuggested += value;
            
            }
        }
        remove
        {
            if ( _canExecute != null)
            {
                CommandManager.RequerySuggested -= value;
            }
        }
    }
}

在ViewModel中调用接口

public class LoginViewModel
{
    private LoginModel _loginM; //创建LoginModel类型的变量_loginM
    public LoginModel LoginM   
    {
        get { 
            if (_loginM == null)   //如果没有实列化LoginModel，实列化LoginModel
                _loginM = new LoginModel();
            return _loginM; }
        set { _loginM = value; }
    }


    //登录按钮方法
    void LoginFunc()
    {
        if (LoginM.UserName == "AA" && LoginM.PassWord == "123456")
        {
            MessageBox.Show("Loding Successful");
        }
        else
        {
            MessageBox.Show("Load Fail");
            LoginM.UserName = "";
            LoginM.PassWord = "";
        }
    }

    bool CanLoginExcute() { return true; }
    //命令绑定至按钮
    public ICommand LoginButton   //LoginButton参数为按钮Command绑定的参数
    { 
        get
        {
            return new RelayCommander(LoginFunc, CanLoginExcute);
        }
    
    }


}

xaml

public partial class MainWindow : Window
{
    LoginViewModel loginViewModel; //创建变量LoginViewModel类型的变量loginViewModel
    public MainWindow()
    {         
        loginViewModel = new LoginViewModel(); //loginViewModel进行实列化
        this.DataContext = loginViewModel;    //绑定上下文
        InitializeComponent();

    }

}

<Button Grid.Row="1" Height="30" Width="200" VerticalAlignment="Bottom" Content="按钮" Command="{Binding LoginButton}"/>

原文地址：https://blog.csdn.net/weixin_67244432/article/details/139178921

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：HTML5 本地存储与应用缓存
下一篇：uniapp 对接微信App/支付宝App 支付

leetcode289:生命游戏
根据，简称为，是英国数学家约翰·何顿·康威在 1970 年发明的细胞自动机。给定一个包含m × n个格子的面板，每一个格子都可以看成是一个细胞。每个细胞都具有一个初始状态：1即为（live），或0即为
阅读更多2024-10-20
MongoDB数据恢复
注意：两个MongoDB的版本要一致，本文使用的是mongo:4.2.24。先把K8S上面的MongoDB 容器停止（可以把副本改成0）。1、将容器挂载MongoDB的数据目录备份到本地。经常是数据文
阅读更多2024-10-20
C#中实现事务
C#中实现事务
阅读更多2024-10-20
【LeetCode每日一题】——560.和为 K 的子数组
给你一个整数数组 nums 和一个整数 k ，请你统计并返回该数组中和为 k 的子数组的个数。子数组是数组中元素的连续非空序列。
阅读更多2024-10-20
「漏洞复现」满客宝智慧食堂系统 selectUserByOrgId 未授权访问漏洞
请勿利用文章内的相关技术从事非法测试，由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失，均由使用者本人负责，作者不为此承担任何责任。工具来自网络，安全性自测，如有侵权请联系删除。本次
阅读更多2024-10-20
React面试题目（从基本到高级）
React前端面试常见题目涵盖了React的基础概念、组件、状态管理、生命周期、性能优化等多个方面。
阅读更多2024-10-20
12.个人博客系统（Java项目基于spring和vue）
1 在校学习的学生，可用于日常学习使用或是毕业设计使用 2 毕业一到两年的开发人员，用于锻炼自己的独立功能模块设计能力，增强代码编写能力。 3 亦可以部署为商化项目使用。 4 需要完整资料及源码
阅读更多2024-10-20
YoloV8改进策略：注意力改进|DeBiFormer，可变形双级路由注意力|引入DeBiLevelRoutingAttention注意力模块（全网首发）
本次改进的核心在于将DeBiLevelRoutingAttention模块嵌入到YoloV8的主干网络中，具体位置是在SPPF（Spatial Pyramid Pooling Fast）模块之后。这一
阅读更多2024-10-20
word取消自动单词首字母大写
情况说明：在word输入单词后首字母会自动变成大写取消单词首字母大写步骤：（1）点击菜单栏文件（2）点击“更多”——>“选项”（3）点击“校对”——>“自动更正选项”（4）取消“句首字母大
阅读更多2024-10-20
web前端网页用户注册页面
【代码】web前端网页用户注册页面。
阅读更多2024-10-20

WPF中MVVM架构学习笔记

阶段一：代码创建文件放置，搭建出INotifyPropertyChanged进行前后台数据更新

阶段二：创建Model和ViewModel文件，降低数据的关联

阶段三：将按钮放入ViewModel中

相关文章