零基础入门：30分钟学会CommunityToolkit.MVVM

原创 于 2025-12-19 10:11:49 发布 · 605 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

快速体验

  1. 打开 InsCode(快马)平台 https://www.inscode.net
  2. 输入框内输入如下内容： 
    创建一个最简单的CommunityToolkit.MVVM示例项目，实现一个计数器应用。功能要求：1) 显示当前计数 2) 增加按钮 3) 减少按钮 4) 重置按钮。请提供从项目创建、NuGet包安装到完整代码实现的详细步骤说明，代码注释要详尽，适合完全没有MVVM经验的开发者学习。
  3. 点击'项目生成'按钮，等待项目生成完整后预览效果

示例图片

为什么需要MVVM模式？

作为WPF开发新手，你可能经常遇到界面逻辑和业务代码混在一起的困扰。MVVM模式通过分离视图（View）、视图模型（ViewModel）和模型（Model），让代码更清晰易维护。而CommunityToolkit.MVVM是微软官方推出的轻量级工具包，大大简化了MVVM的实现过程。

环境准备

  1. 确保已安装Visual Studio 2022（社区版即可）
  2. 新建WPF应用程序项目时选择.NET 6或更高版本
  3. 项目创建完成后，我们首先需要通过NuGet安装CommunityToolkit.MVVM包

核心实现步骤

第一步：安装必要包

在解决方案资源管理器中右键项目，选择"管理NuGet程序包"，搜索并安装"CommunityToolkit.Mvvm"。这个包会自动引入所有必要的依赖项，包括源代码生成器，可以帮我们自动生成样板代码。

第二步：创建ViewModel

  1. 在项目中新建一个名为"ViewModels"的文件夹
  2. 添加一个新的类文件"MainViewModel.cs"
  3. 让这个类继承自"ObservableObject"，这是CommunityToolkit提供的基础类，实现了属性变更通知

第三步：实现计数逻辑

在MainViewModel中，我们需要定义计数属性"Count"和三个命令：增加、减少和重置。使用CommunityToolkit提供的特性可以极大地简化代码：

  • 使用"[ObservableProperty]"特性自动生成属性变更通知
  • 使用"[RelayCommand]"特性自动生成命令实现

第四步：绑定到界面

  1. 打开MainWindow.xaml，设置DataContext为我们的ViewModel
  2. 在界面上添加一个TextBlock显示计数，三个按钮分别对应增加、减少和重置操作
  3. 使用Binding语法将界面元素与ViewModel中的属性和命令关联起来

遇到的常见问题

  1. 绑定不生效：检查DataContext是否设置正确，属性名称拼写是否一致
  2. 命令无效：确保使用了RelayCommand特性，并且命令方法为public
  3. 界面不更新：确认属性使用了ObservableProperty特性，或者手动实现了变更通知

为什么选择CommunityToolkit.MVVM

相比手动实现MVVM，CommunityToolkit.MVVM有以下优势：

  • 极简代码：源代码生成器自动生成大量样板代码
  • 开箱即用：内置常用功能如命令、消息等
  • 官方维护：微软持续更新和维护
  • 性能优化：采用现代.NET特性如源生成器

进一步优化方向

完成基础功能后，你可以尝试：

  1. 添加数值范围限制（如不允许负数）
  2. 实现保存/加载计数功能
  3. 添加动画效果增强用户体验
  4. 使用依赖注入管理ViewModel

轻松体验完整项目

想在浏览器中直接体验这个计数器示例吗？推荐使用InsCode(快马)平台，无需安装任何开发环境，打开网页就能看到完整可运行的WPF MVVM示例。

示例图片

我发现平台的一键部署功能特别适合初学者，可以立即看到实际运行效果，比本地搭建环境要方便很多。对于想快速了解MVVM模式的同学，这绝对是个省时省力的好方法。

快速体验

  1. 打开 InsCode(快马)平台 https://www.inscode.net
  2. 输入框内输入如下内容： 
    创建一个最简单的CommunityToolkit.MVVM示例项目，实现一个计数器应用。功能要求：1) 显示当前计数 2) 增加按钮 3) 减少按钮 4) 重置按钮。请提供从项目创建、NuGet包安装到完整代码实现的详细步骤说明，代码注释要详尽，适合完全没有MVVM经验的开发者学习。
  3. 点击'项目生成'按钮，等待项目生成完整后预览效果

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

三大WPF MVVM框架对比：MVVMLight、CommunityToolkit.Mvvm 与 Prism
过客
06-27 2359
WPF MVVM框架对比分析MVVMLight、CommunityToolkit.Mvvm和Prism的核心差异。MVVMLight轻量但已停止维护，适合小型项目；CommunityToolkit.Mvvm为微软官方推荐，采用源码生成优化性能，适合现代开发；Prism提供模块化、导航等企业级功能，适合复杂应用。性能上，MVVMLight启动最快，Prism扩展性最佳。推荐新手使用CommunityToolkit，企业项目选择Prism，旧项目维护可沿用MVVMLight。迁移时，CommunityT....
精选资源
MVVM（GalaSoft.MvvmLight）简单小项目和其它MVVM框架（CommunityToolkit.Mvvm）
10-09
GalaSoft.MvvmLight和CommunityToolkit.Mvvm都为这些功能提供了基础的实现，使得开发者可以更加专注于业务逻辑的实现，而不是基础框架的搭建。 简单项目的开发，往往以创建一个或多个ViewModel开始，这些ViewModel...
WPF MVVM框架：CommunityToolkit.Mvvm包使用介绍
zhaotianff的专栏
07-25 2726
40 MvvmLight中的命令类也叫RelayCommand，使用方法大同小异，但是在引发CanExeCutechanged事件时，有点区分，这点会在后面说明。
CommunityToolkit.Mvvm 安装及使用指南
weixin_66547608的博客
11-26 815
摘要：CommunityToolkit.Mvvm是微软官方推出的轻量级MVVM框架，支持WPF、WinUI、MAUI等.NET平台。其核心特性包括源生成器驱动的属性/命令自动生成、弱引用消息传递和DI适配，通过编译时代码生成实现零反射高性能。安装仅需NuGet包，提供[ObservableProperty]和[RelayCommand]等特性简化开发，支持同步/异步命令、属性变更回调和跨组件通信。相比MvvmLight/Prism，具有更优性能、更低学习成本和更广泛平台支持，是现代化.NET应用开发的推荐选
AduSkin项目MVVM框架升级：从MVVMLight到CommunityToolkit.Mvvm
gitblog_07403的博客
06-26 281
在WPF开发领域，MVVM（Model-View-ViewModel）架构模式已经成为构建可维护、可测试应用程序的标准实践。AduSkin作为一款优秀的WPF控件库，其演示项目近期完成了一项重要的技术升级——将原有的MVVMLight框架迁移至微软官方推荐的CommunityToolkit.Mvvm框架。 ## 升级背景与技术选型 MVVMLight曾经是WPF开发中最流行的MVVM框架之一，...
MvvmLight、CommunityToolkit.Mvvm、Prism 的区别和联系
weixin_66547608的博客
12-02 647
本文对比了三种MVVM框架：MvvmLight、CommunityToolkit.Mvvm(CT.Mvvm)和Prism。MvvmLight轻量但基本停更；CT.Mvvm是微软官方维护的轻量级工具集，支持源生成器等现代特性；Prism则提供模块化、导航等企业级功能。三者都遵循MVVM模式，提供ViewModel基类、命令封装和组件通信机制，但在实现细节和高级特性上存在差异。实例对比展示了各框架在计数器应用中的实现方式，包括基础命令和异步命令的使用。建议小型项目使用CT.Mvvm，大型复杂项目选择Prism，
CommunityToolkit.Mvvm框架
weixin_66547608的博客
10-29 804
CommunityToolkit.Mvvm是微软官方推出的轻量级MVVM框架，支持WPF、UWP、WinUI等.NET平台。它提供ObservableObject（属性通知）、RelayCommand（命令绑定）等核心组件，简化MVVM开发。关键特性包括异步命令支持(AsyncRelayCommand)、IMessenger消息通信机制、数据验证(ObservableValidator)，并与.NET依赖注入兼容。该框架具有跨平台、高性能、学习成本低等优势，适合中小型项目开发。相比Prism等框架更注重简洁
.NET WPF CommunityToolkit.Mvvm框架
Winemonk
11-07 1394
.NET WPF CommunityToolkit.Mvvm框架
Avalonia MVVM原生实现和CommunityToolKit.Mvvm框架实现 MVVM过程
m0_56541793的博客
08-14 572
以登录窗口为例，文本框数据做双向绑定。
WPF中MVVM工具包 CommunityToolkit.Mvvm
去追随使你安宁的东西，去做你觉得有用的事情
11-11 3843
也称为MVVM工具包，是Microsoft Community Toolkit的一部分。它是一个轻量级但功能强大的MVVM（Model-View-ViewModel）库，旨在帮助开发者更容易地实现MVVM设计模式。
WPF + CommunityToolkit.Mvvm + EF + SQLServer + HandyControl+RBAC
09-15
CommunityToolkit.Mvvm是一套提供MVVM模式支持的工具包，它简化了在WPF应用程序中实现MVVM架构的过程。MVVM模式（Model-View-ViewModel）是软件架构模式之一，旨在分离用户界面的展示和业务逻辑的处理。 Entity ...
dotnet-communitytoolkit-mvvm
08-11
dotnet-communitytoolkit-mvvm CommunityToolkit.Mvvm 是一个现代、快速且模块化的 MVVM 库，作为 .NET 社区工具包的一部分。它围绕以下原则构建：平台和运行时独立、易于选取和使用、点菜自由选择要使用的组件、...
ACM-ICPC/CCPC/XCPC算法竞赛资料kmeans聚类
12-18
ACM-ICPC/CCPC/XCPC算法竞赛资料kmeans聚类
【CAOA三维路径规划】基于matlab鳄鱼伏击算法CAOA多无人机协同集群避障路径规划（目标函数：最低成本：路径、高度、威胁、转角）（Matlab代码实现）
12-18
【CAOA三维路径规划】基于matlab鳄鱼伏击算法CAOA多无人机协同集群避障路径规划（目标函数：最低成本：路径、高度、威胁、转角）（Matlab代码实现）内容概要：本文介绍了基于Matlab的鳄鱼伏击算法（CAOA）在多无人机协同集群三维路径规划中的应用，重点解决动态环境下的避障问题。该方法以最低成本为目标函数，综合考虑路径长度、飞行高度、威胁等级和转弯角度等因素，通过优化算法实现无人机集群的安全、高效路径规划。文中提供了完整的Matlab代码实现，便于科研人员复现与改进，适用于复杂环境下的无人机协同任务。; 适合人群：具备一定Matlab编程基础，从事无人机路径规划、智能优化算法或协同控制研究的研究生、科研人员及工程技术人员。; 使用场景及目标：①研究多无人机在复杂三维环境中的协同避障路径规划；②验证和改进鳄鱼伏击算法（CAOA）在实际路径规划中的性能；③实现以最低综合成本为目标的智能路径优化，提升无人机集群的任务执行效率与安全性。; 阅读建议：建议读者结合提供的Matlab代码进行实践操作，深入理解目标函数构建、约束条件处理及算法迭代过程，同时可尝试将算法扩展至更多动态障碍物或更大规模无人机集群场景中进行测试与优化。
基于径向基函数神经网络RBFNN的自适应滑模控制学习（Matlab代码实现）
12-18
基于径向基函数神经网络RBFNN的自适应滑模控制学习（Matlab代码实现）内容概要：本文介绍了基于径向基函数神经网络（RBFNN）的自适应滑模控制方法，并提供了相应的Matlab代码实现。该方法结合了RBF神经网络的非线性逼近能力和滑模控制的强鲁棒性，用于解决复杂系统的控制问题，尤其适用于存在不确定性和外部干扰的动态系统。文中详细阐述了控制算法的设计思路、RBFNN的结构与权重更新机制、滑模面的构建以及自适应律的推导过程，并通过Matlab仿真验证了所提方法的有效性和稳定性。此外，文档还列举了大量相关的科研方向和技术应用，涵盖智能优化算法、机器学习、电力系统、路径规划等多个领域，展示了该技术的广泛应用前景。; 适合人群：具备一定自动控制理论基础和Matlab编程能力的研究生、科研人员及工程技术人员，特别是从事智能控制、非线性系统控制及相关领域的研究人员； 使用场景及目标：①学习和掌握RBF神经网络与滑模控制相结合的自适应控制策略设计方法；②应用于电机控制、机器人轨迹跟踪、电力电子系统等存在模型不确定性或外界扰动的实际控制系统中，提升控制精度与鲁棒性； 阅读建议：建议读者结合提供的Matlab代码进行仿真实践，深入理解算法实现细节，同时可参考文中提及的相关技术方向拓展研究思路，注重理论分析与仿真验证相结合。
STM32F407-RT-Thread-CAN工程代码
12-18
STM32F407芯片，开发环境：RT-Thread Stdio开发环境，使用内部drv_can实现can功能，官方的drv_can.c文件中对于stm32f407的位时序配置错误，已修改位时序，但是800k的CAN速率，由于CAN时钟为42M的原因，无法整除(42/0.8=52.5)，导致800k的速率无法使用.
安卓应用源码Android闹钟源码
12-18
安卓应用源码Android 闹钟源码
转子轴承系统振动分析.zip
最新发布
12-18
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
带频率稀疏学习的轴承故障诊断”.zip
12-18
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
CommunityToolkit.Mvvm 在窗体的后台代码中绑定datacontext=this. 窗体的后台代码如何继承CommunityToolkit.Mvvm
05-12
### 使用 CommunityToolkit.Mvvm 实现 DataContext=this 的绑定 在 WPF 应用程序中，`CommunityToolkit.Mvvm` 提供了一种简洁的方式来实现 MVVM 模式的开发。为了在窗体的后台代码中通过继承 `ObservableObject` 或其他相关类来实现 `DataContext=this` 的绑定，可以按照以下方式操作。 #### 1. 安装 CommunityToolkit.Mvvm NuGet 包 首先，在项目中安装 `CommunityToolkit.Mvvm` NuGet 包。这可以通过 Visual Studio 的 NuGet 包管理器或者命令行完成： ```bash Install-Package CommunityToolkit.Mvvm ``` #### 2. 创建 ViewModel 类并继承 ObservableObject `CommunityToolkit.Mvvm` 中提供了 `ObservableObject` 基类，它实现了 `INotifyPropertyChanged` 接口，用于支持属性更改的通知机制。以下是创建 ViewModel 的示例： ```csharp using CommunityToolkit.Mvvm.ComponentModel; namespace TestMvvm.ViewModels { public partial class MainViewModel : ObservableObject { [ObservableProperty] private string _name = "默认姓名"; public void UpdateName(string newName) { Name = newName; } } } ``` 在此示例中，`MainViewModel` 继承自 `ObservableObject`，并通过 `[ObservableProperty]` 特性简化了属性定义过程[^1]。 #### 3. 在 View 的后台代码中设置 DataContext 在窗体的后台代码中，可以直接实例化 ViewModel 并将其赋值给 `DataContext` 属性。以下是具体实现： ```csharp using System.Windows; using TestMvvm.ViewModels; namespace TestMvvm.Views { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); // 设置 DataContext 为当前窗口实例化的 ViewModel this.DataContext = new MainViewModel(); } } } ``` 此方法遵循传统的 `DataContext` 绑定模式，但在 ViewModel 部分利用了 `CommunityToolkit.Mvvm` 的特性[^1]。 #### 4. 自动绑定 ViewModel（可选） 如果希望进一步减少手动绑定的工作量，可以考虑使用工具库（如 Prism、Stylet 等）提供的自动绑定功能。例如，`Prism` 和 `Stylet` 支持基于命名约定的自动绑定[^2][^3]。不过需要注意的是，这些工具通常需要额外配置或依赖注入的支持。 --- ### 示例总结 通过上述步骤，可以在窗体的后台代码中轻松实现 `DataContext=this` 的绑定，并充分利用 `CommunityToolkit.Mvvm` 提供的功能。这种方式不仅保持了代码的简洁性，还增强了应用程序的可维护性和扩展性。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

JetRaven12

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

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

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

打赏作者

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

抵扣说明：

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

余额充值