如何为特定按钮事件触发 ViewModel 命令 [英] How to trigger ViewModel command for a specific button events

问题描述

如何通过按钮的特定事件调用 ViewModel 上的命令，例如 MouseDoubleClick?

How can a command on a ViewModel be invoked by a specific event of a button, such as MouseDoubleClick?

推荐答案

您可以使用 System.Windows.Interactivity 命名空间中的 EventTrigger，它是所谓的棱镜框架.如果您刚刚开始使用 MVVM，现在不要太在意 Prism，但请记住它以备后用.无论如何，您可以使用 EventTrigger

You can use the EventTrigger in the System.Windows.Interactivity namespace, which is part of the so-called Prism framework. If you're just getting started with MVVM, don't care too much for Prism by now, but keep it in mind for later. Anyway, you can steel the EventTrigger

它是这样工作的:

引用程序集System.Windows.Interactivity.dll

在 XAML 中，引用命名空间:

In XAML, reference the namespace:

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

然后在您的 Button 或任何其他控件中，添加一个 EventTrigger，如下所示:

Then in your Button or any other control, add a EventTrigger like this:

<Button Content="Button">
   <i:Interaction.Triggers>
      <i:EventTrigger EventName="MouseDoubleClick">
         <i:InvokeCommandAction Command="{Binding CommandToBindTo}" 
                                CommandParameter="{Binding CommandParameterToBindTo}" />
      </i:EventTrigger>
   </i:Interaction.Triggers>
</Button>

通过这种方式，您可以将事件绑定到 DataContext 上的 Command.

This way, you bind your event to a Command on your DataContext.

备注

为了阐明用法，这里有一个真实的例子，包括 ViewModel.虚构的需求是允许用户在列表中选择一个项目，然后执行一个将所选项目作为参数的命令:

To clarify the usage, here's a kind of real life example including the ViewModel. The fictional requirement is to allow the user to select an item in a list and then perform a command which takes the selected item as a parameter:

<ListBox x:Name="ItemsList" ItemsSource="{Binding Items}" />

<Button Content="Do something with selected item">
   <i:Interaction.Triggers>
      <i:EventTrigger EventName="MouseDoubleClick">
         <i:InvokeCommandAction Command="{Binding DoSomethingCommand}" 
                                CommandParameter="{Binding SelectedItem, 
                                                   ElementName=ItemsList}" />
      </i:EventTrigger>
   </i:Interaction.Triggers>
</Button>

那就是 ViewModel.请注意命令的参数是如何使用的，在示例中使用 DelegateCommand 对象的通用版本，因为您在每个 MVVM 框架(有时是 RelayCommand)中获得它.此类将所需参数的类型作为通用参数(此处为 ItemViewModel)，并需要一个采用相应参数的方法(此处为 ExecuteDoSomethingWithItem(ItemViewModel ...)).剩下的就是 WPF 魔法:在 XAML 中绑定 CommandParameter 属性的对象将作为 Execute(...) 函数中的参数传递.

And that would be the ViewModel. Note how the parameter to the command is used, in the example with a generic version of a DelegateCommand object as you get it in every MVVM framework (sometimes RelayCommand). This class takes the type of the required parameter as a generic parameter (here ItemViewModel) and requires a method which takes an according parameter (here ExecuteDoSomethingWithItem(ItemViewModel ...)). The rest is WPF magic: The oject to which the CommandParameter property is bound in your XAML will be passed through as the parameter in your Execute(...) function.

public class ViewModel
{
    ObservableCollection<ItemViewModel> Items { get; set; }

    public ICommand DoSomethingCommand
    {
        get
        {
            return _doSomethingCommand ??
                   (_doSomethingCommand = new DelegateCommand<ItemViewModel>(ExecuteDoSomethingWithItem));
        }
    }

    private DelegateCommand<ItemViewModel> _doSomethingCommand;

    private void ExecuteDoSomethingWithItem(ItemViewModel itemToDoSomethingWith)
    {
        // Do something
    }

    public ViewModel()
    {
        Items = new ObservableCollection<ItemViewModel>();
        // Fill the collection
    }
}

享受学习 MVVM 的乐趣，值得.

Have fun with learning MVVM, it's worth it.

这篇关于如何为特定按钮事件触发 ViewModel 命令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！