WPF MVVMLight 2：Model、View、ViewModel结构以及全局视图模型注入器的说明

已于 2022-07-20 14:36:57 修改
阅读量1.3k 收藏 8
点赞数
分类专栏： C# 文章标签： wpf ui c#
于 2022-07-20 14:26:15 首次发布
原文链接：https://www.cnblogs.com/wzh2010/p/6285990.html
版权

上一篇我们已经介绍了如何使用NuGet把MVVMLight应用到我们的WPF项目中。这篇我们来了解下一个基本的MVVMLight框架所必须的结构和运行模式。
MVVMLight安装之后，我们可以看到简易的框架布局，如上篇，生成了一个ViewModel文件夹，ViewModel层的内容都放在这边，除了Main对象的ViewModel之外，还包含一个ViewModelLocator文件，
用来注入当前的ViewModel全局实例。

一、先来说说分层结构：
在这里插入图片描述
如图：
1、View负责前端展示，与ViewModel进行数据和命令的交互。
2、ViewModel，负责前端视图业务级别的逻辑结构组织，并将其反馈给前端。
3、Model，主要负责数据实体的结构处理，与ViewModel进行交互。

根据上述的分层，我们来进行编码。
先建立一个完整三层结构的目录，如图，包含Model、View、ViewModel三层文件夹：
在这里插入图片描述
1、写一个Model，代码如下：

using GalaSoft.MvvmLight;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MVVMLightDemo.Model
{
    public class WelcomeModel : ObservableObject
    {
        private String introduction;
        /// <summary>
        /// 欢迎词
        /// </summary>
        public String Introduction
        {
            get { return introduction; }
            set { introduction = value; RaisePropertyChanged(()=>Introduction); }
        }
    }
}

很简单，仅仅是包含一个实体对象，这边注意的的是那他继承了一个父类：ObservableObject，这个父类的作用就是保证能够检测属性是否被改变。
它实现了INotifyPropertyChanged接口，通过触发PropertyChanged事件达到通知UI更改的目的；
所以我们在定义实体对象的时候，只需要调用RaisePropertyChanged(PropertyName)就可以进行属性更改通知了。
所以实体里面定义的每个属性都加上RaisePropertyChanged(PropertyName)的调用，就可以实现对UI的交互更新了。

2、写一个VideModel，来负责跟View的交互。

using GalaSoft.MvvmLight;
using MVVMLightDemo.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MVVMLightDemo.ViewModel
{
    public class WelcomeViewModel:ViewModelBase
    {
        /// <summary>
        /// 构造函数
        /// </summary>
        public WelcomeViewModel()
        {
            Welcome = new WelcomeModel() { Introduction = "Hello World！" };
        }
        #region 属性

        private WelcomeModel welcome;
        /// <summary>
        /// 欢迎词属性
        /// </summary>
        public WelcomeModel Welcome
        {
            get { return welcome; }
            set { welcome = value; RaisePropertyChanged(()=>Welcome); }
        }
        #endregion
    }
}

也很简单，包含了一个命名为Welcome的WelcomeModel属性，继承了ViewBaseModel父类，
ViewBaseModel同时继承 ObservableObject类和ICleanup接口。所以他同样有INotifyPropertyChanged接口的能力，
能够通过触发PropertyChanged事件达到通知View的目的；
构造函数中对 Welcome 属性进行了实例化。

3、写一个View，来显示和交互ViewModel。

<Window x:Class="MVVMLightDemo.View.WelcomeView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WelcomeView" Height="300" Width="300">
    <Grid>
        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" >
            <TextBlock Text="{Binding Welcome.Introduction}" FontSize="30" ></TextBlock>
        </StackPanel>
    </Grid>
</Window>

TextBlock 绑定了 Welcome.Introduction，所以应该显示Welcome对象下的Introduction属性。
这时候的ViewModel和View是没有任何关系的，所以我们在code-Behind的构造函数中写上如下代码：

using MVVMLightDemo.ViewModel;
using System.Windows;

namespace MVVMLightDemo.View
{
    /// <summary>
    /// Interaction logic for WelcomeView.xaml
    /// </summary>
    public partial class WelcomeView : Window
    {
        public WelcomeView()
        {
            InitializeComponent();
            this.DataContext = new WelcomeViewModel();
        }
    }
}

把 WelcomeViewModel 赋值给当前视图的数据上下文。所以可以在当前视图中使用ViewModel中所有的公开属性和命令。

执行效果如下：
在这里插入图片描述
二、再来说说构造器：
如果使用NuGet安装的是完整的一个是MVVM Light 框架，而非 MVVM Light libraries only的时候，总是会带上ViewModelLocator类，并且生成资源字典并加入到了全局资源中。
在这里插入图片描述

<Application x:Class="MVVMLightDemo.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="View/WelcomeView.xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             d1p1:Ignorable="d"
             xmlns:d1p1="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:MVVMLightDemo.ViewModel" >
  <Application.Resources>
    <ResourceDictionary>
            <vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" />
    </ResourceDictionary>
  </Application.Resources>
</Application>

所以每次App初始化的时候，就会去初始化ViewModelLocator类。
实际上他就是一个很基本的视图模型注入器。在构造器中把使用到的ViewModel统一注册，并生成单一实例。
然后使用属性把它暴露出来，每当我们访问属性的时候，就会返回相应的ViewModel实例。

/*
  In App.xaml:
  <Application.Resources>
      <vm:ViewModelLocator xmlns:vm="clr-namespace:MVVMLightDemo"
                           x:Key="Locator" />
  </Application.Resources>

  In the View:
  DataContext="{Binding Source={StaticResource Locator}, Path=ViewModelName}"

  You can also use Blend to do all this with the tool's support.
  See http://www.galasoft.ch/mvvm
*/

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Ioc;
using Microsoft.Practices.ServiceLocation;

namespace MVVMLightDemo.ViewModel
{
    /// <summary>
    /// This class contains static references to all the view models in the
    /// application and provides an entry point for the bindings.
    /// </summary>
    public class ViewModelLocator
    {
        /// <summary>
        /// Initializes a new instance of the ViewModelLocator class.
        /// </summary>
        public ViewModelLocator()
        {
            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

            #region Code Example
            if (ViewModelBase.IsInDesignModeStatic)
            {
                // Create design time view services and models
                SimpleIoc.Default.Register<IDataService, DesignDataService>();
            }
            else
            {
                // Create run time view services and models
                SimpleIoc.Default.Register<IDataService, DataService>();
            }
            #endregion

            SimpleIoc.Default.Register<MainViewModel>();
        }

        #region 实例化
        public MainViewModel Main
        {
            get
            {
                return ServiceLocator.Current.GetInstance<MainViewModel>();
            }
        }

        #endregion

        public static void Cleanup()
        {
            // TODO Clear the ViewModels
        }
    }
}

注意的是，这边把MVVMLight 自带的SimpleIoc作为默认的服务提供者,它是个简易的注入框架。
为了统一化，并且在设计的时候可以看到看到ViewModel的数据，这边用ServiceLocator 又将SimpleIoc包裹了一层。
上面我们写了一个Hello World，这时候就可以用这种方式改装了。

/*
  In App.xaml:
  <Application.Resources>
      <vm:ViewModelLocator xmlns:vm="clr-namespace:MVVMLightDemo"
                           x:Key="Locator" />
  </Application.Resources>

  In the View:
  DataContext="{Binding Source={StaticResource Locator}, Path=ViewModelName}"

  You can also use Blend to do all this with the tool's support.
  See http://www.galasoft.ch/mvvm
*/

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Ioc;
using Microsoft.Practices.ServiceLocation;

namespace MVVMLightDemo.ViewModel
{
    /// <summary>
    /// This class contains static references to all the view models in the
    /// application and provides an entry point for the bindings.
    /// </summary>
    public class ViewModelLocator
    {
        /// <summary>
        /// Initializes a new instance of the ViewModelLocator class.
        /// </summary>
        public ViewModelLocator()
        {
            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

            #region Code Example
            if (ViewModelBase.IsInDesignModeStatic)
            {
                // Create design time view services and models
                SimpleIoc.Default.Register<IDataService, DesignDataService>();
            }
            else
            {
                // Create run time view services and models
                SimpleIoc.Default.Register<IDataService, DataService>();
            }
            #endregion

            SimpleIoc.Default.Register<MainViewModel>();
            SimpleIoc.Default.Register<WelcomeViewModel>();
        }

        #region 实例化
        public MainViewModel Main
        {
            get
            {
                return ServiceLocator.Current.GetInstance<MainViewModel>();
            }
        }

        public WelcomeViewModel Welcome
        {
            get
            {
               return ServiceLocator.Current.GetInstance<WelcomeViewModel>();
            }
        }

        #endregion

        public static void Cleanup()
        {
            // TODO Clear the ViewModels
        }
    }
}

注册完WelcomeViewModel实例之后，我们就可以在相应的View中使用了 ，原本的

 public WelcomeView()
 {
         InitializeComponent();
         this.DataContext = new WelcomeViewModel();
 }

中的 this.DataContext = new WelcomeViewModel(); 可以去掉了，直接在WelcomeView中这样写：

DataContext=“{Binding Source={StaticResource Locator},Path=Welcome}”，如下图：
在这里插入图片描述
这样做的好处，一个是绑定化相对于简单粗暴的赋值方式，更合理。一个是在可视化窗口可以看到所绑定的数据，达到所见即所得的友好效果。
如下：
在这里插入图片描述
当我们改掉绑定到的数据，编译之后就会立马呈现：
在这里插入图片描述
服务端开发人员可以专心写ViewModel的业务逻辑代码，UI开发人员可以专注设计视图了，
同样 ViewModel可以绑定到不同的视图上，所以从这边就可以体现出他其中的三个重要特性：低耦合、可重用性、独立开发。

大家有没有发现ViewModelLocator 类中还有个 ClearnUp()方法，主要目的用来清除ViewModel实例的。
ViewModelBase继承了GalaSoft.MvvmLight.ICleanup接口，并在自己的类中写好了Cleanup()虚方法。所以我们在实例ViewModel类中可以重写Cleanup()来达到清除当前实例的目的。
这个在后面几篇讲解数据绑定和命令的时候会详细了解。
点击下载源码

PS：本文转载自博客园的作者Brand的原创文章，感谢原作者的分享。原文链接：https://www.cnblogs.com/wzh2010/p/6285990.html

Echo_Lee0
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【WPF】MVVMLight
weixin_56814032的博客
08-27 2043
一、MVVM介绍 MVVM（Model-View-ViewModel）—— 类似于MVC、MVP的设计模式（非框架级别），由MVP(Model-View-Presenter）模式与WPF结合的应用方式发展演变过来的一种新型架构。主要目的是分离视图（View）和模型（Model）的耦合。 1、结构： 2、优点： （1）低耦合：视图（View）独立于Model的变化，一个ViewModel可以绑定到不同的View上。View变化时Model可以不变，Model变化时View可以不变。 ...
MVVMLight页面跳转WPF
08-31
MVVMLight是由GalaSoft开发的一个轻量级MVVM（Model-View-ViewModel）框架，它为WPF和UWP提供了很多便利，包括事件代理、依赖属性助手、以及简单易用的页面导航服务。 首先，我们需要理解MVVM模式。这是一种设计...
WPF 高级篇 MVVMlight
时意
12-18 3006
准备工作 新建一个WPF应用成 下载MVVMlight框架 安装好后 看一下引用层面 多了几个GalaSoft.MvvMLight.DLL 框架安装好了 准备一个基础类 因为Model 和数据层 不是重点 这里就直接贴码 Book&BookData namespace WPF.Models { public class Book { ...
搭建WPF上的UI自动化测试框架
最新发布
软件测试技术交流分享
05-14 747
OEA 1.0-2.0 框架中，界面都是以 WPF 技术作为基础平台开发的。我们需要对开发出来的系统进行自动化测试，而 .NET 平台的自动化测试平台在公司内部还没有其它部门完成，所以我们在使用 Ruby + VS UIUnitTest 开发了一个 UI 自动化（UI Automation，以下简称为UIA）框架，估且称其为 UIA 1.0。
17、Model、View的基本理解
伍粟的博客
04-08 2519
Model/View(模型/视图)结构是Qt中用界面组件显示与编辑数据的一种结构，视图（View）是显示和编辑数据的界面组件，模型（Model）是视图与原始数据之间的接口。Model/View结构的典型应用是在数据库应用程序中，例如数据库中的一个数据表可以在一个QTableView组件中显示和编辑。 将界面组件与所编辑的数据分离开来，又通过数据源的方式连接起来，是处理界面与数据的一种较好的方式。 模型、视图和代理之间使用信号与槽通信。当源数据发生变化时，数据模型发射信号通知视图组件；当用户在
WPF编程，MvvmLight框架安装、使用入门
热门推荐
君一席
06-10 1万+
MVVM是Model-View-ViewModel的简写。类似于目前比较流行的MVC、MVP设计模式，主要目的是为了分离视图（View）和模型（Model）的耦合。 它是一种极度优秀的设计模式，但并非框架级别的东西，由MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构。 1、安装 参考：https://www.cnblogs.com...
View, Model
weixin_43956958的博客
09-29 415
Model/View结构
WPF MVVM工具MVVMLightDEMO案例
11-24
MVVM（Model-View-ViewModel）模式是WPF中常用的设计模式，它分离了用户界面（View）、业务逻辑（ViewModel）和数据模型（Model），使得代码更易于测试和维护。MVVMLight是一款轻量级的MVVM框架，它为开发者提供了...
WPF Prism MVVM弹窗及国际化小示例
11-21
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）环境中使用Prism库和MVVM（Model-View-ViewModel）设计模式实现增删改查、弹窗以及国际化功能。Prism是.NET Framework中用于构建模块化、可...
GalaSoft.MvvmLight.WPF4
07-15
在软件开发领域，尤其是Windows Presentation Foundation（WPF）应用程序的构建中，Model-View-ViewModel（MVVM）设计模式已经成为了主流。GalaSoft.MvvmLight.WPF4和GalaSoft.MvvmLight.Extras.WPF4是两个关键的库...
MEF 结合 MVVMLight
12-21
MEF是一个用于构建可扩展应用程序的.NET框架，而MVVMLight则是一个轻量级的MVVM（Model-View-ViewModel）设计模式实现库，它简化了UI和业务逻辑之间的解耦。** **MEF的主要功能包括：** 1. **组件发现**：MEF允许...
WPF中实现最简单的MVVM模式（Model View ViewModel）
abc1564984930的博客
12-06 8929
示例 说明 WPF的MVVM的实现过程，数据驱动
20WPF---MVVMLight框架
qq_58563355的博客
03-02 2252
轻量（相对于Prism），专注（仅负责MVVM架构模式的实现，没有其他多余的组件），高效（使用简易，省时省力）.MainWindow中弹出子窗体,但在子窗体绑定的数据模型中开启一个线程,该线程不会随着子窗体的关闭而关闭。在ViewModelLocator类中做统一的对象释放。4.MVVMLight框架常用对象。5.8如何拿到子窗体的打开关闭状态。5.7Messenger全局消息。5.2 ICleanup清除内存。若传递EventArgs参数。5.6 ICommand命令。在子窗体关闭事件中调用。
WPF MVVMLight1：MVVMLight介绍以及在项目中的使用
Guarder_7的博客
07-20 3187
MVVMLight介绍以及在项目中的使用
WPF真入门教程29--MVVM常用框架之MvvmLight
hqwest的专栏
02-24 1964
在WPF中，有几个常用的MVVM（Model-View-ViewModel）开源框架，这些框架提供了方便的工具和模式来帮助开发人员实现MVVM架构。以下是几个常用的MVVM开源框架：1. Prism：Prism是一个由微软模式和实践团队开发的开源框架，它提供了一套用于开发可扩展、可测试和可维护的WPF应用程序的工具和指南。Prism提供了解耦视图、模型和视图模型的机制，以及用于导航、命令、事件聚合等常用功能。
C#学习--ViewModelLocator的作用
lufylegend_fans的博客
08-31 1869
C#学习--ViewModelLocator的作用写在前面传统模式依赖注入第一部分第二部分第三部分关联写在结尾 写在前面 又是很久没更新文章了，前几天在和群友们讨论框架的时候，有个人遇到了这样的问题，他说我主程序打开了一个子窗口，对子窗口进行了修改之后，关闭子窗口，当再次打开时子窗口显示的数据是改动之后的数据。当时我看到这个问题，我觉得不可思议，不可能啊，我从来没遇到过这样的情况啊。后来在一个大佬的讲解下我才明白了事情的缘由，如果你也遇到了一样的情况或者刚刚接触MVVM框架，那么请往下看。 传统模式 因为我
WPF MVVM框架MvvmLight使用入门
海盗Sharp的博客
03-23 2022
MVVM Light是WPF的一个mvvm框架，目前已经停止维护，适用于Net framework版本下的WPF程序，如果要在net5或者更新的net版本使用，可以使用新的CommunityToolkit.Mvvm包，它是 .NET 社区工具包的一部分，用法和MvvmLight类似。
WPF 高级篇 MVVM (MVVMlight) 依赖注入使用Messagebox
时意
12-18 3739
MVVMlight 实现依赖注入 把弹框功能 和接口功能注入到各个插件中 使用依赖注入 先把所有的ViewModel都注册到到容器中 MVVMlight SimpleIoc 来实现注册 public ViewModelLocator() { SimpleIoc.Default.Register<MainViewModel>...
kotlin mvvm
03-27
Kotlin MVVM是一种在Kotlin语言中使用的软件架构模式，它结合了Model-View-ViewModel（MVVM）和Kotlin语言的特性，用于构建可扩展、可维护和可测试的Android应用程序。 在Kotlin MVVM中，应用程序被分为三个主要组件： 1. Model（模型）：负责处理数据和业务逻辑。它可以是从网络获取数据、数据库操作或其他数据源的处理。 2. View（视图）：负责展示数据给用户，并接收用户的输入。它通常是Activity、Fragment或View的实现。 3. ViewModel（视图模型）：作为View和Model之间的中间层，负责管理View的状态和数据，并将用户的操作传递给Model进行处理。ViewModel通常包含LiveData或RxJava等用于观察数据变化的机制。 Kotlin MVVM的核心思想是将业务逻辑与界面逻辑分离，使得代码更加清晰、可维护和可测试。ViewModel通过LiveData或其他观察者模式来通知View数据的变化，从而实现了数据驱动的界面更新。 使用Kotlin MVVM可以带来以下好处： 1. 降低代码耦合度，提高代码的可读性和可维护性。 2. 方便进行单元测试，因为业务逻辑与界面逻辑分离。 3. 支持数据的持久化和缓存，提高应用程序的性能。 4. 更好地支持界面的复用和扩展。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值