XAML中Button的Click事件是否先于Command执行？MVVM数据更新咨询

你现在的问题核心是试图让ViewModel直接访问UI控件属性，这其实违反了MVVM的核心设计原则——ViewModel和View需要完全解耦。正确的做法是通过双向数据绑定+INotifyPropertyChanged接口，让View的输入自动同步到ViewModel，同时ViewModel的变化也能实时反馈给View。下面是具体的实现步骤和代码示例：

1. 实现ViewModel基础架构 #

首先创建你的ViewModel类，它需要实现INotifyPropertyChanged接口，这样当属性值变化时能通知View更新；同时用ICommand处理按钮的点击逻辑，避免在View的代码后台写业务逻辑。

using System.ComponentModel;
using System.Windows.Input;

public class MainViewModel : INotifyPropertyChanged
{
    // 对应NameTextBox的绑定属性
    private string _name;
    public string Name
    {
        get => _name;
        set
        {
            if (_name != value)
            {
                _name = value;
                OnPropertyChanged(nameof(Name));
            }
        }
    }

    // 对应AgeTextBox的绑定属性（这里用int类型，注意输入验证）
    private int _age;
    public int Age
    {
        get => _age;
        set
        {
            if (_age != value)
            {
                _age = value;
                OnPropertyChanged(nameof(Age));
            }
        }
    }

    // 处理保存按钮的命令
    public ICommand SaveCommand { get; }

    public MainViewModel()
    {
        SaveCommand = new RelayCommand(ExecuteSave);
    }

    // 保存逻辑在这里实现，直接用ViewModel的属性即可（已经和UI输入同步）
    private void ExecuteSave()
    {
        // 示例：打印保存的数据，实际可以替换为存数据库/文件等逻辑
        Console.WriteLine($"已保存：姓名={Name}，年龄={Age}");
    }

    // INotifyPropertyChanged接口实现
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

// 实现一个通用的RelayCommand（如果你的框架没有自带的话，比如WPF需要自己写，MAUI/UWP有内置实现）
public class RelayCommand : ICommand
{
    private readonly Action _execute;
    private readonly Func<bool> _canExecute;

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

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

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

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

2. 修改View的绑定逻辑 #

在你的MainPage.xaml中，把TextBox的Text属性绑定到ViewModel的对应属性，同时设置按钮的Command绑定到ViewModel的SaveCommand，不需要再给控件命名（因为ViewModel不再直接访问它们）：

<StackPanel>
    <TextBox Margin="10" Header="Name text box" Text="{Binding Name, Mode=TwoWay}" />
    <TextBox Margin="10" Header="Age text box" Text="{Binding Age, Mode=TwoWay}" />
    <Button Margin="10" Content="Save" Command="{Binding SaveCommand}" />
</StackPanel>

3. 设置View的DataContext #

最后需要把ViewModel和View关联起来，在MainPage.xaml.cs的构造函数中设置页面的DataContext：

public MainPage()
{
    InitializeComponent();
    // 将ViewModel设置为页面的数据上下文，这样绑定才能生效
    DataContext = new MainViewModel();
}

为什么这样能解决问题？ #

• 双向绑定：Mode=TwoWay会让TextBox的输入变化自动同步到ViewModel的属性，ViewModel的属性变化也会同步回TextBox。
• INotifyPropertyChanged：确保ViewModel属性更新时，View能收到通知并刷新界面。
• ICommand：让按钮的点击逻辑完全在ViewModel中处理，View只负责展示和触发命令，彻底实现了View和ViewModel的解耦。

额外注意点 #

• 如果是数字类型（比如Age是int），需要处理用户输入非数字的情况，可以添加输入验证规则，或者在ViewModel的属性setter中做类型转换判断。
• 不同平台（WPF/MAUI/UWP）的RelayCommand实现可能略有差异，比如MAUI有内置的RelayCommand，不需要自己编写。

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