WPF 将 UI 事件绑定到 ViewModel 中的命令

Question

我正在重构一个简单的应用程序以遵循 MVVM，我的问题是如何将 SelectionChanged 事件从我的代码中移出到 viewModel？我看过一些将元素绑定到命令的示例，但并没有完全掌握。任何人都可以帮助解决这个问题。谢谢！

谁能提供使用以下代码的解决方案？非常感谢！

public partial class MyAppView : Window 
{
    public MyAppView()
    {
        InitializeComponent();

        this.DataContext = new MyAppViewModel ();

        // Insert code required on object creation below this point.
    }

    private void contactsList_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
    {
        //TODO: Add event handler implementation here.           
        //for each selected contact get the labels and put in collection 

        ObservableCollection<AggregatedLabelModel> contactListLabels = new ObservableCollection<AggregatedLabelModel>();

        foreach (ContactListModel contactList in contactsList.SelectedItems)
        {
            foreach (AggregatedLabelModel aggLabel in contactList.AggLabels)
            {
                contactListLabels.Add(aggLabel);
            }
        }
        //aggregate the contactListLabels by name
        ListCollectionView selectedLabelsView = new ListCollectionView(contactListLabels);

        selectedLabelsView.GroupDescriptions.Add(new PropertyGroupDescription("Name"));
        tagsList.ItemsSource = selectedLabelsView.Groups;
    }
}

Answer 1

您应该将EventTrigger 与Windows.Interactivity 命名空间中的InvokeCommandAction 结合使用。这是一个例子：

<ListBox ...>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="SelectionChanged">
            <i:InvokeCommandAction Command="{Binding SelectedItemChangedCommand}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</ListBox>

您可以通过 Add reference > Assemblies > Extensions 引用 System.Windows.Interactivity。

完整的i 命名空间是：xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"。

Answer 2

这个问题有类似的问题。

WPF MVVM : Commands are easy. How to Connect View and ViewModel with RoutedEvent

我处理这个问题的方法是在 ViewModel 中有一个 SelectedItem 属性，然后将 ListBox 的 SelectedItem 或其他任何东西绑定到该属性。

Answer 3

要重构这一点，您需要转变思路。您将不再处理“选择更改”事件，而是将所选项目存储在您的视图模型中。然后，您将使用双向数据绑定，以便当用户选择一个项目时，您的视图模型会更新，而当您更改所选项目时，您的视图会更新。

Answer 4

考虑Microsoft.Xaml.Behaviors.Wpf，它的所有者是Microsoft，您可以在该页面中看到它。

System.Windows.Interactivity.WPF所有者是mthamil，有人能告诉我它可靠吗？

Microsoft.Xaml.Behaviors.Wpf 的示例：

<UserControl ...
             xmlns:behaviors="http://schemas.microsoft.com/xaml/behaviors"
             ...>

<Button x:Name="button">
    <behaviors:Interaction.Triggers>
        <behaviors:EventTrigger EventName="Click" SourceObject="{Binding ElementName=button}">
            <behaviors:InvokeCommandAction Command="{Binding ClickCommand}" />
        </behaviors:EventTrigger>
    </behaviors:Interaction.Triggers>
</Button>

</UserControl>

Answer 5

您最好的选择是使用Windows.Interactivity。使用EventTriggers 将ICommand 附加到任何RoutedEvent。

这里有一篇文章可以帮助您入门：Silverlight and WPF Behaviours and Triggers

Answer 6

<ListBox SelectionChanged="{eb:EventBinding Command=SelectedItemChangedCommand, CommandParameter=$e}">

</ListBox>

命令

{eb:EventBinding}（查找命令的简单命名模式）

{eb:EventBinding Command=CommandName}

命令参数

$e (EventAgrs)

$this 或 $this.Property

字符串

https://github.com/JonghoL/EventBindingMarkup

Answer 7

我知道这有点晚了，但是微软已经将他们的 Xaml.Behaviors 开源了，现在只需一个命名空间就可以更容易地使用交互性。

1. 首先将 Microsoft.Xaml.Behaviors.Wpf Nuget 包添加到您的项目中。
   https://www.nuget.org/packages/Microsoft.Xaml.Behaviors.Wpf/
2. 将 xmlns:behaviours="http://schemas.microsoft.com/xaml/behaviors" 命名空间添加到您的 xml.

那就这样用吧，

<Button Width="150" Style="{DynamicResource MaterialDesignRaisedDarkButton}">
   <behaviours:Interaction.Triggers>
       <behaviours:EventTrigger EventName="Click">
           <behaviours:InvokeCommandAction Command="{Binding OpenCommand}" PassEventArgsToCommand="True"/>
       </behaviours:EventTrigger>
    </behaviours:Interaction.Triggers>
    Open
</Button>

PassEventArgsToCommand="True" 应设置为 True，并且您实现的 RelayCommand 可以将 RoutedEventArgs 或对象作为模板。如果您使用 object 作为参数类型，只需将其转换为适当的事件类型。

命令看起来像这样，

OpenCommand = new RelayCommand<object>(OnOpenClicked, (o) => { return true; });

命令方法看起来像这样，

private void OnOpenClicked(object parameter)
{
    Logger.Info(parameter?.GetType().Name);
}

“参数”将是路由事件对象。

还有日志以防你好奇，

2020-12-15 11:40:36.3600|INFO|MyApplication.ViewModels.MainWindowViewModel|RoutedEventArgs

如您所见，记录的 TypeName 是 RoutedEventArgs

RelayCommand 的实现可以在这里找到。

Why RelayCommand

PS：您可以绑定到任何控件的任何事件。像Window的Closing事件一样，你会得到相应的事件。

Answer 8

我会关注这个question中的最佳答案

基本上，您的视图模型将包含所有项目的列表和选定项目的列表。然后，您可以将一个行为附加到您的列表框，以管理您的选定项目列表。

这样做意味着您在后面的代码中没有任何内容，并且 xaml 很容易遵循，而且该行为可以在您的应用程序的其他地方重复使用。

<ListBox ItemsSource="{Binding AllItems}" Demo:SelectedItems.Items="{Binding SelectedItems}" SelectionMode="Multiple" />

Answer 9

当需要绑定自定义用户控件的事件时，有时通过交互触发器将事件绑定到命令的解决方案不起作用。 在这种情况下，您可以使用自定义行为。

声明绑定行为，如：

public class PageChangedBehavior
{
    #region Attached property

    public static ICommand PageChangedCommand(DependencyObject obj)
    {
        return (ICommand)obj.GetValue(PageChangedCommandProperty);
    }
    public static void SetPageChangedCommand(DependencyObject obj, ICommand value)
    {
        obj.SetValue(PageChangedCommandProperty, value);
    }

    public static readonly DependencyProperty PageChangedCommandProperty =
        DependencyProperty.RegisterAttached("PageChangedCommand", typeof(ICommand), typeof(PageChangedBehavior),
            new PropertyMetadata(null, OnPageChanged));

    #endregion

    #region Attached property handler

    private static void OnPageChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var control = d as PageControl;
        if (control != null)
        {
            if (e.NewValue != null)
            {
                control.PageChanged += PageControl_PageChanged;
            }
            else
            {
                control.PageChanged -= PageControl_PageChanged;
            }
        }
    }

    static void PageControl_PageChanged(object sender, int page)
    {
        ICommand command = PageChangedCommand(sender as DependencyObject);

        if (command != null)
        {
            command.Execute(page);
        }
    }

    #endregion

}

然后将其绑定到 xaml 中的命令：

        <controls:PageControl
            Grid.Row="2"
            CurrentPage="{Binding Path=UsersSearchModel.Page,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
            PerPage="{Binding Path=UsersSearchModel.PageSize,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
            Count="{Binding Path=UsersSearchModel.SearchResults.TotalItemCount}"
            behaviors:PageChangedBehavior.PageChangedCommand="{Binding PageChangedCommand}">
        </controls:PageControl>

Answer 10

正如@Cameron MacFarland 所提到的，我会简单地双向绑定到 viewModel 上的属性。在属性设置器中，您可以执行所需的任何逻辑，例如添加到联系人列表中，具体取决于您的要求。

但是，我不一定将属性称为“SelectedItem”，因为 viewModel 不应该知道视图层以及它如何与其属性交互。我会称它为 CurrentContact 之类的东西。

显然，除非您只是想创建命令作为练习等。

Answer 11

这是一个使用MarkupExtension 的实现。尽管具有低级性质（在此方案中是必需的），但 XAML 代码非常简单：

XAML

<SomeControl Click="{local:EventBinding EventToCommand}" CommandParameter="{local:Int32 12345}" />

Marup 扩展

public class EventBindingExtension : MarkupExtension
{
    private static readonly MethodInfo EventHandlerImplMethod = typeof(EventBindingExtension).GetMethod(nameof(EventHandlerImpl), new[] { typeof(object), typeof(string) });
    public string Command { get; set; }

    public EventBindingExtension()
    {
    }
    public EventBindingExtension(string command) : this()
    {
        Command = command;
    }

    // Do not use!!
    public static void EventHandlerImpl(object sender, string commandName)
    {
        if (sender is FrameworkElement frameworkElement)
        {
            object dataContext = frameworkElement.DataContext;

            if (dataContext?.GetType().GetProperty(commandName)?.GetValue(dataContext) is ICommand command)
            {
                object commandParameter = (frameworkElement as ICommandSource)?.CommandParameter;
                if (command.CanExecute(commandParameter)) command.Execute(commandParameter);
            }
        }
    }

    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        if (serviceProvider.GetService(typeof(IProvideValueTarget)) is IProvideValueTarget targetProvider &&
            targetProvider.TargetObject is FrameworkElement targetObject &&
            targetProvider.TargetProperty is MemberInfo memberInfo)
        {
            Type eventHandlerType;
            if (memberInfo is EventInfo eventInfo) eventHandlerType = eventInfo.EventHandlerType;
            else if (memberInfo is MethodInfo methodInfo) eventHandlerType = methodInfo.GetParameters()[1].ParameterType;
            else return null;

            MethodInfo handler = eventHandlerType.GetMethod("Invoke");
            DynamicMethod method = new DynamicMethod("", handler.ReturnType, new[] { typeof(object), typeof(object) });

            ILGenerator ilGenerator = method.GetILGenerator();
            ilGenerator.Emit(OpCodes.Ldarg, 0);
            ilGenerator.Emit(OpCodes.Ldstr, Command);
            ilGenerator.Emit(OpCodes.Call, EventHandlerImplMethod);
            ilGenerator.Emit(OpCodes.Ret);

            return method.CreateDelegate(eventHandlerType);
        }
        else
        {
            throw new InvalidOperationException("Could not create event binding.");
        }
    }
}