WinUI 3中如何子类化ComboBox并实现ICommandSource及MVVM命令？

WinUI 3的原生ComboBox没有内置Command属性，要在MVVM模式下处理DropDownOpened和SelectionChanged事件，你可以通过子类化ComboBox并实现ICommandSource接口来解决，以下是具体实现步骤：

1. 实现带Command支持的自定义ComboBox #

创建CommandComboBox类，继承自ComboBox并实现ICommandSource接口，同时绑定目标事件触发命令执行：

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Input;
using System.Windows.Input;

public class CommandComboBox : ComboBox, ICommandSource
{
    // 定义DropDownOpened命令依赖属性
    public static readonly DependencyProperty DropDownOpenedCommandProperty =
        DependencyProperty.Register(nameof(DropDownOpenedCommand), typeof(ICommand), typeof(CommandComboBox),
            new PropertyMetadata(null));

    // 定义SelectionChanged命令依赖属性
    public static readonly DependencyProperty SelectionChangedCommandProperty =
        DependencyProperty.Register(nameof(SelectionChangedCommand), typeof(ICommand), typeof(CommandComboBox),
            new PropertyMetadata(null));

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

    // ICommandSource要求的CommandTarget属性（WinUI强制实现，按需使用）
    public static readonly DependencyProperty CommandTargetProperty =
        DependencyProperty.Register(nameof(CommandTarget), typeof(UIElement), typeof(CommandComboBox),
            new PropertyMetadata(null));

    public ICommand DropDownOpenedCommand
    {
        get => (ICommand)GetValue(DropDownOpenedCommandProperty);
        set => SetValue(DropDownOpenedCommandProperty, value);
    }

    public ICommand SelectionChangedCommand
    {
        get => (ICommand)GetValue(SelectionChangedCommandProperty);
        set => SetValue(SelectionChangedCommandProperty, value);
    }

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

    public UIElement CommandTarget
    {
        get => (UIElement)GetValue(CommandTargetProperty);
        set => SetValue(CommandTargetProperty, value);
    }

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        // 订阅目标事件
        DropDownOpened += OnDropDownOpened;
        SelectionChanged += OnSelectionChanged;
    }

    private void OnDropDownOpened(object sender, RoutedEventArgs e)
    {
        ExecuteCommand(DropDownOpenedCommand);
    }

    private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        ExecuteCommand(SelectionChangedCommand);
    }

    private void ExecuteCommand(ICommand command)
    {
        if (command?.CanExecute(CommandParameter) == true)
        {
            command.Execute(CommandParameter);
        }
    }
}

2. 实现通用RelayCommand #

如果项目中没有现成的命令实现，可创建基础的RelayCommand类来绑定ViewModel逻辑：

using System.Windows.Input;

public class RelayCommand : ICommand
{
    private readonly Action<object> _execute;
    private readonly Func<object, bool> _canExecute;

    public event EventHandler CanExecuteChanged;

    public RelayCommand(Action<object> execute, Func<object, bool> canExecute = null)
    {
        _execute = execute ?? throw new ArgumentNullException(nameof(execute));
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter)
    {
        return _canExecute?.Invoke(parameter) ?? true;
    }

    public void Execute(object parameter)
    {
        _execute(parameter);
    }

    public void RaiseCanExecuteChanged()
    {
        CanExecuteChanged?.Invoke(this, EventArgs.Empty);
    }
}

3. ViewModel中绑定命令 #

在ViewModel中定义对应命令，并实现触发后的业务逻辑：

using CommunityToolkit.Mvvm.ComponentModel;
using System.Diagnostics;
using System.Windows.Input;

public class MainViewModel : ObservableObject
{
    public ICommand ComboBoxDropDownOpenedCommand { get; }
    public ICommand ComboBoxSelectionChangedCommand { get; }

    public MainViewModel()
    {
        ComboBoxDropDownOpenedCommand = new RelayCommand(HandleDropDownOpened);
        ComboBoxSelectionChangedCommand = new RelayCommand(HandleSelectionChanged);
    }

    private void HandleDropDownOpened(object parameter)
    {
        // 下拉面板打开时执行的逻辑
        Debug.WriteLine("ComboBox下拉面板已打开");
    }

    private void HandleSelectionChanged(object parameter)
    {
        // 选中项变更时执行的逻辑
        Debug.WriteLine("ComboBox选中项已变更");
    }
}

4. XAML中使用自定义ComboBox #

在XAML中引用自定义控件并绑定ViewModel的命令：

<Page
    x:Class="WinUI3Demo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI3Demo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <local:CommandComboBox
            ItemsSource="{Binding YourItemList}"
            DropDownOpenedCommand="{Binding ComboBoxDropDownOpenedCommand}"
            SelectionChangedCommand="{Binding ComboBoxSelectionChangedCommand}"
            CommandParameter="OptionalParameter">
            <!-- 自定义ItemTemplate -->
        </local:CommandComboBox>
    </Grid>
</Page>

注意事项 #

• WinUI 3的ICommandSource接口定义与WPF存在差异，直接照搬WPF代码会因API不兼容失效，需按WinUI的依赖属性和事件订阅逻辑调整。
• 若需要区分不同事件的触发源，可通过CommandParameter传递标识参数，或在ViewModel中针对性处理。

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