使用 MVVM 从 WPF ListView 项触发双击事件

Question

在使用 MVVM 的 WPF 应用程序中，我有一个带有列表视图项的用户控件。在运行时，它将使用数据绑定来用对象集合填充列表视图。

将双击事件附加到列表视图中的项目的正确方法是什么，以便当双击列表视图中的项目时，会触发视图模型中的相应事件并引用单击的项目？

如何以干净的 MVVM 方式完成，即视图中没有代码？

Answer 1

我喜欢使用Attached Command Behaviors 和命令。 Marlon Grech 对附加命令行为有很好的实现。使用这些，我们可以为 ListView 的 ItemContainerStyle 属性分配一个样式，该属性将为每个 ListViewItem 设置命令。

在这里，我们设置要在 MouseDoubleClick 事件上触发的命令，并且 CommandParameter 将是我们单击的数据对象。在这里，我沿着可视化树向上移动以获取我正在使用的命令，但您也可以轻松地创建应用程序范围的命令。

<Style x:Key="Local_OpenEntityStyle"
       TargetType="{x:Type ListViewItem}">
    <Setter Property="acb:CommandBehavior.Event"
            Value="MouseDoubleClick" />
    <Setter Property="acb:CommandBehavior.Command"
            Value="{Binding ElementName=uiEntityListDisplay, Path=DataContext.OpenEntityCommand}" />
    <Setter Property="acb:CommandBehavior.CommandParameter"
            Value="{Binding}" />
</Style>

对于命令，您可以直接实现ICommand，也可以使用MVVM Toolkit 中的一些帮助器。

Answer 2

您可以使用Caliburn 的 Action 功能将事件映射到 ViewModel 上的方法。假设您的 ViewModel 上有一个 ItemActivated 方法，那么相应的 XAML 将如下所示：

<ListView x:Name="list" 
   Message.Attach="[Event MouseDoubleClick] = [Action ItemActivated(list.SelectedItem)]" >

有关更多详细信息，您可以查看 Caliburn 的文档和示例。

Answer 3

拜托，代码落后根本不是一件坏事。不幸的是，WPF 社区中的很多人都搞错了。

MVVM 不是消除背后代码的模式。就是将视图部分（外观、动画等）与逻辑部分（工作流程）分开。此外，您还可以对逻辑部分进行单元测试。

我知道你必须在后面编写代码的场景足够多，因为数据绑定并不是解决所有问题的方法。在您的场景中，我将处理文件隐藏代码中的 DoubleClick 事件，并将此调用委托给 ViewModel。

可以在此处找到使用代码隐藏但仍实现 MVVM 分离的示例应用程序：

Win 应用程序框架 (WAF) - https://github.com/jbe2277/waf

Answer 4

我意识到这个讨论已经有一年了，但是对于 .NET 4，对这个解决方案有什么想法吗？我绝对同意 MVVM 的目的不是消除文件背后的代码。我也非常强烈地感觉到，仅仅因为某些事情很复杂，并不意味着它会更好。这是我在后面的代码中输入的内容：

    private void ButtonClick(object sender, RoutedEventArgs e)
    {
        dynamic viewModel = DataContext;
        viewModel.ButtonClick(sender, e);
    }

Answer 5

我发现在创建视图时链接命令更简单：

var r = new MyView();
r.MouseDoubleClick += (s, ev) => ViewModel.MyCommand.Execute(null);
BindAndShow(r, ViewModel);

在我的情况下，BindAndShow 看起来像这样（updatecontrols+avalondock）：

private void BindAndShow(DockableContent view, object viewModel)
{
    view.DataContext = ForView.Wrap(viewModel);
    view.ShowAsDocument(dockManager);
    view.Focus();
}

尽管该方法应该适用于您打开新视图的任何方法。

Answer 6

我找到了一种非常简单且干净的方法来使用 Blend SDK 事件触发器来完成此操作。干净的 MVVM，可重用且无代码隐藏。

你可能已经有了这样的东西：

<Style x:Key="MyListStyle" TargetType="{x:Type ListViewItem}">

现在为 ListViewItem 添加一个 ControlTemplate，如果你还没有使用的话：

<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="{x:Type ListViewItem}">
      <GridViewRowPresenter Content="{TemplateBinding Content}"
                            Columns="{TemplateBinding GridView.ColumnCollection}" />
    </ControlTemplate>
  </Setter.Value>
 </Setter>

GridViewRowPresenter 将是构成列表行元素的所有“内部”元素的视觉根。现在我们可以在那里插入一个触发器来查找 MouseDoubleClick 路由事件并通过 InvokeCommandAction 调用命令，如下所示：

<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="{x:Type ListViewItem}">
      <GridViewRowPresenter Content="{TemplateBinding Content}"
                            Columns="{TemplateBinding GridView.ColumnCollection}">
        <i:Interaction.Triggers>
          <i:EventTrigger EventName="MouseDoubleClick">
            <i:InvokeCommandAction Command="{Binding DoubleClickCommand}" />
          </i:EventTrigger>
        </i:Interaction.Triggers>
      </GridViewRowPresenter>
    </ControlTemplate>
  </Setter.Value>
 </Setter>

如果您在 GridRowPresenter“上方”有视觉元素（可能从网格开始），您也可以将触发器放在那里。

不幸的是，MouseDoubleClick 事件并不是从每个可视元素中生成的（例如它们来自控件，但不是来自 FrameworkElements）。一种解决方法是从 EventTrigger 派生一个类并查找 ClickCount 为 2 的 MouseButtonEventArgs。这有效地过滤掉了所有非 MouseButtonEvents 和所有 ClickCount != 2 的 MoseButtonEvents。

class DoubleClickEventTrigger : EventTrigger
{
    protected override void OnEvent(EventArgs eventArgs)
    {
        var e = eventArgs as MouseButtonEventArgs;
        if (e == null)
        {
            return;
        }
        if (e.ClickCount == 2)
        {
            base.OnEvent(eventArgs);
        }
    }
}

现在我们可以这样写（'h' 是上面帮助类的命名空间）：

<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="{x:Type ListViewItem}">
      <GridViewRowPresenter Content="{TemplateBinding Content}"
                            Columns="{TemplateBinding GridView.ColumnCollection}">
        <i:Interaction.Triggers>
          <h:DoubleClickEventTrigger EventName="MouseDown">
            <i:InvokeCommandAction Command="{Binding DoubleClickCommand}" />
          </h:DoubleClickEventTrigger>
        </i:Interaction.Triggers>
      </GridViewRowPresenter>
    </ControlTemplate>
  </Setter.Value>
 </Setter>

Answer 7

我能够让它与 .NET 4.5 一起使用。看起来很简单，不需要第三方或代码。

<ListView ItemsSource="{Binding Data}">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Margin="2">
                    <Grid.InputBindings>
                        <MouseBinding Gesture="LeftDoubleClick" Command="{Binding ShowDetailCommand}"/>
                    </Grid.InputBindings>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Image Source="..\images\48.png" Width="48" Height="48"/>
                    <TextBlock Grid.Row="1" Text="{Binding Name}" />
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Answer 8

我从 rushui 中看到了带有 InuptBindings 的解决方案，但我仍然无法点击没有文本的 ListViewItem 区域 - 即使将背景设置为透明，所以我解决了它使用不同的模板。

此模板适用于 ListViewItem 已被选中并处于活动状态时：

<ControlTemplate x:Key="SelectedActiveTemplate" TargetType="{x:Type ListViewItem}">
   <Border Background="LightBlue" HorizontalAlignment="Stretch">
   <!-- Bind the double click to a command in the parent view model -->
      <Border.InputBindings>
         <MouseBinding Gesture="LeftDoubleClick" 
                       Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.ItemSelectedCommand}"
                       CommandParameter="{Binding}" />
      </Border.InputBindings>
      <TextBlock Text="{Binding TextToShow}" />
   </Border>
</ControlTemplate>

此模板适用于 ListViewItem 已被选中且处于非活动状态时：

<ControlTemplate x:Key="SelectedInactiveTemplate" TargetType="{x:Type ListViewItem}">
   <Border Background="Lavender" HorizontalAlignment="Stretch">
      <TextBlock Text="{Binding TextToShow}" />
   </Border>
</ControlTemplate>

这是用于 ListViewItem 的默认样式：

<Style TargetType="{x:Type ListViewItem}">
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate>
            <Border HorizontalAlignment="Stretch">
               <TextBlock Text="{Binding TextToShow}" />
            </Border>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
   <Style.Triggers>
      <MultiTrigger>
         <MultiTrigger.Conditions>
            <Condition Property="IsSelected" Value="True" />
            <Condition Property="Selector.IsSelectionActive" Value="True" />
         </MultiTrigger.Conditions>
         <Setter Property="Template" Value="{StaticResource SelectedActiveTemplate}" />
      </MultiTrigger>
      <MultiTrigger>
         <MultiTrigger.Conditions>
            <Condition Property="IsSelected" Value="True" />
            <Condition Property="Selector.IsSelectionActive" Value="False" />
         </MultiTrigger.Conditions>
         <Setter Property="Template" Value="{StaticResource SelectedInactiveTemplate}" />
      </MultiTrigger>
   </Style.Triggers>
</Style>

我不喜欢重复 TextBlock 及其文本绑定，我不知道我是否可以在一个位置声明它。

我希望这对某人有帮助！

Answer 9

这是在 ListBox 和 ListView 上完成的行为。

public class ItemDoubleClickBehavior : Behavior<ListBox>
{
    #region Properties
    MouseButtonEventHandler Handler;
    #endregion

    #region Methods

    protected override void OnAttached()
    {
        base.OnAttached();

        AssociatedObject.PreviewMouseDoubleClick += Handler = (s, e) =>
        {
            e.Handled = true;
            if (!(e.OriginalSource is DependencyObject source)) return;

            ListBoxItem sourceItem = source is ListBoxItem ? (ListBoxItem)source : 
                source.FindParent<ListBoxItem>();

            if (sourceItem == null) return;

            foreach (var binding in AssociatedObject.InputBindings.OfType<MouseBinding>())
            {
                if (binding.MouseAction != MouseAction.LeftDoubleClick) continue;

                ICommand command = binding.Command;
                object parameter = binding.CommandParameter;

                if (command.CanExecute(parameter))
                    command.Execute(parameter);
            }
        };
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        AssociatedObject.PreviewMouseDoubleClick -= Handler;
    }

    #endregion
}

这是用于查找父级的扩展类。

public static class UIHelper
{
    public static T FindParent<T>(this DependencyObject child, bool debug = false) where T : DependencyObject
    {
        DependencyObject parentObject = VisualTreeHelper.GetParent(child);

        //we've reached the end of the tree
        if (parentObject == null) return null;

        //check if the parent matches the type we're looking for
        if (parentObject is T parent)
            return parent;
        else
            return FindParent<T>(parentObject);
    }
}

用法：

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:coreBehaviors="{{Your Behavior Namespace}}"


<ListView AllowDrop="True" ItemsSource="{Binding Data}">
    <i:Interaction.Behaviors>
       <coreBehaviors:ItemDoubleClickBehavior/>
    </i:Interaction.Behaviors>

    <ListBox.InputBindings>
       <MouseBinding MouseAction="LeftDoubleClick" Command="{Binding YourCommand}"/>
    </ListBox.InputBindings>
</ListView>

Answer 10

我通过使用交互库成功地在 .Net 4.7 框架中实现了这个功能，首先确保在 XAML 文件中声明命名空间

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

然后在 ListView 中使用他各自的 InvokeCommandAction 设置事件触发器，如下所示。

查看：

<ListView x:Name="lv" IsSynchronizedWithCurrentItem="True" 
          ItemsSource="{Binding Path=AppsSource}"  >
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseDoubleClick">
            <i:InvokeCommandAction CommandParameter="{Binding ElementName=lv, Path=SelectedItem}"
                                   Command="{Binding OnOpenLinkCommand}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" />
            <GridViewColumn Header="Developed By" DisplayMemberBinding="{Binding DevelopedBy}" />
        </GridView>
    </ListView.View>
</ListView>

修改上面的代码应该足以使双击事件在您的 ViewModel 上起作用，但是我在示例中为您添加了 Model 和 View Model 类，以便您了解完整的想法。

型号：

public class ApplicationModel
{
    public string Name { get; set; }

    public string DevelopedBy { get; set; }
}

查看模型：

public class AppListVM : BaseVM
{
        public AppListVM()
        {
            _onOpenLinkCommand = new DelegateCommand(OnOpenLink);
            _appsSource = new ObservableCollection<ApplicationModel>();
            _appsSource.Add(new ApplicationModel("TEST", "Luis"));
            _appsSource.Add(new ApplicationModel("PROD", "Laurent"));
        }

        private ObservableCollection<ApplicationModel> _appsSource = null;

        public ObservableCollection<ApplicationModel> AppsSource
        {
            get => _appsSource;
            set => SetProperty(ref _appsSource, value, nameof(AppsSource));
        }

        private readonly DelegateCommand _onOpenLinkCommand = null;

        public ICommand OnOpenLinkCommand => _onOpenLinkCommand;

        private void OnOpenLink(object commandParameter)
        {
            ApplicationModel app = commandParameter as ApplicationModel;

            if (app != null)
            {
                //Your code here
            }
        }
}

如果您需要实现 DelegateCommand 类。