WinUI3中AutoSuggestBox的MVVM模式DelegateCommand实现咨询

核心方案说明 #

在WinUI3中，推荐使用官方维护的Microsoft.Toolkit.Mvvm（MVVM工具包）和Microsoft.Toolkit.WinUI.Behaviors（行为扩展）来实现事件到ViewModel命令的绑定，相比8年前UWP的手动实现方案，这套方案更简洁、解耦性更强且维护成本更低。

步骤1：安装必要NuGet包 #

• Microsoft.Toolkit.Mvvm：提供DelegateCommand等MVVM基础组件
• Microsoft.Toolkit.WinUI.Behaviors：提供EventToCommandBehavior，用于将控件事件转换为ViewModel命令

步骤2：ViewModel实现 #

将原后台的事件处理逻辑迁移到ViewModel中，使用DelegateCommand<T>接收事件参数：

using Microsoft.Toolkit.Mvvm.ComponentModel;
using Microsoft.Toolkit.Mvvm.Input;
using Microsoft.UI.Xaml.Controls;

public class MainViewModel : ObservableObject
{
    // 绑定QuerySubmitted事件的命令
    public DelegateCommand<AutoSuggestBoxQuerySubmittedEventArgs> QuerySubmittedCommand { get; }
    // 绑定SuggestionChosen事件的命令
    public DelegateCommand<AutoSuggestBoxSuggestionChosenEventArgs> SuggestionChosenCommand { get; }

    public MainViewModel()
    {
        QuerySubmittedCommand = new DelegateCommand<AutoSuggestBoxQuerySubmittedEventArgs>(OnQuerySubmitted);
        SuggestionChosenCommand = new DelegateCommand<AutoSuggestBoxSuggestionChosenEventArgs>(OnSuggestionChosen);
    }

    private void OnQuerySubmitted(AutoSuggestBoxQuerySubmittedEventArgs args)
    {
        if (args.ChosenSuggestion != null)
        {
            // 处理选中建议项的业务逻辑
        }
        else if (!string.IsNullOrEmpty(args.QueryText))
        {
            // 处理直接输入查询文本的业务逻辑
        }
    }

    private void OnSuggestionChosen(AutoSuggestBoxSuggestionChosenEventArgs args)
    {
        // 处理用户选择建议项的业务逻辑，可通过args.SelectedItem获取选中内容
    }
}

步骤3：XAML绑定配置 #

移除原Code-Behind事件绑定，改用EventToCommandBehavior将控件事件绑定到ViewModel命令：

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:behaviors="using:Microsoft.Toolkit.WinUI.Behaviors"
    xmlns:vm="using:你的ViewModel命名空间">

    <Page.DataContext>
        <vm:MainViewModel />
    </Page.DataContext>

    <AutoSuggestBox PlaceholderText="Type a control name"
                    QueryIcon="Find"
                    Width="300"
                    HorizontalAlignment="Left">
        <interactivity:Interaction.Behaviors>
            <!-- 绑定QuerySubmitted事件到ViewModel命令 -->
            <behaviors:EventToCommandBehavior
                EventName="QuerySubmitted"
                Command="{Binding QuerySubmittedCommand}"
                PassEventArgsToCommand="True" />
            
            <!-- 绑定SuggestionChosen事件到ViewModel命令 -->
            <behaviors:EventToCommandBehavior
                EventName="SuggestionChosen"
                Command="{Binding SuggestionChosenCommand}"
                PassEventArgsToCommand="True" />
        </interactivity:Interaction.Behaviors>
    </AutoSuggestBox>
</Page>

方案优势 #

• 完全遵循MVVM模式，View与ViewModel彻底解耦，Code-Behind无需处理业务逻辑
• 依赖官方维护的工具包，稳定性和兼容性远高于自定义实现
• DelegateCommand自带命令状态管理（如CanExecute），可灵活控制命令是否可用
• 事件参数自动传递到ViewModel，无需额外处理参数映射

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