WinUI 3中如何让UserControl内按钮绑定页面ViewModel的IRelayCommand？

要让UserControl内的CommandBar按钮触发页面ViewModel中的命令，核心是把UserControl的命令定义为依赖属性（而非普通字段），这样才能支持外部绑定。以下是具体实现步骤：

1. 修改UserControl后台：定义命令依赖属性 #

把原来的ShowPropertiesCommand字段替换为依赖属性，同时可选添加命令参数的依赖属性（用于传递选中节点等数据）：

public sealed partial class MyTreeView : UserControl
{
    public MyTreeView()
    {
        this.InitializeComponent();
    }

    // 命令依赖属性：接收外部传入的ViewModel命令
    public static readonly DependencyProperty ShowPropertiesCommandProperty =
        DependencyProperty.Register(
            nameof(ShowPropertiesCommand),
            typeof(ICommand),
            typeof(MyTreeView),
            new PropertyMetadata(null));

    public ICommand ShowPropertiesCommand
    {
        get => (ICommand)GetValue(ShowPropertiesCommandProperty);
        set => SetValue(ShowPropertiesCommandProperty, value);
    }

    // 可选：命令参数依赖属性，用于传递数据（如选中的树节点）
    public static readonly DependencyProperty ShowPropertiesCommandParameterProperty =
        DependencyProperty.Register(
            nameof(ShowPropertiesCommandParameter),
            typeof(object),
            typeof(MyTreeView),
            new PropertyMetadata(null));

    public object ShowPropertiesCommandParameter
    {
        get => GetValue(ShowPropertiesCommandParameterProperty);
        set => SetValue(ShowPropertiesCommandParameterProperty, value);
    }
}

2. 修改UserControl的XAML：绑定按钮到依赖属性 #

将按钮的Command和CommandParameter直接绑定到UserControl的依赖属性，不需要再创建内部的RelayCommand：

<UserControl x:Class="Core.UI.Controls.MyTreeView" ...>
    ...
    <CommandBar>
        ...
        <AppBarElementContainer>
            <Button
                x:Name="CB_NodeProperties"
                Command="{x:Bind ShowPropertiesCommand, Mode=OneWay}"
                CommandParameter="{x:Bind ShowPropertiesCommandParameter, Mode=OneWay}"
                <!-- 其他按钮属性 --> />
        </AppBarElementContainer>
    </CommandBar>
    ...
</UserControl>

3. 页面XAML绑定：关联ViewModel命令 #

现在页面可以直接将UserControl的命令属性绑定到ViewModel的ShowPropertiesCommand，如果需要传参数（如选中节点），同时绑定参数属性：

<corecontrols:MyTreeView
    ...
    ShowPropertiesCommand="{x:Bind ViewModel.ShowPropertiesCommand, Mode=OneWay}"
    ShowPropertiesCommandParameter="{x:Bind ViewModel.SelectedNode, Mode=OneWay}"
    TreeViewItemSource="{x:Bind ViewModel.Nodes, Mode=OneWay}" />

原理说明 #

依赖属性是UWP/WPF控件支持外部数据绑定的基础，普通字段无法作为绑定目标。通过将UserControl的命令定义为依赖属性，相当于给外部提供了一个“接口”，让外部ViewModel的命令可以直接传递到UserControl内部的按钮，完全由外部ViewModel处理命令的执行逻辑，UserControl只负责转发命令，实现了控件的复用性和逻辑解耦。

内容的提问来源于stack exchange，提问作者E. A. Bagby