在MVVM/Prism架构中实现可复用UserControl的按钮点击绑定

我明白你的处境——项目整体是MVVM/Prism架构，但这个UserControl一开始用了Code Behind的方式，现在要给它的按钮绑定命令，还要保证复用性，同时不破坏MVVM规范。咱们一步步来搞定：

1. 给UserControl添加命令依赖属性 #

首先，你需要在UserControl的Code Behind里定义一个ICommand类型的依赖属性，这样外部页面（比如Home页面）才能把ViewModel里的命令绑定过来，就像你之前绑定PROP1、PROP2那样。如果需要给命令传递参数，还可以额外加一个CommandParameter的依赖属性。

// 替换成你的UserControl类名
public partial class YourReusableUserControl : UserControl
{
    // 定义ButtonCommand依赖属性
    public static readonly DependencyProperty ButtonCommandProperty =
        DependencyProperty.Register(
            nameof(ButtonCommand), 
            typeof(ICommand), 
            typeof(YourReusableUserControl));

    public ICommand ButtonCommand
    {
        get => (ICommand)GetValue(ButtonCommandProperty);
        set => SetValue(ButtonCommandProperty, value);
    }

    // 可选：定义命令参数的依赖属性
    public static readonly DependencyProperty CommandParameterProperty =
        DependencyProperty.Register(
            nameof(CommandParameter), 
            typeof(object), 
            typeof(YourReusableUserControl));

    public object CommandParameter
    {
        get => GetValue(CommandParameterProperty);
        set => SetValue(CommandParameterProperty, value);
    }

    public YourReusableUserControl()
    {
        InitializeComponent();
    }
}

2. 绑定UserControl内部Button的Command到依赖属性 #

接下来在UserControl的XAML里，把按钮的Command（和CommandParameter如果需要）绑定到咱们刚才定义的依赖属性。这里要注意用RelativeSource来找到UserControl自身，避免继承父级的DataContext导致绑定错误。

<UserControl x:Class="YourNamespace.YourReusableUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:YourNamespace">

    <!-- 你的Label和TextBox已经绑定好了PROP1、PROP2，这里只处理Button -->
    <Button Content="操作按钮"
            Command="{Binding ButtonCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:YourReusableUserControl}}"
            CommandParameter="{Binding CommandParameter, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:YourReusableUserControl}}" />

</UserControl>

3. 在HomeViewModel中创建对应的命令 #

用Prism的DelegateCommand来创建命令非常方便，它自带了Prism的命令管理机制。如果三个UserControl的按钮逻辑不同，就分别创建三个命令；如果逻辑相同，可以复用一个命令，靠参数区分。

using Prism.Commands;
using Prism.Mvvm;

public class HomeViewModel : BindableBase
{
    // 三个UserControl对应的命令，根据需求调整
    public DelegateCommand FirstControlCommand { get; }
    public DelegateCommand SecondControlCommand { get; }
    public DelegateCommand<object> ThirdControlCommand { get; } // 带参数的版本

    public HomeViewModel()
    {
        FirstControlCommand = new DelegateCommand(ExecuteFirstControl);
        SecondControlCommand = new DelegateCommand(ExecuteSecondControl);
        ThirdControlCommand = new DelegateCommand<object>(ExecuteThirdControl);
    }

    private void ExecuteFirstControl()
    {
        // 第一个UserControl按钮的业务逻辑
    }

    private void ExecuteSecondControl()
    {
        // 第二个UserControl按钮的业务逻辑
    }

    private void ExecuteThirdControl(object parameter)
    {
        // 第三个UserControl按钮的业务逻辑，parameter是从视图传递过来的参数
        var controlIdentifier = parameter as string;
        if (!string.IsNullOrEmpty(controlIdentifier))
        {
            // 根据参数做不同处理
        }
    }
}

4. 在Home页面中绑定UserControl的命令到ViewModel #

最后一步，在Home页面的XAML里，把每个UserControl的ButtonCommand（和CommandParameter）绑定到HomeViewModel对应的命令，和你之前绑定PROP1、PROP2的方式一致。

<Page x:Class="YourNamespace.HomePage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="clr-namespace:YourNamespace"
      DataContext="{Binding HomeViewModel}">

    <StackPanel>
        <!-- 第一个UserControl -->
        <local:YourReusableUserControl 
            PROP1="{Binding TextForFirstControl}" 
            PROP2="{Binding InputForFirstControl}"
            ButtonCommand="{Binding FirstControlCommand}" />

        <!-- 第二个UserControl -->
        <local:YourReusableUserControl 
            PROP1="{Binding TextForSecondControl}" 
            PROP2="{Binding InputForSecondControl}"
            ButtonCommand="{Binding SecondControlCommand}" />

        <!-- 第三个带参数的UserControl -->
        <local:YourReusableUserControl 
            PROP1="{Binding TextForThirdControl}" 
            PROP2="{Binding InputForThirdControl}"
            ButtonCommand="{Binding ThirdControlCommand}"
            CommandParameter="ThirdControlIdentifier" />
    </StackPanel>

</Page>

这样操作之后，你的可复用UserControl就完全贴合MVVM模式了——按钮的业务逻辑都在ViewModel里，UserControl只负责视图展示和暴露绑定属性，完美适配你项目的整体架构。

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