WPF和MvvmLight框架学习记录，持续更新中

已于 2022-04-18 13:48:10 修改
阅读量815 收藏 6
点赞数 2
分类专栏： C# 文章标签： C# wpf
于 2022-04-14 11:03:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39559239/article/details/124166897
版权

1. 简介

1.1 目前处于WPF和MvvmLight学习阶段，如有错误，请批评指正

1.2 关于MvvmLight

MvvmLight是一个轻量级框架，使用Model-View-ViewModel模式，分离前后端，使开发更加的高效。

2. 创建WPF项目

alt

框架选择.Net5.0

alt

3. MvvmLight包安装

3.1 管理NuGet程序包，搜索mvvmlight，选择如图所示的包安装

alt

4. 框架搭建

4.1 创建View、Model、ViewModel 3个文件夹

4.2 移动MainWindow.xaml

4.2.1 将MainWindow.xaml移动到View文件夹下，并修改其命名空间

alt

4.2.2 修改MainWindow.xaml第一行为

<Window x:Class="WpfMvvmLightApp.View.MainWindow"

4.2.3 修改MainWindow.xaml.cs的命名空间为WpfMvvmLightApp.View

4.2.4 修改App.xaml的StartupUrl为"View/MainWindow.xaml"

4.3 创建ViewModelLocator类

4.3.1 在ViewModel文件夹下创建ViewModelLocator类

4.3.3 App.xaml添加资源

<Application x:Class="WpfMvvmLightApp.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfMvvmLightApp"
             StartupUri="View/MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <vm:ViewModelLocator xmlns:vm="clr-namespace:WpfMvvmLightApp.ViewModel" x:Key="Locator" />
        </ResourceDictionary>
    </Application.Resources>
</Application>

4.4 创建MainViewModel

4.4.1 在ViewModel文件夹下创建MainViewModel类，继承自ViewModelBase

4.5 在ViewModelLocator注册关联MainViewModel

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

namespace WpfMvvmLightApp.ViewModel
{
    public class ViewModelLocator
    {
        public ViewModelLocator()
        {
            SimpleIoc.Default.Register<MainViewModel>();
        }
        /// <summary>
        /// 主页viewmodel
        /// </summary>
        public MainViewModel MainVM
        {
            get
            {
                return SimpleIoc.Default.GetInstance<MainViewModel>();
            }
        }
    }
}

4.6 在MainWindow.xaml关联MainVM

4.6.1 在Windows标签添加属性DataContext

    <Window x:Class="WpfMvvmLightApp.View.MainWindow"
        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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfMvvmLightApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        DataContext="{Binding Source={StaticResource Locator}, Path=MainVM}">
    <Grid>

    </Grid>
</Window>

5. 编写界面和数据逻辑

5.1 创建一个Model

5.1.1 在Model文件夹创建一个MainModel类，用于管理数据和操作，需要继承ObservableObject类，并创建一些属性和方法

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

namespace WpfMvvmLightApp.Model
{
    public class MainModel : ObservableObject
    {
        private string msg = "hello";

        public string Msg
        {
            get { return msg; }
            set
            {
                msg = value;
                //数据改变通知界面刷新，不加则界面不会改变，注意属性是Msg而不是msg，msg会导致递归死循环
                RaisePropertyChanged(() => Msg);
            }
        }

        private int val;

        public int Val
        {
            get { return val; }
            set
            {
                val = value;
                RaisePropertyChanged(() => Val);
            }
        }


        public RelayCommand AddCommand { get; set; }
        public RelayCommand<string> ShowInfoCommand { get; set; }

        public MainModel()
        {
            AddCommand = new RelayCommand(() => Add());
            ShowInfoCommand = new RelayCommand<string>(info => ShowInfo(info));
        }

        private void Add()
        {
            Val++;
        }
        private void ShowInfo(string info)
        {
            MessageBox.Show(info, "ShowInfo被触发");
        }
    }
}

5.2 直接在ViewModel关联数据和操作

5.2.1 这个和在Model中分开写类似，就是将Model中的内容都写到ViewModel中，可以自行感受下区别。

5.2.2 如果是在View.xaml.cs中用WPF的方式进行binding，那么在使用string等非引用类型的时候不能实现关联，需要用类进行包装。

5.3 在ViewModel中加入Model对象

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

namespace WpfMvvmLightApp.ViewModel
{
    public class MainViewModel : ViewModelBase
    {
        private MainModel model;

        public MainModel Model
        {
            get { return model; }
            set { model = value; }
        }

        public MainViewModel()
        {
            model = new MainModel();
        }

    }
}

5.4 在View中关联Model对象数据

5.4.1 xaml代码

<Window x:Class="WpfMvvmLightApp.View.MainWindow"
        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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfMvvmLightApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        DataContext="{Binding Source={StaticResource Locator}, Path=MainVM}">
    <Grid>
        <!--定义列和列宽-->
        <Grid.ColumnDefinitions>
            <!--带*的表示比例-->
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <!--定义行和行高-->
        <Grid.RowDefinitions>
            <!--带px或者只有数字的表示像素-->
            <RowDefinition Height="80"/>
            <RowDefinition Height="80"/>
            <RowDefinition Height="80"/>
        </Grid.RowDefinitions>
        <!--在第0行第0列创建textbox，字体大小50，内容垂直居中，关联到Model的Msg属性-->
        <TextBox Grid.Row="0" Grid.Column="0" Text="{Binding Model.Msg}" FontSize="50" VerticalContentAlignment="Center"/>
        <!--创建Button，关联到Model的ShowInfoCommand方法，添加参数 "你好，世界！"-->
        <Button Grid.Row="0" Grid.Column="1" Content="ShowInfo" Command="{Binding Model.ShowInfoCommand}" CommandParameter="你好，世界！"/>
        <TextBox Grid.Row="1" Grid.Column="0" Text="{Binding Model.Val}" FontSize="50" VerticalContentAlignment="Center"/>
        <!--创建Button，关联到Model的ClickCommand方法-->
        <Button Grid.Row="1" Grid.Column="1" Content="增加" Command="{Binding Model.AddCommand}"/>
    </Grid>
</Window>

5.4.2 运行

点击ShowInfo按钮

alt

点击增加按钮，左侧数值从0变成1

alt

6. binding

6.1 binding翻译为绑定,容易造成误解，其实本意是关联

MvvmLight中使用binding更加的灵活，不像WPF需要在view.xaml.cs中的初始化方法中写界面和数据关联，MvvmLight直接可以在View.xaml中关联ViewModel中的model，因此也不一定要在view.xaml中指定控件的x:Name。

6.2 一些简单binding，比如5.4.1

Text="{Binding Model.Msg}"
Text="{Binding Model.Val}"
Command="{Binding Model.AddCommand}"
Command="{Binding Model.ShowInfoCommand}" CommandParameter="你好，世界！"

6.3 静态资源binding，如7.1.1

ItemsSource="{Binding Source={StaticResource MainTypeEnumKey}}"

7. resource

7.1 在view.xaml创建枚举类型的资源，ComboBox ItemSource关联此资源，DataGrid中的DataGridComboBoxColumn同理

7.1.1 代码

namespace WpfMvvmLightApp.Model
{
    public enum MainType
    {
        A,B,C
    }
}

<!--加到MainWindow的Window属性-->
xmlns:model="clr-namespace:WpfMvvmLightApp.Model"
xmlns:core="clr-namespace:System;assembly=mscorlib"

<!--加到MainWindow的Window Content-->
<Window.Resources>
    <ResourceDictionary>
        <!--MainType列表-->
        <ObjectDataProvider x:Key="MainTypeEnumKey" MethodName="GetValues" ObjectType="{x:Type core:Enum}">
            <ObjectDataProvider.MethodParameters>
                <!--枚举类所在的命名空间和类名-->
                <x:Type Type="model:MainType" />
            </ObjectDataProvider.MethodParameters>
        </ObjectDataProvider>
    </ResourceDictionary>
</Window.Resources>

<!--关联到ComboBox ItemSource-->
<ComboBox Grid.Row="2" Grid.Column="0" ItemsSource="{Binding Source={StaticResource MainTypeEnumKey}}"/>

7.1.2 运行效果

alt

8. 关联的ViewMode-View之间的消息传递

8.1 ViewMode->View

8.1.1 使用DataContext

MainViewModel vm = (MainViewModel)DataContext;

8.2 View->ViewMode

8.2.1 直接通过属性通知

public string Msg
{
    get { return msg; }
    set
    {
        msg = value;
        //数据改变通知界面刷新，不加则界面不会改变，注意属性是Msg而不是msg，msg会导致递归死循环
        RaisePropertyChanged(() => Msg);
    }
}

9. 非关联的ViewMode-View或ViewMode-ViewMode或View-View之间的消息传递

9.1 使用Messenger，效率略低于关联，因此在关联的情况下不使用Messenger

9.1.1 在接收端初始化中注册方法

 Messenger.Default.Register<string>(this, "AddValue", msg =>Model.Add());

9.1.2 在发送端调用

Messenger.Default.Send("", "AddValue");

9.1.3 注意，此处"AddValue"的作用相当于一个key，为了理解方便写了魔法值，建议用一个MessengerToken类去管理这些魔法值，增加程序可读性，同时方便查找引用，例

public class MessengerToken
{
    /// <summary>
    /// 增加值
    /// </summary>
    public const string AddValue = "AddValue";
}

Messenger.Default.Register<string>(this, MessengerToken.AddValue, msg =>Model.Add());
Messenger.Default.Send("", MessengerToken.AddValue);

9.1.4 注意2，此方法传递必须带参数，如果方法没有参数，最好在Register的时候指定string类型，那么需要在Send时附带一个空字符串，禁止使用null传递，会匹配不到对应的方法。

摩特男爵
关注
专栏目录
MvvmLight_WPF_Frame_Nav:具有框架和页面的MvvmLight WPF导航
05-17
MvvmLight_WPF_Frame_Nav 目的 目的是创建一个模板或示例程序，这些模板或示例程序可用作使用MVVMLight工具包和框架控件的WPF C＃导航程序的起始点。 该框架将在几页之间导航，并且该程序将包含MVVMLight的功能。 目标 使用MVVMLight 使用框架控件 在页面之间传递类/对象，并允许从任何页面进行更新，其他页面将显示更新的信息。 合并服务：NavigationService，DialogueService和DataService 使用SimpleIOC 与RelayExecute一起使用RelayCommand 如果需要，请使用Messanger（取决于页面之间对象的传递方式）。 拥有Laurent的Blendable设计时间经验，所以谈论... 问题 框架具有与之关联的navigationService属性，我尝试从WindowsPhon
【WPF】MVVMLight
weixin_56814032的博客
08-27 2066
一、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可以不变。 ...
WPF+Mvvm 项目入门完整教程-仓储管理系统（一）
最新发布
lingshuangcanxue
07-15 635
创建一个简单的基于MvvmLight框架的WPF应用以及如何获取字体图标，包括图标的查找，更新与打包
WPF 高级篇 MVVMlight
时意
12-18 3037
准备工作 新建一个WPF应用成 下载MVVMlight框架 安装好后 看一下引用层面 多了几个GalaSoft.MvvMLight.DLL 框架安装好了 准备一个基础类 因为Model 和数据层 不是重点 这里就直接贴码 Book&BookData namespace WPF.Models { public class Book { ...
WPF编程，MvvmLight框架安装、使用入门
热门推荐
君一席
06-10 1万+
MVVM是Model-View-ViewModel的简写。类似于目前比较流行的MVC、MVP设计模式，主要目的是为了分离视图（View）和模型（Model）的耦合。 它是一种极度优秀的设计模式，但并非框架级别的东西，由MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构。 1、安装 参考：https://www.cnblogs.com...
WPF真入门教程29--MVVM常用框架之MvvmLight
hqwest的专栏
02-24 2957
在WPF中，有几个常用的MVVM（Model-View-ViewModel）开源框架，这些框架提供了方便的工具和模式来帮助开发人员实现MVVM架构。以下是几个常用的MVVM开源框架：1. Prism：Prism是一个由微软模式和实践团队开发的开源框架，它提供了一套用于开发可扩展、可测试和可维护的WPF应用程序的工具和指南。Prism提供了解耦视图、模型和视图模型的机制，以及用于导航、命令、事件聚合等常用功能。
WPF使用MVVMLight框架写的Demo软件
03-01
**WPF与MVVMLight框架** Windows Presentation Foundation (WPF)是Microsoft开发的一种用于构建桌面应用程序...通过学习和实践这个Demo，开发者能够更好地理解如何在实际项目中利用MVVMLight提升开发效率和代码质量。
WPF MVVMLight框架使用源码，可运行看效果
12-24
**WPF MVVMLight框架详解** MVVMLight是GalaSoft公司开发的一个轻量级、易用的MVVM（Model-View-ViewModel）框架...通过对提供的源码进行学习和分析，我们可以掌握如何在实际项目中有效利用MVVMLight，提升开发效率。
WPF+Mvvmlight 简单的导航实例
04-05
在本文中，我们将深入探讨如何使用WPF（Windows Presentation Foundation）框架结合MvvmLight库创建一个简单的导航实例。MvvmLight是由GalaSoft开发的轻量级MVVM（Model-View-ViewModel）库，它为WPF应用提供了一...
MVVMLight页面跳转WPF
08-31
MVVMLight是由GalaSoft开发的一个轻量级MVVM（Model-View-ViewModel）框架，它为WPF和UWP提供了很多便利，包括事件代理、依赖属性助手、以及简单易用的页面导航服务。 首先，我们需要理解MVVM模式。这是一种设计...
20WPF---MVVMLight框架
qq_58563355的博客
03-02 2506
轻量（相对于Prism），专注（仅负责MVVM架构模式的实现，没有其他多余的组件），高效（使用简易，省时省力）.MainWindow中弹出子窗体,但在子窗体绑定的数据模型中开启一个线程,该线程不会随着子窗体的关闭而关闭。在ViewModelLocator类中做统一的对象释放。4.MVVMLight框架常用对象。5.8如何拿到子窗体的打开关闭状态。5.7Messenger全局消息。5.2 ICleanup清除内存。若传递EventArgs参数。5.6 ICommand命令。在子窗体关闭事件中调用。
WPF MVVMLight1：MVVMLight介绍以及在项目中的使用
Guarder_7的博客
07-20 3250
MVVMLight介绍以及在项目中的使用
WPF MVVM框架MvvmLight使用入门
海盗Sharp的博客
03-23 2293
MVVM Light是WPF的一个mvvm框架，目前已经停止维护，适用于Net framework版本下的WPF程序，如果要在net5或者更新的net版本使用，可以使用新的CommunityToolkit.Mvvm包，它是 .NET 社区工具包的一部分，用法和MvvmLight类似。
WPF 高级篇 MVVM (MVVMlight) 依赖注入使用Messagebox
时意
12-18 3825
MVVMlight 实现依赖注入 把弹框功能 和接口功能注入到各个插件中 使用依赖注入 先把所有的ViewModel都注册到到容器中 MVVMlight SimpleIoc 来实现注册 public ViewModelLocator() { SimpleIoc.Default.Register<MainViewModel>...
有关在WPF中使用MVVMLight的基础知识一
Gvision
01-02 1万+
基础知识 使用基础 安装 使用NuGet即可下载到最新免费的MVVMLight，安装之后，会有以下几个DLL被项目引用： 其中还依赖了一个微软的DLL——Microsoft.Practices.ServiceLocation.dll。 - 在使用过程中，**可能遇到的问题：**就是可能是由于MvvmLight没有及时更新，如果将图中的CommonServiceLocator升级到最新的2.x...
MVVMLight(一)入门教程、WPF使用MVVMLitht教程。
xpj8888的博客
01-10 9530
一、入门教程 1、http://www.cnblogs.com/shanlin/p/3954531.html 不全是MVVM模式，但是楼主自己做了一个软件给自己使用，值得学习。软件界面以及在代码在连接里面有 2、https://www.cnblogs.com/manupstairs/p/4890300.html 提供了MvvmLight框架使用入门（一）到（四）入门教程 3、http...
WPF-MVVMLight
ultramand的博客
04-12 257
在这个示例中，ViewModel类继承了MVVMLight框架的ViewModelBase类。在ViewModel类中，我们定义了一个Message属性，并且在构造函数中初始化了这个属性。MVVM是Model-View-ViewModel的缩写，它是一种软件设计模式，将用户界面(UI)与应用程序的逻辑和数据分离。MVVMLight是一个轻量级的MVVM框架，用于帮助开发人员在WPF和Silverlight应用程序中实现MVVM模式。这个简单的MVVMLight应用程序演示了如何使用框架来实现MVVM模式。
WPF 高级篇 MVVM （MVVMlight）绑定
时意
12-18 3736
我们这边来实现MvvMlight 主界面功能 实现数据显示 我们看界面元素 一个ListView 4个值固定的TextBlock 对应下面4个更具选择动态变化的TextBlock 三个Button 那么 分析一下需要的绑定对象 一个是Listview 需要一个 集合对象 选中集合对象 我们要把数据显示到右面 4个TextBlock 里 那么我们还需要被选中的对象 ...
WPF应用程序 MVVM开发示例
Mr_Bobcp的博客
09-23 6289
WPF（Windows Presentation Foundation）是微软推出的基于Windows 的用户界面框架。 MVVM是Model-View-ViewModel的简写。
wpf 使用MvvmLight 工程框架
05-31
好的，你的问题是关于WPF如何使用MvvmLight工程框架。 MvvmLight是一个轻量级的Mvvm框架，它可以帮助开发人员更容易地实现WPF应用程序中的Mvvm模式。下面是使用MvvmLight框架开发WPF应用程序的一些步骤： 1. 首先，在Visual Studio中创建一个WPF应用程序项目。 2. 打开NuGet包管理器，搜索并安装MvvmLight库。 3. 在App.xaml.cs文件中，添加以下代码以初始化MvvmLight框架： ``` public partial class App : Application { static App() { ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default); SimpleIoc.Default.Register<MainViewModel>(); } protected override void OnStartup(StartupEventArgs e) { base.OnStartup(e); var mainWindow = new MainWindow(); mainWindow.Show(); } } ``` 在上面的代码中，我们使用SimpleIoc容器注册了一个MainViewModel，该容器将为我们提供视图模型的实例。 4. 创建一个MainWindow.xaml文件，并在其中添加一个Button控件和一个TextBlock控件。 5. 在MainWindow.xaml.cs文件中，添加以下代码以绑定Button控件的Command属性： ``` public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); DataContext = ServiceLocator.Current.GetInstance<MainViewModel>(); } } ``` 6. 创建一个MainViewModel.cs文件，并添加一个实现ICommand接口的RelayCommand类，用于处理Button控件的点击事件。 7. 在MainViewModel.cs文件中，添加一个用于更新TextBlock控件内容的属性。 8. 在MainWindow.xaml文件中，使用数据绑定将TextBlock控件绑定到MainViewModel中的属性。 到此，我们就完成了使用MvvmLight框架开发WPF应用程序的过程。在实际开发中，我们可以使用MvvmLight框架来简化应用程序的开发过程，提高开发效率。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

摩特男爵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值