WPF：鼠标双击图像使用交互答案

【问题标题】：WPF: Mouse double click on Image using interactionWPF：鼠标双击图像使用交互
【发布时间】：2017-07-12 19:00:27
【问题描述】：

我正在尝试使用交互功能来实现鼠标双击标准图像控件。 Image 控件位于 UserControl 上，应该处理鼠标双击的方法位于视图模型上。代码如下：

1) 用户控制：

<ItemsControl Grid.Row="0" ItemsSource="{Binding SelectedEventPhotoList}"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"                  
            Name="SelectedListView">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Rows="1" Columns="3"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}" Stretch="None">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseDoubleClick">
                        <ei:CallMethodAction MethodName="DblClick" TargetObject="{Binding}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Image>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

3) 查看模型：

public void DblClick()
{
    MessageBox.Show("Double click!");
}

但是，它不起作用。

更新：

我这样做了，但它不起作用：

1) XAML：

<ItemsControl Grid.Row="0" ItemsSource="{Binding SelectedEventPhotoList}"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"                  
            Name="SelectedListView">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Rows="1" Columns="3"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
                <Image Source="{Binding}">
                    <Image.InputBindings>
                        <MouseBinding MouseAction="LeftDoubleClick" Command="{Binding MouseDoubleClickCommand}"/>
                    </Image.InputBindings>
                </Image>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

2) 查看模型：

public DelegateCommand MouseDoubleClickCommand { get; private set; }

在构造函数中：

MouseDoubleClickCommand = new DelegateCommand(DblClick);

并添加方法：

public void DblClick()
{
    MessageBox.Show("Double click!");
}

【问题讨论】：

标签： wpf double-click

【解决方案1】：

Image 类没有MouseDoubleClick 事件，但您可以使用绑定到ICommand 属性的InputBinding：

<Image Source="pic.png">
    <Image.InputBindings>
        <MouseBinding MouseAction="LeftDoubleClick" Command="{Binding MouseDoubleClickCommand}"/>
    </Image.InputBindings>
</Image>

public ICommand MouseDoubleClickCommand { get; } = new DelegateCommand<object>(obj => { MessageBox.Show(""); });

您需要提供ICommand 接口的实现或使用其他人的实现。 DelegateCommand<T> 类在 Prism 中可用：https://www.nuget.org/packages/Prism.Wpf/

有关命令以及如何使用 MVVM 设计模式处理事件的更多信息，请参阅以下博客文章：https://blog.magnusmontin.net/2013/06/30/handling-events-in-an-mvvm-wpf-application/

编辑：

如果命令是在视图模型中定义的，即ItemsControl本身的DataContext，你应该使用RelativeSource来绑定它：

<DataTemplate>
    <Image Source="{Binding}">
        <Image.InputBindings>
            <MouseBinding MouseAction="LeftDoubleClick"
                          Command="{Binding DataContext.MouseDoubleClickCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"/>
        </Image.InputBindings>
    </Image>
</DataTemplate>

【讨论】：

它不起作用。请查看原始帖子中的更新部分，看看我做了什么。
顺便说一下，我用的是棱镜。
查看我的编辑。您可能应该使用 RelativeSource 绑定到命令。

【解决方案2】：

有时处理OnMouseDownClickCount（或MouseLeftButtonDown）事件处理程序并检查MouseButtonEventArgs 参数的ClickCount 属性很有用。这种方法允许处理单击、双击、三次单击等 :)

private void OnMouseDownClickCount(object sender, MouseButtonEventArgs e)
{
    if (e.ClickCount == 2)
    {
        // Double Click occurred.
        ...
    }
}

但这种方法有一个“特点”。双击OnMouseDownClickCount 时，事件会上升两次：首先是e.ClickCount == 1，然后是e.ClickCount == 2。

【讨论】：

【解决方案3】：

如果您不想下载 prism，可以添加到 @mm8 答案，您可以创建一个 ICommand 类，如

namespace Lucid_Notes
{
  public class SimpleCommand : ICommand
  {
    public event EventHandler<object> Executed;

    public bool CanExecute(object parameter)
    {
        return true;
    }

    public void Execute(object parameter)
    {
        if (Executed != null)
            Executed(this, parameter);
    }
    public event EventHandler CanExecuteChanged;
  }
}

并将其用作命令：

<Image Source="sample-image.png">
  <Image.InputBindings>
    <MouseBinding MouseAction="LeftDoubleClick">
        <MouseBinding.Command>
            <local:SimpleCommand Executed="DoubleClickAction" />
      </MouseBinding.Command>
    </MouseBinding>
  </Image.InputBindings>
</Image>

这里，local 表示该类所在的命名空间 xmlns:local="clr-namespace:Lucid_Notes"。最后在对应的地方添加你要双击执行的功能

  private void DoubleClickAction(object sender, object e)
  {
        Console.WriteLine("test");
  }

来源：https://stackoverflow.com/a/38601721/9794570
示例：https://github.com/ayush1920/Stackoverflow/tree/main/sample-Image-Click

【讨论】：