WinUI3中DataTemplate内控件绑定父ViewModel命令的实现方法

1. 修正ViewModel的命令定义 #

首先在XXXViewModel中使用CommunityToolkit.Mvvm的RelayCommand实现命令，明确参数类型以接收选中项：

using CommunityToolkit.Mvvm.Input;

public class XXXViewModel : ObservableRecipient, INavigationAware
{
    private XXXDetailViewModel? _selected;
    public XXXDetailViewModel? Selected
    {
        get => _selected;
        set => SetProperty(ref _selected, value);
    }

    public ObservableCollection<XXXDetailViewModel> Items { get; private set; } = new ObservableCollection<XXXDetailViewModel>();

    // 替换原ICommand定义，使用RelayCommand处理带参数的命令逻辑
    public ICommand InstallCommand { get; }

    public XXXViewModel()
    {
        InstallCommand = new RelayCommand<XXXDetailViewModel>(ExecuteInstall);
    }

    private void ExecuteInstall(XXXDetailViewModel? item)
    {
        if (item == null) return;
        // 在此编写安装逻辑
    }
}

2. 用EventToCommand实现事件转命令绑定 #

XAML无法直接将控件事件绑定到命令，需借助Microsoft.Xaml.Interactivity（CommunityToolkit.WinUI内置）的行为组件完成事件到命令的转换。

2.1 添加命名空间 #

在XXXPage.xaml的Page根元素中补充以下命名空间：

xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"

2.2 修改DetailsTemplate的绑定逻辑 #

调整DetailsTemplate，给XXXDetailControl添加行为，将InstallClicked事件绑定到页面ViewModel的InstallCommand，并传递当前项作为参数：

<DataTemplate x:Key="DetailsTemplate">
    <Grid>
        <views:XXXDetailControl DetailMenuItem="{Binding}">
            <interactivity:Interaction.Behaviors>
                <core:EventTriggerBehavior EventName="InstallClicked">
                    <core:InvokeCommandAction 
                        <!-- 通过RelativeSource找到父级Page，绑定页面的ViewModel命令 -->
                        Command="{Binding ViewModel.InstallCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Page}}"
                        <!-- 传递当前DataContext（即选中的XXXDetailViewModel）作为命令参数 -->
                        CommandParameter="{Binding}" />
                </core:EventTriggerBehavior>
            </interactivity:Interaction.Behaviors>
        </views:XXXDetailControl>
    </Grid>
</DataTemplate>

替代绑定方式：使用ElementName #

若给Page设置了x:Name="PageRoot"，也可替换为ElementName绑定：

Command="{Binding ViewModel.InstallCommand, ElementName=PageRoot}"

3. 确保用户控件的事件正确暴露 #

在XXXDetailControl.xaml.cs中确保InstallClicked事件是公开的，让行为能正常监听：

public sealed partial class XXXDetailControl : UserControl
{
    // 公开InstallClicked事件
    public event EventHandler? InstallClicked;

    public XXXDetailControl()
    {
        InitializeComponent();
    }

    // 假设控件内有安装按钮，点击时触发事件
    private void InstallButton_Click(object sender, RoutedEventArgs e)
    {
        InstallClicked?.Invoke(this, EventArgs.Empty);
    }
}

额外优化：绑定选中项到ViewModel #

若需要在ViewModel中直接获取选中项，可给ListDetailsView绑定SelectedItem：

<controls:ListDetailsView
    x:Uid="ListDetails"
    x:Name="ListDetailsViewControl"
    DetailsTemplate="{StaticResource DetailsTemplate}"
    ItemsSource="{x:Bind ViewModel.Items}"
    SelectedItem="{x:Bind ViewModel.Selected, Mode=TwoWay}"/>

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