如何将WPF后台代码按钮改造为MVVM模式（用CommunityToolkit.Mvvm）

步骤1：修改XAML代码，移除后台事件绑定，使用Behavior绑定命令 #

首先在XAML根元素中声明行为的命名空间，替换按钮的Click事件为InvokeCommandAction，绑定ViewModel中的命令并传递按钮的Content作为参数：

<!-- 根元素添加行为命名空间 -->
<Window xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
        ...>
    ...
    <Button
        x:Name="sevenBtn"
        Grid.Row="2"
        Grid.Column="0"
        Content="7"
        Style="{StaticResource numberButtonsStyle}">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="Click">
                <i:InvokeCommandAction 
                    Command="{Binding NumberCommand}"
                    CommandParameter="{Binding Content, RelativeSource={RelativeSource AncestorType=Button}}"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </Button>
    ...
</Window>

步骤2：创建符合MVVM规范的ViewModel #

使用CommunityToolkit.Mvvm的ObservableObject基类和RelayCommand实现命令逻辑，直接接收按钮传递的数值参数：

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

public class MainViewModel : ObservableObject
{
    // 声明接收int类型参数的命令
    public IRelayCommand<int> NumberCommand { get; }

    public MainViewModel()
    {
        // 初始化命令并绑定执行方法
        NumberCommand = new RelayCommand<int>(ExecuteNumberCommand);
    }

    private void ExecuteNumberCommand(int selectedValue)
    {
        // 这里处理原后台代码的业务逻辑，selectedValue就是按钮Content转换后的数值
        // 示例：输出选中的数值
        Console.WriteLine($"选中数值：{selectedValue}");
    }
}

步骤3：关联ViewModel到View #

在View的后台代码（或XAML中）设置DataContext为ViewModel实例：

// 示例：在Window构造函数中设置
public MainWindow()
{
    InitializeComponent();
    DataContext = new MainViewModel();
}

关键说明 #

• InvokeCommandAction负责将按钮的Click事件转换为ViewModel中的命令调用，CommandParameter直接绑定按钮的Content作为传递参数。
• RelayCommand<int>支持直接接收int类型参数，CommunityToolkit.Mvvm会自动完成字符串到int的类型转换（前提是按钮Content为可转换的数字字符串）。
• 整个实现完全移除了后台代码中的事件处理，符合MVVM模式的关注点分离原则。

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