MVVM架构

已于 2024-05-16 17:14:24 修改
阅读量1.5k 收藏 27
点赞数 31
分类专栏： MVVM架构 文章标签： wpf c# 架构
于 2024-05-16 16:54:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_3517289697/article/details/138967067
版权

介绍

MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVVM模式有助于将应用程序的业务和表示逻辑与用户界面 (UI) 清晰分离。 保持应用程序逻辑和UI之间的清晰分离有助于解决许多开发问题，并使应用程序更易于测试、维护和演变。 它还可以显著提高代码重用机会，并允许开发人员和UI设计人员在开发应用各自的部分时更轻松地进行协作。

组成部分

MVVM模式，应用的UI以及基础表示和业务逻辑被分成三个独立的类：

视图(View)，用于封装UI和UI逻辑, 也就是交互界面，接受用户的输入和展示数据；

视图模型(ViewModel)，用于封装表示逻辑和状态；

模型(Model)，用于封装应用的业务逻辑和数据。

优势

低耦合：View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的”View”上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

提高代码重用：可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑；

独立开发：业务开发人员可以专注于业务逻辑和数据的开发，界面开发人员可以专注于页面的开发。

使用场景

以下是MVVM架构的应用场景：

场景描述
复杂的用户界面当应用程序具有复杂的用户界面和大量的交互时，MVVM可以提供更好的分层和组织代码的方式。
需要频繁变更的用户界面如果应用程序的用户界面需要频繁变更，MVVM的数据绑定机制可以简化界面更新的过程，提高开发效率。
需要同时支持多个平台或设备的应用程序MVVM的解耦性和可测试性使其非常适合开发需要在多个平台或设备上运行的应用程序，如移动应用和桌面应用。
需要重用代码和逻辑的应用程序MVVM的分离关注点和数据绑定机制使得代码和逻辑的重用更加容易，从而减少了代码的重复编写。
需要高可维护性和可扩展性的应用程序MVVM的分层结构和清晰的职责分离使得应用程序更易于维护和扩展，有利于团队合作和长期项目的发展。 

搭建MVVM架构

1、首先需要新建一个项目，再创建Views，ViewModels，Models 三个文件夹，就是一个基本架构。

2、将我们写的xaml页面放在Views目录下，一般就是命名为：xxxView，然后与之对应的视图模型命令为xxxViewModel放在ViewModels目录下，另外将需要的数据模型放置在Models目录下。

3、再者需要创建一些辅助类的文件目录，一般会创建Resources用于存放一些资源如样式，字体，图片等等，创建一个Helper或者Common的目录，用于存放一些公用的方法类或者帮助类。

实现INotifyPropertyChanged接口

实现属性变更的通知 实现页面指令

public class UserViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler? PropertyChanged;
    
        private User user; // 私有的用户对象
        public string Name { 
            get { return user.Name; } 
            set { 
                user.Name = value; 
                PropertyChanged(this, new PropertyChangedEventArgs("Name")); 
            } 
        }
    
        public int Age {  
            get { return user.Age; } 
            set { 
                user.Age = value; 
                PropertyChanged(this, new PropertyChangedEventArgs("Age")); 
            } 
        }
    }

实现ICommand接口命令

自定义指令

public class MyCommand : ICommand
    {
        //1 事件成员 状态发生变化的时候事件，
        public event EventHandler CanExecuteChanged;
    
        //2 命令是否是可执行状态 参数就是xaml文件通过Commandparameter属性传递过来
        public bool CanExecute(object parameter)
        {
            if (NengBuNengZhiXing == null) return true; //如果外部没有控制状态的函数，默认指令可执行
            // 如果有指令能不能执行的函数，NengBuNengZhiXing返回值为true或者false
    
            return NengBuNengZhiXing.Invoke(parameter);
        }
    
        //3 命令触发之后执行函数 参数就是xaml文件通过Commandparameter属性传递过来
        public void Execute(object parameter)
        {
            this.ChuFaMingLingFun.Invoke(parameter);
        }
    
        // 4
        //定义委托接受命令触发之后的函数 作为Execute要调用的
        Action<object> ChuFaMingLingFun;
        //接受判断命令是否能够执行的函数 ,作为CanExecute的判断条件
        Func<object, bool> NengBuNengZhiXing;
    
        //5 给上面俩个变量赋值 通过构造函数进行赋值
        public MyCommand(Action<object> a1, Func<object, bool> a2)
        {
            this.ChuFaMingLingFun = a1;
            this.NengBuNengZhiXing = a2;
    
        }
        //6 如果可执行的状态的发生变化了 触发CanExecuteChanged事件 在外部修改状态的时候调用
        public void OnCanExecuteChange()
        {
            CanExecuteChanged(this, EventArgs.Empty);
        }
    }

使用ICommand时参数的传递和接收

传递

传递参数时在UI界面中使用 CommandParamete属性进行传递

传递字符串属性

    <Button Height="40" Command="{Binding M1}"
            CommandParameter="Red"></Button>

传递对象属性(传递控件)
RelativeSource传递方式

RelativeSource方式可以绑定父级控件进行传递 祖先：FindAncestor

    <Button Width="100"
                Command="{Binding Cancel}"
                <!--传递对象参数Windows窗体-->
                CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"
                Height="40"
                Margin="200,100,0,0">取消</Button>

ElementName传递方式

FindAncestor方式可以绑定指定控件的Name属性进行传递

    <Button Name="B">保存</Button>
    <Button Width="100"
            Command="{Binding Cancel}"
            CommandParameter="{Binding ElementName=B}"
            Height="40"
            Margin="200,100,0,0">取消</Button>

接收参数

接收参数时，是在IComand命令类中的条件函数中和回调函数中接收

接收的类型对应着传递的类型

    public bool CanExecute(object parameter)
    {
        if (CanWork == null) return true;
        return CanWork.Invoke(parameter);
    }
    
    public void Execute(object parameter)
    {
        this.Work.Invoke(parameter);
    }

ViewModel视图模型中逻辑和状态，

场景：

INotifyPropertyChanged接口和ICommand接口命令搭配使用，绑定指令和接收指令参数，展示模型数据。

UI窗体页面 标签布局
    <Grid>
        <!--Name-->
        <TextBox Text="{Binding Name}" Width="200" Height="40" Margin="-200,0,0,0" ></TextBox>
    
        <!--Age-->
        <TextBox Text="{Binding Age}"
                   Width="200"
                   Height="40"
                   Margin="-200,100,0,0"></TextBox>
        <TextBox Text="{Binding Info}"
                 Width="200"
                 Height="40"
                 Margin="-200,200,0,0"></TextBox>
    
        <Button Width="100"
                Command="{Binding Save}"
                Height="40"
                Margin="200,0,0,0">保存</Button>
        <Button Width="100"
                Command="{Binding Cancel}"
                <!--传递对象参数Windows窗体-->
                CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"
                Height="40"
                Margin="200,100,0,0">取消</Button>
    </Grid>
    
    
    
    
    
    
    在Model模型文件创建存储数据的类
    public class User:INotifyPropertyChanged
    {
        private string _name = "张三";
        public string Name 
        {
            get => _name;
            set 
            {
                _name = value;
                PropertyChanged(this,new PropertyChangedEventArgs("Name"));
            }
        }
    
        private int _age ;
    
        public int Age
        {
            get => _age; 
            set
            {
                _age = value;
                PropertyChanged(this, new PropertyChangedEventArgs("Age"));
            }
        }
    
    
        public event PropertyChangedEventHandler? PropertyChanged;
    }
    
    
    
    
    
    
    
    在ViewModel文件实现后台视图模型逻辑
    public class UserViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler? PropertyChanged;
    
        private User user; // 私有的用户对象（模型类对象）
        public string Name
        {
            get { return user.Name; }
            set
            {
                user.Name = value;
                PropertyChanged(this, new PropertyChangedEventArgs("Name"));
            }
        }
    
        public int Age
        {
            get { return user.Age; }
            set
            {
                user.Age = value;
                PropertyChanged(this, new PropertyChangedEventArgs("Age"));
            }
        }
    
        public string Info
        {
            get { return $"Name:{Name} Age:{Age}"; }
            set { Info = value; }
        }
    
        public void OnpropertyChanged(string n1)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(n1));
            }
        }
    
        // 指令的使用，在对应viewmodel的构造函数中进行使用
        public UserViewModel()
        {
            user = new User();
            Save = new MyCommand(BaoCun); // 保存的指令
            Cancel = new MyCommand(QuXiao); // 取消指令
        }
        public MyCommand Save { get;private set ; }
        public MyCommand Cancel { get;private set ; }
        public void BaoCun(object o)
        {
            MessageBox.Show("保存数据");
            // 数据变化进行
            OnpropertyChanged("Info");
        }
        public void QuXiao(object o)
        {
            // 关闭窗体
            var window = o as Window;
            if (window != null)
            {
                window.Close();
            }
        }
    }
    
    public class MyCommand : ICommand
    {
        public event EventHandler? CanExecuteChanged;
    
        public bool CanExecute(object? parameter)
        {
            if (f1 == null) return true;
            return f1.Invoke(parameter) == true;
        }
    
        public void Execute(object? parameter)
        {
            a1.Invoke(parameter);
        }
    
        Action<object> a1; // 在Execute去调用
        Func<object,bool> f1; // 在CanExecute去调用
    
        // 在构造函数里面给a1和f1赋值
        public MyCommand(Action<object> a1) : this(a1,null)
        {
            this.a1 = a1;
        }
        // 可以传递俩个参数，MyCommand(f1,f2);
        public MyCommand(Action<object> a1,Func<object,bool> f1)
        {
            this.a1 = a1;
            this.f1 = f1;
        }
    
        // 当修改指令状态时候 需要手动调用该函数
        public void OnCanExeutedChanged()
        {
            CanExecuteChanged(this, EventArgs.Empty);
        }
    
    }
    
    
    
    
    
    
    
    在Windows后台cs中进行数据绑定
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new UserViewModel();
        }
    }

“抚琴”的人
关注
  • 31
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS MVVM架构
07-27
MVVM简单Demo，方便迅速了解MVVM架构和KVO传值机制
Mvvm架构介绍
lko1314的博客
04-07 1536
MVVM是Model-View-ViewModel的简写。类似于目前比较流行的MVC、MVP设计模式，主要目的是 为了分离视图（View）和模型（Model）的耦合。 它是一种极度优秀的设计模式，但并非框架级别的东西，由MVP（Model-View-Presenter）模式与 WPF结合的应用方式时发展演变过来的一种新型架构。 立足于原有MVP框架并且把WPF的新特性糅合进去，以应对PC端开发日益复杂的需求变化。 相对于之前把逻辑结构写在Code Behind 里面的方式，MVVM几乎完全解耦了视图和逻辑业
MVVM架构模式
weixin_74239923的博客
08-29 1734
MVVM是Model-View-ViewModel的简写。即是模型-视图-视图模型。MVVM架构模式是一种软件设计模式，它将应用程序分为三个部分：模型（Model）、视图（View）和视图模型（ViewModel）。该模式的目的是将用户界面（UI）逻辑与业务逻辑分离，以便开发人员可以更轻松地管理和修改应用程序。在MVVM模式中，模型表示应用程序中的数据和业务逻辑，视图表示用户界面，视图模型则是连接模型和视图的桥梁。视图模型从模型获取数据并将其转换为视图可以理解的形式，然后将其传递给视图。
MVVM 架构进阶：MVI 架构详解
金戈鐡馬
02-26 1459
MVC架构介绍MVC是个古老的Android开发架构，随着MVP与MVVM的流行已经逐渐退出历史舞台，我们在这里做一个简单的介绍，其架构图如下所示：MVC架构主要分为以下几部分：1.视图层（View）：对应于xml布局文件和java代码动态view部分。2.控制层（Controller）：主要负责业务逻辑，在android中由Activity承担，同时因为XML视图功能太弱，所以Activity既要负责视图的显示又要加入控制逻辑，承担的功能过多。3.模型层（Model）
Android MVVM架构
热门推荐
weixin_53431933的博客
08-16 1万+
MVVM是Model-View-ViewModel的简写，是M-V-VM三部分组成。它本质上就是MVC 的改进 版。MVVM 就是将其中的View 的状态和行为抽象化，其中ViewModel将视图 UI 和业务逻辑分 开，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。2.MVVM采用双向数据绑定，view中数据变化将自动反映到viewmodel上，反之，model中数据变化 也将会自动展示在页面上。把Model和View关联起来的就是ViewModel。...
Flutter MVVM架构
xiangxiongfly
06-16 1730
MVVM即 Model-View-ViewModel的缩写。 简单封装网络请求框架 新建dio_utils.dart文件： 创建Model层 新建login_model.dart文件： 创建ViewModel层 创建View层 配色Provider状态管理 最终效果
MVC及MVVM架构
qq_53142455的博客
12-27 259
MVC及MVVM架构
基于WPF下的MVVM架构理解
weixin_42393604的博客
09-07 4654
目录 接触MVVM的背景 MVVM简介 MVVM框架 MVVM的特性 MVVM的优点 MVVM的搭建 主要分层 准备工作 客户端代码架构逻辑 模块代码架构逻辑 模块公用代码架构逻辑 逻辑类代码架构逻辑 辅助类代码架构逻辑 MVVM理解 开发过程遇到的困难与优点 MVVM不足 个人理解 接触MVVM的背景 对于MVVM（Model-View-ViewModel）的接触主要有两方面：1.工作上的需要，之前修改的工具SettingTools由于界面逻辑与业务逻辑耦合度过高，每
MVVM架构学习
KIS222222的博客
03-27 655
MVVM模型的好处是，除了获得分离之外，还可以实现模型和视图之间的分离，MVVM模型的功效是获得了一个无需查看即可轻松更改的一致模型。实施MVVM的重要关键的要素是可测试性，可维护性和可扩展性。MVVM的对于模型和视图的隔离，大大方便了开发者对于数据状态的维护与管理。
安卓（Android）平台上的MVVM架构：关键知识点、优劣分析及实践示例
wlred1980的博客
04-26 473
本文旨在探讨安卓平台上广泛应用的Model-View-ViewModel（MVVM）架构模式的核心概念、主要优点与潜在不足，并通过实际示例代码阐明其在实际项目中的应用方式。MVVM作为一款推动关注点分离和提高软件质量的架构方案，在安卓应用开发中起着至关重要的作用。
Android MVVM架构源码
04-09
AndroidMVVM架构是在jetpack上的架构，此Demo为一个酷欧天气Jetpack版，可运行出结果，重点为架构学习。
Android Jetpack架构组件及MVVM架构
06-30
Android Jetpack架构组件，大部分程序员还未接触到...课程的最后，会用Android Jetpack架构组件搭建一个MVVM架构的Demo，一边写代码一边讲解，以最简洁的程序案例让大家明白如何使用Android Jetpack架构组件搭建项目。
Kotlin+JetPack+协程实现的MVVM架构Wanandroid客户端
05-21
采用Kotlin语言，使用ViewModel+LiveData+Room+协程搭建MVVM架构，UI采用黑白配色的MD风格，并适配了白天黑夜模式。
Cobaltstrike渗透测试框架
最新发布
2301_80361487的博客
05-26 673
因为链接的Beacons使用Windows命名管道进行通信，此流量封装在SMB协议中，所以SMB Beacon相对隐蔽，绕防火墙时可能发挥奇效。metasploit是一款开源框架，armitage是metasploit框架的图形化界面方式，cobalt strike是armitage的增。beacon指的是受害者与我们的teamserver所建立的这个连接，也可以理解成我们所获的的对方主机的控制权。Foreign为外部结合的Listener，常用于MSF的结合，例如获取meterpreter到MSF上。
C# WPF入门学习（一）
weixin_56595425的博客
05-21 952
WPF（Windows Presentation Foundation）是由微软开发的一种用于构建Windows桌面应用程序的图形子系统。它是.NET框架的一部分，旨在提供一个统一的编程模型，用于构建具有丰富用户界面、图形、动画和媒体的应用程序。WPF最早在2006年作为.NET Framework 3.0的一部分发布。WPF和WinForms各有优缺点，选择使用哪个框架取决于具体的项目需求和开发团队的技术背景。如果你需要创建一个现代化、视觉效果丰富且具有复杂交互的应用，WPF是更好的选择。
WPF之容器标签之Canvas布局标签
qq_3517289697的博客
05-21 449
Canvas:定义一个区域，可在其中使用相对于 Canvas 区域的坐标以显式方式来定位子元素。
WPF 主窗口最大化、最小化、关闭、可拖动
qq_38138159的博客
05-22 737
/获取鼠标相对窗口的位置。//鼠标放在窗口就移动。
android mvvm架构
05-16
Android MVVM 架构是一种基于 Model-View-ViewModel（模型-视图-视图模型）设计模式的架构，它旨在实现 Android 应用程序的高内聚、低耦合、可测试性和可维护性。在 MVVM 架构中，View（视图）和 ViewModel（视图模型）之间通过数据绑定进行通信，ViewModel（视图模型）和 Model（模型）之间通过业务逻辑进行通信。 MVVM 架构将应用程序分为三个部分： 1. Model：处理数据和业务逻辑，与数据库、网络、API 等打交道。 2. View：负责显示 UI、处理用户输入和事件，是用户与应用程序交互的界面。 3. ViewModel：作为 View 和 Model 之间的桥梁，处理视图逻辑、业务逻辑和数据绑定，将 Model 中的数据转换为 View 可以显示的数据。 在 MVVM 架构中，View 和 ViewModel 之间通过数据绑定实现双向通信，View 可以观察 ViewModel 中的数据变化，并及时更新 UI，同时用户的操作也会触发 ViewModel 中的业务逻辑，从而实现 View 和 Model 的解耦。 MVVM 架构的优点包括： 1. 高内聚、低耦合：各个模块之间的职责清晰明确，代码结构清晰，易于维护。 2. 可测试性：ViewModel 和 Model 都是纯 Java 类，不依赖 Android 系统，易于编写单元测试。 3. 可维护性：MVVM 架构使得代码易于维护和扩展，添加新功能时可以只修改 ViewModel 或 Model，而不影响 View。 总之，MVVM 架构是一种适用于 Android 应用程序的高效、可维护的架构，可以提高开发效率、代码质量和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值