WinUI CommunityToolkit DataGrid中按钮命令无法执行求助

我使用WinUI CommunityToolkit DataGrid组件，以下是DataGrid的定义：

<toolkit:DataGrid x:Name="dataGrid"
                  ItemsSource="{x:Bind ViewModel.Tests, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                  MinHeight="500"
                  AreRowDetailsFrozen="False"
                  AreRowGroupHeadersFrozen="True"
                  AutoGenerateColumns="False"
                  CanUserSortColumns="True"
                  ColumnHeaderHeight="40"
                  FrozenColumnCount="0"
                  RowDetailsVisibilityMode="Collapsed"
                  RowGroupHeaderPropertyNameAlternative="Range">
    <toolkit:DataGrid.Columns>
        <toolkit:DataGridTemplateColumn Header="Records (count)" Tag="RecordsCount" Width="150">
            <toolkit:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding RecordsCount}"/>
                </DataTemplate>
            </toolkit:DataGridTemplateColumn.CellTemplate>
        </toolkit:DataGridTemplateColumn>
        <toolkit:DataGridTemplateColumn  Width="184">
            <toolkit:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
                        <!-- Click事件有效但命令无法执行 -->
                        <Button Width="40" Height="40" 
                                Command="{Binding ViewModel.DeleteTestCommand, ElementName=testPage}"
                                CommandParameter="{Binding Id}">
                        </Button>
                        <Button Width="40" Height="40"
                                Command="{Binding ViewModel.EditTestCommand, ElementName=testPage}"
                                CommandParameter="{Binding Id}">
                        </Button>
                    </StackPanel>
                </DataTemplate>
            </toolkit:DataGridTemplateColumn.CellTemplate>
        </toolkit:DataGridTemplateColumn>
    </toolkit:DataGrid.Columns>
</toolkit:DataGrid>

ViewModel代码：

public partial class TestsPageViewModel : ObservableRecipient
{
    public IRelayCommand<int> EditTestCommand { get; }

    public IRelayCommand<int> DeleteTestCommand { get; }

    public TestsPageViewModel(ITestsQueryService testsQueryService, INavigationService navigationService)
    {
        EditTestCommand = new RelayCommand<int>(EditTest);
        DeleteTestCommand = new RelayCommand<int>(DeleteTest);
       
        Tests = new ObservableCollection<TestModel>(); //(部分测试数据);
    }

    public void DeleteTest(int id)
    {
        //var test = Tests.First(P => P.Id == id);
    }

    public void EditTest(int id)
    {
        //var test = Tests.First(P => P.Id == id);
    }

    public ObservableCollection<TestModel> Tests 
    { 
        get => _tests;
        set => SetProperty(ref _tests, value); 
    }
}

TestModel包含以下属性：

• public int Id { get; set; }
• public int RecordCount { get; set; }
• ...

按钮的Click事件可以正常触发，但Command完全无法执行，请求帮助。

解决方案 #

问题核心是DataTemplate内的绑定上下文默认指向当前行的TestModel对象，而非页面的ViewModel。可以通过以下方式修复：

方法1：使用RelativeSource绑定页面的DataContext #

修改按钮的Command绑定，通过RelativeSource向上查找页面元素，获取其DataContext（即ViewModel）：

<Button Width="40" Height="40" 
        Command="{Binding DataContext.DeleteTestCommand, RelativeSource={RelativeSource AncestorType=Page}}"
        CommandParameter="{Binding Id}">
</Button>
<Button Width="40" Height="40"
        Command="{Binding DataContext.EditTestCommand, RelativeSource={RelativeSource AncestorType=Page}}"
        CommandParameter="{Binding Id}">
</Button>

方法2：确保ElementName绑定的正确性 #

如果坚持使用ElementName=testPage，需要确认：

1. 页面的根元素已设置x:Name="testPage"
2. 页面的DataContext已正确赋值为TestsPageViewModel实例

额外检查点 #

• 确认RelayCommand<int>的泛型参数与CommandParameter的Id类型（int）完全匹配
• 确保ViewModel中的命令已正确初始化（当前代码中已完成初始化，无需修改）

完成上述修改后，按钮命令应该能正常触发ViewModel中的DeleteTest和EditTest方法。

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