WPF中MVVM架构学习笔记

最新推荐文章于 2024-06-13 14:44:48 发布
最新推荐文章于 2024-06-13 14:44:48 发布
阅读量418 收藏 8
点赞数 7
文章标签： microsoft c# 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67244432/article/details/139178921
版权

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

MVVM架构的特点

  1. 数据驱动：MVVM架构的核心是数据驱动，当数据发生变化时，视图会自动更新，反之亦然。这种双向数据绑定的机制大大减少了开发者在视图和数据之间手动同步的工作量。
  2. 分离关注点：通过将Model、View和ViewModel三者进行分离，开发者可以更加专注于各自领域的开发，提高了代码的可维护性和可重用性。
  3. 视图与业务逻辑解耦：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}"/>

我爱喝伊利
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
wpf.rar_WPF
09-14
本压缩包文件"wpf.rar"包含了一本中文版的WPF学习笔记，名为“中文版WPF学习笔记.pdf”。这份资料详细讲解了WPF的基础知识和技术要点，是初学者和进阶者理想的参考资料。 1. **基础概念** - **XAML**: WPF的主要...
WPF —— MVVM架构
04-25 1601
MVVM是一种软件架构模式，它将应用程序分为三个层次 model（数据模型），view（视图），viewmodel（视图模型）model：表示应用程序当中数据和业务逻辑，通俗来说就是对象。例如学生的姓名和年龄等放到一个class里面，作为一个对象view：就是xaml文件，处理用户交互和展示数据的 交互就是事件click，展示就是数据绑定等viewmodel：数据和页面之间的桥梁，可以处理一些ui逻辑，也可以处理数据绑定，可以执行ui界面的命令（类似于事件）也可以处理ui界面事件。
WPF之MVVM模式
向往的是：佛祖堂前的鱼，静静听禅。
11-21 7695
MVVM即模型-视图-视图模型 ，是用于解耦 UI 代码和非 UI 代码的 设计模式。借助 MVVM，可以在 XAML 中以声明方式定义 UI，将 UI使用数据绑定标到包含数据和命令的其他层。数据绑定提供数据和结构的松散耦合，使 UI 和链接的数据保持同步，同时可以将用户输入路由到相应的命令。MVVM模式由M（Model），V（View），VM（ViewModel）三部分组成，其设计模式类似为MVC开发模式。目的是解耦UI和代码，编译编辑和修改。
C# WPF入门学习主线篇（三十）—— MVVM（Model-View-ViewModel）模式
最新发布
weixin_56595425的博客
06-13 1610
在本篇文章中，我们介绍了MVVM模式的基本概念，并通过一个简单的示例演示了如何在WPF应用程序中实现MVVM模式。我们详细讲解了Model、View和ViewModel的定义和实现，以及如何通过数据绑定和命令绑定实现UI和业务逻辑的分离。
WPF基础系列六：MVVM框架
热门推荐
iceberg7012的博客
04-07 2万+
MVVM框架 文章目录MVVM框架前言一、MVVM框架简介1. 什么是MVVM？2. MVVM的优势3.MVVM的应用场景二、MVVM使用及示例 前言 在WPF开发中，经典的编程模式是MVVM，是为WPF量身定做的模式，该模式充分利用了WPF的数据绑定机制，最大限度地降低了Xmal文件和CS文件的耦合度，也就是UI显示和逻辑代码的耦合度，如需要更换界面时，逻辑代码修改很少，甚至不用修改。 与WinForm开发相比，我们一般在后置代码中会使用控件的名字来操作控件的属性来更新UI，而在WPF中通常是通过
WPF基础之MVVM模式
yigu4011的博客
06-27 3661
什么是MVVM?MVVM是Model-View-ViewModel的简写。它本质上就是MVC （Model-View- Controller）的改进版。即模型-视图-视图模型。MVVM示意图如下所示：安装MvvmLight插件：项目名称右键-->管理NuGet程序包-->搜索MvvmLight-->安装。接下来通过MVVM实现数据的CRUD【增删改查】基础操作。MVVM开发步骤：1. 创建Model层本例主要是对学生信息的增删改查，所以创建Student模型类。2. 创建DAL层。
WPF（五） MVVM模式
Hello World!
08-25 2032
MVVM是Model-View-ViewModel的简写，MVVM是一种设计模式，类似于比较流行的MVC。这种模式引入的主要的目的就是将前端UI视图（View）和后端逻辑数据（Model）进行分离，从而降低前后端的耦合，提高项目的开发效率和可维护性、可拓展性。......
基于WPF下的MVVM架构理解
weixin_42393604的博客
09-07 4721
目录 接触MVVM的背景 MVVM简介 MVVM框架 MVVM的特性 MVVM的优点 MVVM的搭建 主要分层 准备工作 客户端代码架构逻辑 模块代码架构逻辑 模块公用代码架构逻辑 逻辑类代码架构逻辑 辅助类代码架构逻辑 MVVM理解 开发过程遇到的困难与优点 MVVM不足 个人理解 接触MVVM的背景 对于MVVM（Model-View-ViewModel）的接触主要有两方面：1.工作上的需要，之前修改的工具SettingTools由于界面逻辑与业务逻辑耦合度过高，每
wpf经典代码集合 wpf经典学习笔记 wpf从菜鸟到精通
09-06
综上所述，"wpf经典代码集合 wpf经典学习笔记 wpf从菜鸟到精通" 提供了一套完整的WPF学习资源，无论你是刚接触WPF的新手，还是希望深化技能的开发者，都可以从中受益。通过深入学习这些内容，你将能够熟练运用WPF...
wpf 学习资料(2)
09-26
5. **SIMPLE_MVVM_SOURCE**：这可能是简化版的MVVM源码，适合初学者快速上手，通过阅读和修改代码，可以深入理解MVVM架构的工作原理。 在学习这些资源时，你应该重点关注以下几点： - WPF的基本概念，如依赖属性、...
MVVMDemo04
03-19
在MVVM架构中，模型层通常与视图和视图模型解耦，因此可以独立进行单元测试和重构。"MVVMDemo04"中的模型可能包含了数据访问对象（DAO）、实体类（Entity）以及相关的业务服务。 ### 二、视图（View） 视图是用户...
dotnet 单元测试 Mock 让一个对象继承多个接口.rar
06-03
在WPF项目中进行单元测试可能会涉及到MVVM（Model-View-ViewModel）架构，其中ViewModel层是主要的测试目标，因为它包含了业务逻辑。 OpenXML是另一个相关的主题，它是用于读写Microsoft Office文件格式（如Word、...
WPF MVVM
博客
11-19 1875
WPF MVVM
WPF教程（十五）MVVM框架
鱼骨头科技
09-26 9003
作者本人以前是做C++的，当然很顺利的进入到WinForm，这也让我基本没有View-Model思维。学习WPF说白点也是因为其强大的UI，其实我忽视了很重要的一点，直到接触了MVVM框架，其实Web前后端开发已经指明了未来编程趋势，各干各的：完美的前段和强劲的后端，个人是这么认为的。 WPF是微软视其为下一代用户界面技术，XAML的使用就是为了降低耦合度。那么我们不得不说说WinForm和WP......
WPF真入门教程23--MVVM简单介绍
hqwest的专栏
12-25 2460
在WPF开发中，经典的编程模式是MVVM，是为WPF量身定做的模式，该模式充分利用了WPF的数据绑定机制，最大限度地降低了Xmal文件和CS文件的耦合度，也就是UI显示和逻辑代码的耦合度，如需要更换界面时，逻辑代码修改很少，甚至不用修改。在响应用户操作上，WinForm是通过控件的事件来处理，而WPF可以使用命令绑定的方式来处理，耦合度将降低，WPF技术的主要特点是数据驱动UI,所以在使用WPF技术开发的过程中是以数据为核心的，WPF提供了数据绑定机制，当数据发生变化时，WPF会自动发出通知去更新UI。
WPF-MVVM详解
weixin_45769182的博客
11-20 2187
MVVM模式是一种视图UI和业务逻辑分开的程序设计模式，有点类似MVC，但是比MVC又改进了一些。MVVM做的授权就是把其中的view 视图层的状态和行为抽象出来。ViewModel分离视图和业务。可以获取Model的数据，经过业务处理之后展现给View层。还可以实时检测到View层的数据更新，经过业务处理之后修改Model的数据，这是双向数据绑定。
wpf 中MVVM模式概要
kalvin_y_liu的博客
02-16 810
MVVM的Model、View、ViewModel分工 1.View 负责界面和显示，界面构成元素有window, controls, page, dataTemplete, custom controls…. 代码通常有XAML和XAML.CS组成，但后台代码应该很少 通过DataContext和ViewModel绑定不直接和Model交互！ 控件可以和ViewModel的公共属性绑定，update需要双向绑定 控件可以触发Behavior/Command调用ViewModel的方法，Command是V
WPF MVVM简单介绍
HETONGDE的博客
02-19 3179
WPF自学入门（十）WPF MVVM简单介绍 - 黄昏前黎明后 - 博客园 前面文章中，我们已经知道，WPF技术的主要特点是数据驱动UI,所以在使用WPF技术开发的过程中是以数据为核心的，WPF提供了数据绑定机制，当数据发生变化时，WPF会自动发出通知去更新UI。 　　我们不管是NET中还是WPF中使用模式目的就是想达到高内聚低耦合。在WPF开发中，经典的编程模式是MVVM，是为WPF量身定做的模式，该模式充分利用了WPF的数据绑定机制，最大限度地降低了Xmal文件和CS文件的耦合度，也就是UI显示..
C# 浅谈基于Wpf下的MVVM模式的设计思想
morliz的博客
12-14 5101
仅对Wpf浅谈及了MVVM的一种设计思想的实现，仍还需再提炼细化它的价值空间。
wpf中mvvm模式实例
06-26
### 回答1： WPF（Windows Presentation Foundation）是一个基于XAML的应用程序框架，主要面向Windows桌面应用程序的开发。MVVM（Model-View-ViewModel）是一种设计模式，它将应用程序分为三个主要的部分：模型，视图和视图模型。在MVVM中，视图和视图模型是分离的，视图模型呈现数据，并且视图与模型直接通信。 在WPF中，MVVM是一个广泛使用的模式，并且在实际应用程序中实现起来非常简单。以下是一个MVVM模式实例： 我们建立一个学生管理系统，包括添加学生，编辑学生和显示学生。 首先是数据模型（Model），在这个例子中，我们需要一个Student类，包括姓名，年龄和成绩。 ``` public class Student { public string Name { get; set; } public int Age { get; set; } public float Score { get; set; } } ``` 然后是视图模型（ViewModel），在这里我们需要三个属性：Students（学生列表），SelectedStudent（所选学生），和AddCommand（添加学生命令）。 ``` public class StudentViewModel : INotifyPropertyChanged { private ObservableCollection<Student> _students; private Student _selectedStudent; public ICommand AddCommand { get; private set; } public event PropertyChangedEventHandler PropertyChanged; public ObservableCollection<Student> Students { get { return _students; } set { if (_students != value) { _students = value; OnPropertyChanged("Students"); } } } public Student SelectedStudent { get { return _selectedStudent; } set { if (_selectedStudent != value) { _selectedStudent = value; OnPropertyChanged("SelectedStudent"); } } } public StudentViewModel() { Students = new ObservableCollection<Student>(); AddCommand = new RelayCommand(AddStudent); } private void AddStudent() { Students.Add(new Student() { Name = "New Student" }); } private void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } } ``` 最后是视图（View），在这个例子中，我们需要一个包含学生列表和Add按钮的窗口。 ``` <Window x:Class="StudentManager.View.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Student Manager" Height="350" Width="525" DataContext="{StaticResource StudentViewModel}"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <ListView ItemsSource="{Binding Students}" SelectedItem="{Binding SelectedStudent}"> <ListView.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Name}" Margin="5" /> <TextBlock Text="{Binding Age}" Margin="5" /> <TextBlock Text="{Binding Score}" Margin="5" /> </StackPanel> </DataTemplate> </ListView.ItemTemplate> </ListView> <Button Content="Add" Command="{Binding AddCommand}" Grid.Row="1" HorizontalAlignment="Right" Margin="5" Padding="5" /> </Grid> </Window> ``` 在这个例子中，我们使用Data Binding（数据绑定）将视图与视图模型联系起来。数据绑定是指在WPF应用中，允许将数据源与某个控件的属性绑定，当数据源更新时，UI自动更新。为了实现Data Binding，我们使用了INotifyPropertyChanged和RelayCommand。 INotifyPropertyChanged是一个接口，它使ViewModel可以通知视图它的属性已经更新。 RelayCommand是一个实现了ICommand接口的类，它将一些指定的命令关联到一个按钮，当条件满足时该按钮可以被按下。 在这个例子中，我们建立了一个具有添加，编辑和显示学生信息的学生管理器。这个例子演示了MVVM模式如何在WPF实现，希望能帮助你更好的理解如何使用MVVM模式来构建应用程序。 ### 回答2： MVVM（Model-View-ViewModel）是一种软件设计模式，用于将GUI应用程序的UI与其后端逻辑分开。WPF（Windows Presentation Foundation）是一个微软框架，用于创建Windows桌面应用程序。 在WPF中使用MVVM模式需要创建三种对象：模型（Model）、视图（View）和视图模型（ViewModel）。模型代表业务逻辑和数据，视图是用户界面，而视图模型则是连接两者的桥梁。 模型中存储着应用程序的数据，我们需要编写类来表示数据结构。视图是XAML文件，包含了UI设计。视图模型是一个C#类，作为一种观察者模式，观察模型的变化并通知视图来更新。 在视图模型中，需要维护着与视图交互的所有数据和命令。我们使用绑定（Binding）来处理两种对象之间的数据交互，从而实现视图和视图模型的解耦。 所以，实现WPF中的MVVM模式需要我们设计好模型、视图和视图模型之间的交互方式，很好的分离了应用程序的UI逻辑和后端业务逻辑，提高了应用程序的可维护性、可扩展性和可重用性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值