轻量级的MVVM-MVVM Light

最新推荐文章于 2024-06-23 07:29:19 发布
最新推荐文章于 2024-06-23 07:29:19 发布
阅读量6.5k 收藏 32
点赞数 13
分类专栏： MVVM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hd51cc/article/details/117712509
版权

使用 NuGet 查找和安装 MVVM Light

要在 NuGet 中查找 MVVM Light，请按照下列步骤操作：

  • 在 Visual Studio 中打开您的项目。
  • 右键单击 "引用"，然后从上下文菜单中选择“管理Nuget程序包”。

  • 在“Manage Nuget Packages”对话框中，选择右侧的“Online”。
  • 在搜索字段中，输入“mvvmlight”。
  • 选择 MVVM Light 包并按下 Install 按钮（顶部选项；其他选项将在下面进一步解释）。

完成这些步骤后，您的项目已进行以下更改：

  • 添加了“packages”文件夹，其中包含以下库。请注意，此文件夹已添加到项目结构的根目录中，并且不会出现在解决方案资源管理器中。

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="CommonServiceLocator" version="2.0.2" targetFramework="net472" />
  <package id="MvvmLight" version="5.4.1.1" targetFramework="net472" />
  <package id="MvvmLightLibs" version="5.4.1.1" targetFramework="net472" />
</packages>
  • 添加了一个带有两个附加类的 ViewModel 文件夹：
    • ViewModelLocator.cs
    • MainViewModel.cs

  • App.xaml 文件已通过添加 ViewModelLocator 作为全局资源进行了修改。
<Application
    x:Class="MVVMDemo.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:d1p1="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:MVVMDemo"
    d1p1:Ignorable="d"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" xmlns:vm="clr-namespace:MVVMDemo.ViewModel" />
        </ResourceDictionary>
    </Application.Resources>
</Application>

在 XAML 中绑定 DataContext

使用新的文件结构，ViewModelLocator 在 App.xaml（全局资源）中公开并可用作 DataContext 绑定的源。

也已添加到项目中的 MainViewModel 作为属性在 ViewModelLocator 中公开。有关此架构的更多详细信息，请参阅了解 MVVM 模式和深入研究 MVVM。

注意：如果您的项目中不需要 MainViewModel，请随意删除此类。

要将 MainViewModel 用作 MainPage 或 MainWindow 的 DataContext，请使用以下步骤：

  • 打开 MainPage.xaml 或 MainWindow.xaml。
  • 将以下行添加到 MainPage/MainWindow 的开始标记：
DataContext="{Binding Main, Source={StaticResource Locator}}"

从现在开始，MainPage/MainWindow 的 DataContext 设置为 ViewModelLocator 公开的 MainViewModel 实例。可以使用不同的视图/视图模型对随意重复这些步骤。

创建自己的MVVM实例

完成《使用 NuGet 查找和安装 MVVM Light》后

此时编译会产生错误

需要删除

此时编译可以可启动。

 

作为范例，我们继续删除

新建Model(后台)、View（前台UI）、ViewModel（前后UI与后台关联处理）三个文件夹。

并创建自己所需的Model、View、ViewModel文件。

修改启动

设计Model（Model1.cs）

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


namespace MVVMDemo.Model
{
    public class Model1:ViewModelBase   //根据需求派生
    {
        private int number1;
        private int number2;
        private int sum;

        public int Number1 { get => number1; set { number1 = value;RaisePropertyChanged(); } } //RaisePropertyChanged通知变更
        public int Number2 { get => number2; set { number2 = value; RaisePropertyChanged(); } }
        public int Sum { get => sum; set { sum = value; RaisePropertyChanged(); } }

        public void SumExe()
        {
            Sum = Number1 + Number2;
            //System.Windows.MessageBox.Show(Number1+"\n"+ Number2  +"\n" + Sum + "\n");
        }
    }
}

设计View（UI），绑定数据源、绑定命令

<Window
    x:Class="MVVMDemo.View.View1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:MVVMDemo.View"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="View1"
    Width="300"
    Height="250"
    mc:Ignorable="d">
    <StackPanel>
        <TextBox Width="250" Height="40" Margin="5" Text="{Binding ModelProp.Number1}" />
        <TextBox Width="250" Height="40" Margin="5" Text="{Binding ModelProp.Number2}" />
        <TextBox Width="250" Height="40" Margin="5" Text="{Binding ModelProp.Sum}" />
        <Button
            Width="250"
            Height="40"
            Margin="5"
            Command="{Binding addCommand}"
            Content="Add" />
    </StackPanel>
</Window>

处理ViewModel

这里提下，Binding model1.Number1是不行的，需要用属性暴露。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using GalaSoft.MvvmLight;       //添加
using GalaSoft.MvvmLight.Command;//添加
using MVVMDemo.Model;           //添加

namespace MVVMDemo.ViewModel
{
    public class ViewModel1 : ViewModelBase  //必须派生自ViewModelBase
    {
        public ViewModel1()
        {
            ModelProp = new Model1() ;
            addCommand = new RelayCommand(ModelProp.SumExe);
        }
        private Model1 model1;

        public RelayCommand addCommand { get; set; }
        public Model1 ModelProp { get => model1; set => model1 = value; }
    }
}

最后，把ViewModel实例化，作为View的Context

using MVVMDemo.ViewModel;   //添加ViewModel引用
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace MVVMDemo.View
{
    /// <summary>
    /// View1.xaml 的交互逻辑
    /// </summary>
    public partial class View1 : Window
    {
        public View1()
        {
            InitializeComponent();
            this.DataContext = new ViewModel1();
        }
    }
}

MVVM有什么用？

MVVM即Model-View-ViewModel

Model：应用程序中处理数据逻辑的一部分，通常用来模型对象对数据库的存取等操作

View：视图部分，通常指前端页面用来对用户展示的一部分

可以将ViewMode看作是Model和View的连接桥，View可以通过事件绑定Model，Model可以通过数据绑定View，通过ViewMode可以实现数据和视图的完全分离

 

MVVM主要优势是实现了UI和逻辑的开发解耦。

范例：客户对此UI不满意，希望number1和number2希望用slider输入

修改UI，新增View2，修改View2

<Window
    x:Class="MVVMDemo.View.View2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:MVVMDemo.View"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="View2"
    Width="300"
    Height="250"
    mc:Ignorable="d">
    <StackPanel>
        <Slider Width="250" Height="40" Margin="5" Maximum="10" Minimum="0" IsSnapToTickEnabled="True" TickFrequency="1" AutoToolTipPlacement="BottomRight"  Value="{Binding ModelProp.Number1}" />
        <Slider Width="250" Height="40" Margin="5" Maximum="10" Minimum="0" IsSnapToTickEnabled="True" TickFrequency="1" AutoToolTipPlacement="BottomRight"  Value="{Binding ModelProp.Number2}" />
        <TextBox Width="250" Height="40" Margin="5" Text="{Binding ModelProp.Sum}" />
        <Button
            Width="250"
            Height="40"
            Margin="5"
            Command="{Binding addCommand}"
            Content="Add" />
    </StackPanel>
</Window>

using MVVMDemo.ViewModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace MVVMDemo.View
{
    /// <summary>
    /// View2.xaml 的交互逻辑
    /// </summary>
    public partial class View2 : Window
    {
        public View2()
        {
            InitializeComponent();
            this.DataContext = new ViewModel1();
        }
    }
}

修改启动项目

<Application
    x:Class="MVVMDemo.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:d1p1="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:MVVMDemo"
    d1p1:Ignorable="d"
    StartupUri="View\View2.xaml">
    <Application.Resources>
        <ResourceDictionary />
    </Application.Resources>
</Application>

运行

结果

只修改了View，甚至没有修改ViewModel。

正常修改View，基本都需要修改ViewModel。

参考资料

https://docs.microsoft.com/en-us/archive/msdn-magazine/2013/may/mvvm-commands-relaycommands-and-eventtocommand

https://docs.microsoft.com/en-us/archive/msdn-magazine/2014/june/mvvm-the-mvvm-light-messenger-in-depth

https://docs.microsoft.com/en-us/archive/msdn-magazine/2013/march/mvvm-messenger-and-view-services-in-mvvm

https://docs.microsoft.com/en-us/archive/msdn-magazine/2013/february/mvvm-ioc-containers-and-mvvm

https://docs.microsoft.com/en-us/archive/msdn-magazine/2012/windows-8-special-issue/mvvm-using-the-mvvm-pattern-in-windows-8

https://docs.microsoft.com/en-us/archive/msdn-magazine/2013/april/mvvm-maximizing-the-visual-designer%E2%80%99s-usage-with-design-time-data

 

https://www.bilibili.com/video/BV1mJ411F7zG?p=9

https://www.bilibili.com/video/BV1ht411e7Fe?p=7

hd51cc
关注
专栏目录
像 MvvmLight 一样使用 CommunityToolkit.Mvvm 工具包
lingshuangcanxue
07-19 1379
CommunityToolkit.Mvvm 包（又名 MVVM 工具包，以前称为 Microsoft.Toolkit.Mvvm）是一个现代、快速和模块化的 MVVM 库。这里我们像MvvmLight 一样来使用
Mvvm Light Toolkit 入门
C_Li_的博客
07-03 8582
之前学习UWP的时候就一直看到有关MVVM的资料但是一直没有系统的去学，最近正好有时间，特地来攻破这个点。
WPF MVVM框架MvvmLight使用入门
海盗Sharp的博客
03-23 2273
MVVM Light是WPF的一个mvvm框架，目前已经停止维护，适用于Net framework版本下的WPF程序，如果要在net5或者更新的net版本使用，可以使用新的CommunityToolkit.Mvvm包，它是 .NET 社区工具包的一部分，用法和MvvmLight类似。
MVVM架构详解：前端开发的理想选择
最新发布
cooldream2009的博客
06-23 3372
在前端开发领域，架构设计始终是一个热门话题。随着应用程序变得越来越复杂，选择合适的架构变得尤为重要。在众多架构模式中，MVVM（Model-View-ViewModel）架构因其独特的优势和广泛的应用受到了开发者的青睐。MVVM架构是MVC（Model-View-Controller）的一种变体，特别适用于数据绑定和视图逻辑处理。这篇文章将详细探讨MVVM架构的各个方面，帮助读者更好地理解和应用这一架构模式。
MVVMLight
qq_36790837的博客
02-19 1046
1.写一个Model ObservableObject，这个父类的作用就是保证能够检测属性是否被改变。 它实现了INotifyPropertyChanged接口，通过触发PropertyChanged事件达到通知UI更改的目的；所以我们在定义实体对象的时候，只需要调用RaisePropertyChanged(PropertyName)就可以进行属性更改通知了。所以实体里面定义的每个属性都加上RaisePropertyChanged(PropertyName)的调用，就可以实现对UI的交互更新了.
【MVVM Light】新手初识MVVM，你一看就会
weixin_30564785的博客
09-03 160
一、前言 作为一个初入软件业的新手，各种设计模式与框架对我是眼花缭乱的。所以当我接触到这些新知识的时候就希望自己能总结几个步骤，以便更好更方便的在日常工作中进行使用。 MVVM顾名思义就是Model-View-View Model的缩写。老司机们一直说绑定绑定，我就纳闷了View是展示，Model是模型，那View Model怎么写处理的逻辑呢？它是如何将Model和Vi...
【WPF】MVVMLight
weixin_56814032的博客
08-27 2064
一、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 1：MVVMLight介绍以及在项目中的使用
weixin_30780221的博客
01-14 451
一、MVVM 和 MVVMLight介绍 MVVM是Model-View-ViewModel的简写。类似于目前比较流行的MVC、MVP设计模式，主要目的是为了分离视图（View）和模型（Model）的耦合。 它是一种极度优秀的设计模式，但并非框架级别的东西，由MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构。 立足于原有MVP框架并且把...
MvvmLight-Sample-master.zip
10-24
MvvmLight（Model-View-ViewModel Light）是由GalaSoft公司开发的一个轻量级的MVVM（Model-View-ViewModel）库，广泛用于Windows桌面应用、UWP、Xamarin和 Uno 平台的开发。 MVVM是一种设计模式，它鼓励分离应用...
.NET-MVVMSidekick一个基于RX与await等新技术的轻量级MVVM框架
08-14
.NET-MVVMSidekick是一个专为.NET开发者设计的轻量级MVVM（Model-View-ViewModel）框架，它充分利用了Reactive Extensions (RX) 和 `async/await` 等现代编程技术，以提高应用程序的可维护性、响应性和开发效率。...
MVVM-Services-Sample:MVVM Light Toolkit 示例，用于使用 View 到 ViewModel 通信服务
06-17
**MVVM-Services-Sample** 是一个基于 **MVVM Light Toolkit** 的示例项目，它专注于展示如何在MVVM架构中实现View与ViewModel之间的通信，尤其是利用轻量级服务进行跨层交互。MVVM（Model-View-ViewModel）是一种...
MVVMLight.zip
12-18
MVVMLight.zip
MVVM light小实例
10-28
MVVMLight silverlight 的一个小实例
GalaSoft.MvvmLight.WPF4
07-15
GalaSoft.MvvmLight.WPF4 GalaSoft.MvvmLight.Extras.WPF4
MVVMLight页面跳转WPF
08-31
MVVMLight是由GalaSoft开发的一个轻量级MVVM（Model-View-ViewModel）框架，它为WPF和UWP提供了很多便利，包括事件代理、依赖属性助手、以及简单易用的页面导航服务。 首先，我们需要理解MVVM模式。这是一种设计...
WPFTemplate:简单的WPF项目设置，其中包括MahApps，MVVM-light，log4net，NUnit之类的库
05-02
MVVM Light是GalaSoft公司开发的一个轻量级MVVM库，它提供了一系列辅助类和工具，如命令实现、事件代理、依赖注入等，简化了MVVM模式在WPF中的实现，让代码更加清晰和易于测试。 3. **log4net** log4net是Apache...
MVVMLight -构造器
qq_23018459的博客
03-05 783
如果使用NuGet安装的是完整的一个是MVVM Light 框架，而非 MVVM Light libraries only的时候，总是会带上ViewModelLocator类，并且生成资源字典并加入到了全局资源中。 1 &lt;Application x:Class="MVVMLightDemo.App" 2 xmlns="http://schemas...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值