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

Question

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

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>

视图模型：

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!");
}

- tesicg

Answer 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接口的代码或使用其他人的已经实现的代码。在Prism中，可以使用DelegateCommand<T>类：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>

- mm8

---

它不起作用。请查看原帖中的更新部分，看看我做了什么。 - tesicg

顺便说一下，我使用的是Prism。 - tesicg

看我的编辑。你应该使用RelativeSource来绑定命令。 - mm8

Answer 2

有时候处理 OnMouseDownClickCount (或者 MouseLeftButtonDown) 事件处理程序，并检查 MouseButtonEventArgs 参数的 ClickCount 属性是很有用的。这种做法可以处理单击、双击、三击等等 :)

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

然而，这种方法有一个“特性”。当双击OnMouseDownClickCount事件时，e.ClickCount值将先增加到1，然后再增加到2。

- Ihor Konovalenko

Answer 3

如果您不想下载prism，可以创建一个ICommand类，如@mm8的答案所述。

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://dev59.com/nmYr5IYBdhLWcg3wOX66#38601721
示例: https://github.com/ayush1920/Stackoverflow/tree/main/sample-Image-Click

- Ayush Kumar