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

Question

我正在尝试使用交互功能在标准图像控件上实现鼠标双击。 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!");
}

Answer 1

图像 class 没有 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> class 在 Prism 中可用：https://www.nuget.org/packages/Prism.Wpf/

有关命令以及如何使用 MVVM 设计模式处理事件的更多信息，请参阅以下博客post：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>

Answer 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。

Answer 3

如果您不想下载 Prism，添加到 @mm8 答案中，您可以创建一个 ICommand class，例如

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 表示 class 所在的命名空间 xmlns:local="clr-namespace:Lucid_Notes"。最后在对应的

中添加你想双击执行的函数

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

来源：
Example: https://github.com/ayush1920/Whosebug/tree/main/sample-Image-Click

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

WPF: Mouse double click on Image using interaction

wpf

double-click