当前位置：首页 > news >正文

WPF MVVM 入门学习笔记：从零开始理解 CommunityToolkit 与 ObservableObject 详解

news 2025/9/27 3:47:35

🎯 前言：我在学什么？

最近我在学习 WPF（Windows 桌面应用开发），老师提到了一个叫 MVVM 的设计模式。一开始我完全听不懂，各种术语满天飞：“ViewModel”、“绑定”、“命令”、“通知”……头都大了！

但后来我发现，只要用对工具（比如 CommunityToolkit.Mvvm），其实 MVVM 并没有那么难。

今天这篇笔记，就用最简单的话，带你一步步看懂一个完整的 WPF + MVVM 小例子，并重点讲清楚：

ObservableObject 到底是什么？它为什么这么重要？

🧱 第一步：项目结构长什么样？

我们有两个核心文件：

MainWindow.xaml：界面（View）
MainWindowViewModel.cs：数据和逻辑（ViewModel）

它们通过“数据绑定”连接在一起，互不干扰，这就是 MVVM 的核心思想。

🔧 第二步：ViewModel 代码详解（C# 部分）

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;namespace WpfToolKitDemo.ViewModels
{public partial class MainWindowViewModel : ObservableObject{[ObservableProperty]int _age = 18;[ObservableProperty][NotifyPropertyChangedFor(nameof(FullName))]string _firstName = "Albert";[ObservableProperty]string _lastName = "North";[ObservableProperty][NotifyCanExecuteChangedFor(nameof(ChangeAgeCommand))]bool _isActive;public string FullName => $"{FirstName} {LastName}";[RelayCommand(CanExecute = nameof(IsActive))]void ChangeAge(){Age = 22;}[RelayCommand]void ChangeFirstName(){FirstName = "AlbertPlus";LastName = "LunaNorth";}}
}

🌟 重点1：为什么要继承 `ObservableObject`？

public partial class MainWindowViewModel : ObservableObject

✅ 一句话解释：

继承 ObservableObject 是为了让界面（View）能“自动知道数据变了”，然后自动更新显示。

📌 举个例子：

你有一个文本框显示 Age，初始是 18。
当你在代码里把 Age = 22; 时，界面能不能自动变成 22？

如果不继承 ObservableObject，就不能。
继承了它，并配合 [ObservableProperty]，就可以！

👉 所以：ObservableObject 是 MVVM 中实现“自动刷新界面”的基础！

🌟 重点2：`[ObservableProperty]` 是什么？

[ObservableProperty]
int _age = 18;

✅ 一句话解释：

这个 [ObservableProperty] 是一个“魔法标签”，它会自动生成属性 + 自动通知界面更新。

比如上面这行代码，Toolkit 会自动帮你生成：

public int Age
{get => _age;set{if (_age != value){_age = value;OnPropertyChanged(nameof(Age)); // 自动通知界面}}
}

👉 你不用自己写这些重复代码，省时省力！

🌟 重点3：`[NotifyPropertyChangedFor]` 是啥？

[ObservableProperty]
[NotifyPropertyChangedFor(nameof(FullName))]
string _firstName = "Albert";

✅ 一句话解释：

当 _firstName 改变时，不仅要通知 FirstName 更新，还要通知 FullName 更新！

因为 FullName 是由 FirstName + LastName 拼出来的：

public string FullName => $"{FirstName} {LastName}";

如果名字变了，全名也应该变。这个特性就是告诉程序：“别忘了我也要刷新！”

🌟 重点4：`[NotifyCanExecuteChangedFor]` 和 `CanExecute`

[ObservableProperty]
[NotifyCanExecuteChangedFor(nameof(ChangeAgeCommand))]
bool _isActive;

[RelayCommand(CanExecute = nameof(IsActive))]
void ChangeAge()
{Age = 22;
}

✅ 一句话解释：

这个组合用来控制“按钮能不能点”。

CanExecute = nameof(IsActive)：表示 ChangeAge 这个命令能不能执行，取决于 IsActive 属性。
_isActive 变化时，用 [NotifyCanExecuteChangedFor] 告诉命令：“你去看看还能不能执行”。

📌 举个例子：

IsActive = true → 按钮可用 ✅
IsActive = false → 按钮变灰 ❌

这就是 WPF 中“按钮启用/禁用”的常见做法。

🌟 重点5：`[RelayCommand]` 是命令的快捷方式

[RelayCommand]
void ChangeFirstName()
{FirstName = "AlbertPlus";LastName = "LunaNorth";
}

✅ 一句话解释：

不用手动 new RelayCommand(...)，加个标签就能把方法变成“可绑定的命令”。

生成后，你可以在 XAML 中这样用：

<Button Command="{Binding ChangeFirstNameCommand}" />

注意：方法名是 ChangeFirstName，但命令名自动变成 ChangeFirstNameCommand（Toolkit 自动加 Command 后缀）！

🖼️ 第三步：XAML 界面绑定（界面部分）

<Window x:Class="WpfToolKitDemo.MainWindow"...xmlns:viewmodels="clr-namespace:WpfToolKitDemo.ViewModels"Title="MainWindow" Height="450" Width="800"><!-- 设置数据上下文 --><Window.DataContext><viewmodels:MainWindowViewModel /></Window.DataContext><StackPanel><TextBlock Text="{Binding Age}"/><TextBlock Text="{Binding FirstName}"/><TextBlock Text="{Binding LastName}"/><TextBlock Text="{Binding FullName}"/><CheckBox IsChecked="{Binding IsActive}"/><Button Command="{Binding ChangeAgeCommand}" Content="ChangeAge"/><Button Command="{Binding ChangeFirstNameCommand}" Content="FirstName"/></StackPanel>
</Window>

🔍 绑定说明：

控件	绑定内容	作用
`TextBlock`	`{Binding Age}`	显示年龄
`CheckBox`	`{Binding IsActive}`	控制按钮是否可用
`Button`	`{Binding ChangeAgeCommand}`	点击执行 `ChangeAge` 方法

只要你在 ViewModel 里改了数据，界面就会自动刷新！

✅ 实际运行效果预测

操作	效果
启动程序	显示 Age=18, FirstName=Albert, FullName=Albert North
点击 "ChangeAge" 按钮	Age 变成 22（前提是 CheckBox 勾选）
点击 "FirstName" 按钮	名字变成 AlbertPlus，姓变成 LunaNorth，全名也更新
勾选/取消 CheckBox	"ChangeAge" 按钮随之启用/禁用

🧠 总结：ObservableObject 详解（重点回顾）

问题	回答
ObservableObject 是什么？	是 CommunityToolkit 提供的一个基类，用于支持属性变更通知
为什么要继承它？	让 ViewModel 能通知界面“数据变了，请刷新”
它是怎么工作的？	结合 `[ObservableProperty]` 特性，自动生成 `OnPropertyChanged` 调用
不继承会怎样？	界面不会自动更新，必须手动写通知代码或刷新
它解决了什么问题？	解耦了界面和逻辑，实现了“数据驱动界面”