WPF MVVM架构下非按钮自定义UserControl如何实现命令绑定

• 概念错位：让自定义UserControl本身实现ICommand接口是完全错误的方向。WPF中可点击控件（如原生Button）的设计逻辑是：控件作为命令的触发源，对外暴露可绑定的ICommand类型依赖属性，供外部ViewModel绑定自己的命令对象，而非控件自身充当命令。你当前的类实现ICommand的方式，对外部绑定逻辑没有任何可识别的入口，绑定引擎根本找不到要对接的对象。
• 命令触发逻辑完全反向：你把鼠标点击的状态存在PowerButtonClick布尔字段里，试图在CanExecute方法中读取这个标记完成触发，完全违背了ICommand的设计逻辑。CanExecute的作用是实时反馈命令的可用状态（比如根据ViewModel的状态判断能不能点击），而非记录点击事件；这种拆分为“鼠标按下设标记、等CanExecute读标记”的流程，根本不会被WPF绑定引擎主动触发，自然没有效果。
• 现有内置命令绑定是无效空壳：你在XAML中绑定的ApplicationCommands.New是WPF内置的路由命令，对应的Executed/CanExecute处理方法都是抛出未实现异常的空方法，既没有和外部传入的命令打通，也没有任何实际执行逻辑。
• 普通属性不支持WPF绑定：你当前定义的PowerButtonClick是普通CLR属性，没有注册为依赖属性，无法参与WPF的绑定通知机制，就算属性值变了，绑定引擎也感知不到。
• 触发链路完全断裂：当前鼠标按下事件仅设置了一个布尔标记，全程没有拿到外部传入的命令对象、没有判断命令可执行性、没有调用命令的Execute方法，自然无法触发ViewModel的逻辑。

完全按照WPF原生按钮的设计模式改造自定义控件，保留原有视觉效果的同时，实现MVVM下的命令绑定能力。

第一步：改造后台代码（code-behind） #

• 删除类上的ICommand接口实现、删除所有无用的PropertyChanged相关代码、删除PowerButtonClick普通属性、删除空的路由命令绑定事件处理方法
• 定义两个WPF绑定系统认可的依赖属性：
  • Command：类型为ICommand，作为外部命令的绑定入口
  • CommandParameter：类型为object，支持向命令传递自定义参数
• 打通鼠标点击到命令执行的完整链路：鼠标按下时，读取当前绑定的命令，校验可执行性后触发执行
• 同步命令的状态变化：当绑定的命令的可执行状态变化时，自动更新控件的视觉反馈（比如禁用态变灰）

改造后的后台代码示例：

public partial class PowerButton : UserControl
{
    // 依赖属性：绑定外部传入的命令
    public static readonly DependencyProperty CommandProperty = 
        DependencyProperty.Register(
            nameof(Command), 
            typeof(ICommand), 
            typeof(PowerButton), 
            new PropertyMetadata(null, OnCommandChanged));

    public ICommand Command
    {
        get => (ICommand)GetValue(CommandProperty);
        set => SetValue(CommandProperty, value);
    }

    // 依赖属性：命令参数
    public static readonly DependencyProperty CommandParameterProperty = 
        DependencyProperty.Register(
            nameof(CommandParameter), 
            typeof(object), 
            typeof(PowerButton), 
            new PropertyMetadata(null));

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

    public PowerButton()
    {
        InitializeComponent();
        // 统一监听鼠标按下事件，保证点击任意绘制区域都能触发
        this.PreviewMouseDown += OnPowerButtonMouseDown;
    }

    // 鼠标按下触发逻辑
    private void OnPowerButtonMouseDown(object sender, MouseButtonEventArgs e)
    {
        var command = Command;
        if (command == null) return;
        // 先判断命令是否可执行
        if (command.CanExecute(CommandParameter))
        {
            command.Execute(CommandParameter);
        }
    }

    // 命令属性变更时，订阅/取消订阅命令的状态变化事件
    private static void OnCommandChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var control = (PowerButton)d;
        if (e.OldValue is ICommand oldCommand)
        {
            oldCommand.CanExecuteChanged -= control.OnCommandCanExecuteChanged;
        }
        if (e.NewValue is ICommand newCommand)
        {
            newCommand.CanExecuteChanged += control.OnCommandCanExecuteChanged;
        }
        // 初始加载时更新一次控件状态
        control.OnCommandCanExecuteChanged(control, EventArgs.Empty);
    }

    // 命令状态变化时，更新控件的可用状态
    private void OnCommandCanExecuteChanged(object sender, EventArgs e)
    {
        var command = Command;
        IsEnabled = command == null || command.CanExecute(CommandParameter);
    }
}

第二步：简化XAML定义 #

• 删除无用的内置ApplicationCommands.New的CommandBinding配置
• 移除之前单独绑在Ellipse上的MouseDown事件（因为已经在后台统一用PreviewMouseDown处理了）
• 保留原有所有的视觉绘制元素不变，改造后的XAML示例：

<UserControl x:Class="HmiButtonControl.PowerButton"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:ed="clr-namespace:Microsoft.Expression.Shapes;assembly=Microsoft.Expression.Drawing"
         mc:Ignorable="d" 
         d:DesignHeight="450" d:DesignWidth="800" >
    <Viewbox>
        <Canvas Height ="100" Width="100">
            <Ellipse Canvas.Left="0" Canvas.Top="0" Width="100" Height="100" StrokeThickness="2" Stroke ="Gray">
                <Ellipse.Fill>
                    <LinearGradientBrush x:Name ="LinearProcessBrush" StartPoint ="0.5, 0.5" EndPoint="1,0" SpreadMethod="Pad">
                        <GradientStop Color ="Black" Offset="0"/>
                        <GradientStop Color ="Gray" Offset ="2" />
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse Canvas.Left="15" Canvas.Top="15" Width="70" Height="70" StrokeThickness="0" Stroke ="Gray">
                <Ellipse.Fill>
                    <LinearGradientBrush x:Name ="LinearProcessBrush2" StartPoint ="1, 0.5" EndPoint="0,1" SpreadMethod="Pad">
                        <GradientStop Color ="Black" Offset="0"/>
                        <GradientStop Color ="Gray" Offset ="2" />
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <ed:Arc Canvas.Left="25" Width="50" Height="50" Canvas.Top="25" ArcThickness="6" StartAngle="30" EndAngle="330" Stretch="None" Fill ="Red"  />
            <Rectangle Canvas.Left="46" Canvas.Top="20" Width="8" Height="24" Stretch="Fill" Fill="Red" />
        </Canvas>
    </Viewbox>
</UserControl>

使用方式 #

在外部页面或窗口中，就可以像用原生Button一样绑定ViewModel的命令，完全符合MVVM架构要求，例如：

<local:PowerButton Command="{Binding PowerOnCommand}" CommandParameter="1" />

绑定后点击控件任意视觉区域，就会自动触发ViewModel中对应的PowerOnCommand的执行逻辑。

可选优化：如果不想写自定义的触发逻辑，也可以通过WPF内置的交互库，直接将MouseDown事件映射到命令执行，不需要额外写后台处理代码，但作为可复用的自定义控件，暴露标准的Command依赖属性是更通用、兼容性更好的实现方式。

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