【WPF】MVVM 与数据绑定实战：从原理到完整项目

开篇：为什么你的代码越写越乱

很多 WPF 初学者会写出这样的代码：

csharp 复制代码

private void LoginButton_Click(object sender, RoutedEventArgs e)
{
    if (UserNameBox.Text == "admin" && PasswordBox.Password == "123456")
    {
        ResultText.Text = "登录成功";
        LoginButton.IsEnabled = false;
    }
    else
    {
        ResultText.Text = "用户名或密码错误";
    }
}

这段代码能用，但问题会随着项目变大逐渐暴露：界面逻辑和业务逻辑搅在一起，改一个地方要动一片，无法单元测试，无法复用。

MVVM 就是来解决这个问题的。它把界面（View）和逻辑（ViewModel）彻底分开，让代码「可测试、可维护、可复用」。

一、MVVM 是什么

MVVM 是 Model-View-ViewModel 的缩写，三个角色各司其职：

Model（模型）：数据和业务逻辑，与界面无关。比如用户实体、数据库访问。
View（视图）：纯界面，只负责「显示」，不写业务逻辑。就是 XAML。
ViewModel（视图模型）：连接两者的桥梁。把 Model 的数据转换成 View 能绑定的形式，并处理界面交互命令。

三者关系：

复制代码

   View  ──(数据绑定)──▶  ViewModel  ──(调用)──▶  Model
   XAML                   逻辑/状态             数据/业务
    ▲                        │
    └──(命令绑定)◀───────────┘

核心原则：View 不碰 Model，ViewModel 不碰控件。 ViewModel 里绝不出现 TextBox、Button 这类 UI 类型。

二、数据绑定：MVVM 的引擎

数据绑定让 View 自动跟随 ViewModel 的数据变化，不需要手动写 textBox.Text = xxx。

xml 复制代码

<TextBlock Text="{Binding UserName}"/>

这行代码的意思是：把 TextBlock 的 Text 属性，绑定到当前 DataContext 的 UserName 属性上。当 UserName 变化时，界面自动刷新。

设置 DataContext（数据上下文）是绑定生效的前提：

csharp 复制代码

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new LoginViewModel(); // 关键
    }
}

绑定的关键要素

一个完整的绑定表达式可以写成：

xml 复制代码

<TextBlock Text="{Binding Path=UserName, Mode=OneWay, Source=...}"/>

Path：要绑定哪个属性。
Mode：绑定模式，见下。
Source ：数据源（默认用 DataContext）。
Converter：值转换器，做格式转换。

四种绑定模式

模式	方向	典型场景
`OneWay`	源 → 目标	只读显示
`TwoWay`	双向	输入框、可编辑控件
`OneTime`	一次性	只初始化一次，不再更新
`OneWayToSource`	目标 → 源	反向写入

记住：TextBox.Text 默认就是 TwoWay，而 TextBlock.Text 默认是 OneWay。不同控件的默认模式由控件的元数据决定。

三、INotifyPropertyChanged：让属性「通知」界面

想让绑定的属性变化时界面自动更新，ViewModel 必须实现 INotifyPropertyChanged 接口：

csharp 复制代码

using System.ComponentModel;
using System.Runtime.CompilerServices;

public abstract class ObservableObject : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler? PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string? propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    protected bool SetProperty<T>(ref T field, T value, [CallerMemberName] string? propertyName = null)
    {
        if (EqualityComparer<T>.Default.Equals(field, value)) return false;
        field = value;
        OnPropertyChanged(propertyName);
        return true;
    }
}

然后 ViewModel 继承它：

csharp 复制代码

public class LoginViewModel : ObservableObject
{
    private string _userName = string.Empty;
    public string UserName
    {
        get => _userName;
        set => SetProperty(ref _userName, value);
    }

    private string _message = string.Empty;
    public string Message
    {
        get => _message;
        set => SetProperty(ref _message, value);
    }
}

关键点：属性赋值必须走 SetProperty ，不能直接 _userName = value，否则不会触发通知，界面就不会更新。这是新手最容易踩的坑。

四、ICommand 与 RelayCommand：把「点击」变成「命令」

MVVM 里，按钮的点击不再用 Click 事件，而是绑定一个 Command。这需要实现 ICommand 接口：

csharp 复制代码

using System.Windows.Input;

public class RelayCommand : ICommand
{
    private readonly Action<object?> _execute;
    private readonly Func<object?, bool>? _canExecute;

    public RelayCommand(Action<object?> execute, Func<object?, bool>? canExecute = null)
    {
        _execute = execute;
        _canExecute = canExecute;
    }

    public bool CanExecute(object? parameter) => _canExecute?.Invoke(parameter) ?? true;

    public void Execute(object? parameter) => _execute(parameter);

    public event EventHandler? CanExecuteChanged
    {
        add => CommandManager.RequerySuggested += value;
        remove => CommandManager.RequerySuggested -= value;
    }
}

在 ViewModel 里暴露命令：

csharp 复制代码

public ICommand LoginCommand { get; }

public LoginViewModel()
{
    LoginCommand = new RelayCommand(Login, CanLogin);
}

private void Login(object? parameter)
{
    Message = (UserName == "admin" && Password == "123456")
        ? "登录成功"
        : "用户名或密码错误";
}

private bool CanLogin(object? parameter)
{
    return !string.IsNullOrWhiteSpace(UserName) && !string.IsNullOrWhiteSpace(Password);
}

View 里绑定命令：

xml 复制代码

<Button Content="登录" Command="{Binding LoginCommand}"/>

CanExecute 的妙用 ：当 CanLogin 返回 false 时，按钮自动变灰不可点，完全不用手动写 IsEnabled。

五、ObservableCollection：让列表自动更新

普通 List<T> 增删元素不会通知界面。绑定集合必须用 ObservableCollection<T>：

csharp 复制代码

public ObservableCollection<string> Logs { get; } = new();

private void Login(object? parameter)
{
    Logs.Add($"登录尝试：{UserName} @ {DateTime.Now:HH:mm:ss}");
}

xml 复制代码

<ListBox ItemsSource="{Binding Logs}"/>

只要往 Logs 里 Add/Remove，列表控件就自动刷新，无需任何手动操作。

六、值转换器（IValueConverter）

有时候绑定的值和界面需要的格式不一样，用 IValueConverter 做转换。经典场景：布尔值 → 可见性、数字 → 颜色。

csharp 复制代码

using System.Globalization;
using System.Windows;
using System.Windows.Data;

public class BoolToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        => value is true ? Visibility.Visible : Visibility.Collapsed;

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        => throw new NotImplementedException();
}

在资源里声明后使用：

xml 复制代码

<Window.Resources>
    <local:BoolToVisibilityConverter x:Key="BoolToVis"/>
</Window.Resources>

<TextBlock Text="登录成功！" Foreground="Green"
           Visibility="{Binding IsLoggedIn, Converter={StaticResource BoolToVis}}"/>

七、完整实战：一个 MVVM 登录窗口

把上面所有知识点串起来，做一个完整可运行的登录界面。

MainWindow.xaml

xml 复制代码

<Window x:Class="MvvmDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="登录" Height="300" Width="360" WindowStartupLocation="CenterScreen">
    <StackPanel Margin="24" VerticalAlignment="Center">
        <TextBlock Text="欢迎登录" FontSize="20" FontWeight="Bold" Margin="0,0,0,16"/>

        <TextBlock Text="用户名"/>
        <TextBox Text="{Binding UserName, UpdateSourceTrigger=PropertyChanged}" Margin="0,4,0,12"/>

        <TextBlock Text="密码"/>
        <PasswordBox x:Name="PwdBox" Margin="0,4,0,16"/>

        <Button Content="登录" Height="36"
                Command="{Binding LoginCommand}"
                CommandParameter="{Binding ElementName=PwdBox}"/>

        <TextBlock Text="{Binding Message}" Margin="0,16,0,0"
                   HorizontalAlignment="Center" FontWeight="Bold"/>
    </StackPanel>
</Window>

注意：PasswordBox.Password 不是依赖属性，不能直接绑定。这里用 CommandParameter 把 PasswordBox 本身传给命令，在命令里读取密码，这是官方推荐的稳妥做法。

LoginViewModel.cs

csharp 复制代码

public class LoginViewModel : ObservableObject
{
    private string _userName = string.Empty;
    public string UserName
    {
        get => _userName;
        set => SetProperty(ref _userName, value);
    }

    private string _message = string.Empty;
    public string Message
    {
        get => _message;
        set => SetProperty(ref _message, value);
    }

    public ICommand LoginCommand { get; }

    public LoginViewModel()
    {
        LoginCommand = new RelayCommand(Login, CanLogin);
    }

    private void Login(object? parameter)
    {
        var password = (parameter as PasswordBox)?.Password;
        Message = (UserName == "admin" && password == "123456")
            ? "登录成功 ✅"
            : "用户名或密码错误 ❌";
    }

    private bool CanLogin(object? parameter)
        => !string.IsNullOrWhiteSpace(UserName);
}

MainWindow.xaml.cs（就两行，干净利落）

csharp 复制代码

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new LoginViewModel();
    }
}

对比文章开头那段 Click 事件代码，MVVM 版本里 View 没有任何业务逻辑，ViewModel 里没有任何控件------这就是「关注点分离」的价值。

八、现代写法：CommunityToolkit.Mvvm

手动写 ObservableObject、RelayCommand 是很好的学习过程，但生产项目推荐用微软官方的 CommunityToolkit.Mvvm，用源生成器大幅减少样板代码：

csharp 复制代码

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

public partial class LoginViewModel : ObservableObject
{
    [ObservableProperty]
    private string _userName = string.Empty;

    [ObservableProperty]
    private string _message = string.Empty;

    [RelayCommand(CanExecute = nameof(CanLogin))]
    private void Login()
    {
        Message = "登录成功";
    }

    private bool CanLogin() => !string.IsNullOrWhiteSpace(UserName);
}

[ObservableProperty] 会自动生成 UserName、Message 属性和通知逻辑，[RelayCommand] 自动生成 LoginCommand。几十行样板代码变成几行特性，这是目前 WPF MVVM 的主流实践。

其他常用 MVVM 框架还有 Prism （大型企业项目、模块化、导航）和 Caliburn.Micro（约定式编程）。

九、常见坑与排查技巧

界面不更新 ：检查是否实现了 INotifyPropertyChanged，以及赋值是否走了 SetProperty（或 [ObservableProperty]）。
绑定了但没反应 ：检查 DataContext 是否设置；排查时看「输出窗口」是否有绑定错误（如 BindingExpression path error）。
命令按钮一直灰 ：检查 CanExecute 逻辑，以及是否触发了 CanExecuteChanged（RelayCommand 里挂 CommandManager.RequerySuggested 可自动刷新）。
列表不更新 ：把 List<T> 换成 ObservableCollection<T>。
TextBox 输入才触发 ：默认 TwoWay 要失焦才回写源，想实时回写加 UpdateSourceTrigger=PropertyChanged。
忘了解绑导致内存泄漏：绑定会持有引用，窗口关闭后及时清理或使用弱引用，避免 View 无法回收。

总结

MVVM 和数据绑定，是 WPF 开发的「分水岭」------跨过它，你才真正进入了 WPF 的核心开发范式：

MVVM 三要素：Model 管数据，View 管界面，ViewModel 管逻辑。
四个关键机制 ：INotifyPropertyChanged（属性通知）、ICommand（命令）、ObservableCollection（集合通知）、IValueConverter（值转换）。
一条铁律：ViewModel 里不出现任何控件，View 里不写任何业务逻辑。
现代实践 ：用 CommunityToolkit.Mvvm 干掉样板代码。

掌握这套范式，你会发现写 WPF 应用不再是「堆事件」，而是一种清晰、可测试、可维护的体验。

如果这篇对你有帮助，欢迎点赞、收藏；下一篇你想看「样式与模板」「依赖注入整合」还是「单元测试 MVVM」？评论区告诉我。

（本文代码基于 .NET 6/8 WPF + CommunityToolkit.Mvvm 编写，手动实现部分兼容 .NET Framework 4.6+。）