WPF中基于MVVM实现按钮点击动态切换Content的问题

核心思路 #

通过ViewModel维护按钮的当前显示文本和原始文本两个属性，利用AsyncRelayCommand的异步执行特性，在命令启动时切换文本，执行完成（包括异常情况）后恢复原始文本，同时确保属性变更通知UI更新。

步骤1：ViewModel实现 #

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System.Threading.Tasks;

public partial class MainWindowViewModel : ObservableObject
{
    // 存储按钮原始文本
    [ObservableProperty]
    private string _buttonOriginalText = "执行任务";

    // 绑定到按钮Content的当前文本
    [ObservableProperty]
    private string _buttonCurrentText = "执行任务";

    // 异步命令
    [RelayCommand]
    private async Task ExecuteTaskAsync()
    {
        ButtonCurrentText = "Running...";
        try
        {
            // 模拟异步任务，替换成你的实际业务逻辑
            await Task.Delay(2000);
        }
        finally
        {
            // 无论成功/失败，都恢复原始文本
            ButtonCurrentText = ButtonOriginalText;
        }
    }
}

步骤2：XAML绑定 #

<Button Content="{Binding ButtonCurrentText}"
        Command="{Binding ExecuteTaskCommand}"
        Width="120" Height="30"/>

关键注意点 #

• 必须确保ViewModel继承自ObservableObject，且属性使用[ObservableProperty]特性（自动生成PropertyChanged通知），否则UI不会感知到文本变化。
• 使用finally块恢复文本，避免任务抛出异常时按钮文本一直停留在“Running...”。
• AsyncRelayCommand（通过[RelayCommand]标记异步方法自动生成）会自动处理异步操作的线程调度，无需手动切换回UI线程。

额外优化（可选） #

如果需要禁用按钮防止重复点击，可以再加一个IsTaskRunning属性：

[ObservableProperty]
private bool _isTaskRunning;

[RelayCommand(CanExecute = nameof(IsNotTaskRunning))]
private async Task ExecuteTaskAsync()
{
    IsTaskRunning = true;
    ButtonCurrentText = "Running...";
    try
    {
        await Task.Delay(2000);
    }
    finally
    {
        ButtonCurrentText = ButtonOriginalText;
        IsTaskRunning = false;
    }
}

private bool IsNotTaskRunning() => !IsTaskRunning;

XAML中绑定按钮的IsEnabled：

<Button Content="{Binding ButtonCurrentText}"
        Command="{Binding ExecuteTaskCommand}"
        IsEnabled="{Binding IsNotTaskRunning}"
        Width="120" Height="30"/>

内容的提问来源于stack exchange，提问作者herba