WPF: Mouse double click on Image using interaction

Question

I'm trying to use interaction features to achieve mouse double click on standard Image control. The Image control is on UserControl and method that should handle mouse double click is on view model. The code is as following:

1) UserControl:

<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) View model:

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

But, it doesn't work.

UPDATE:

I did this, but it doesn't work:

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) View model:

public DelegateCommand MouseDoubleClickCommand { get; private set; }

In constructor:

MouseDoubleClickCommand = new DelegateCommand(DblClick);

And added method:

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

mm8 · Accepted Answer · 2017-02-23T08:23:43.720

The Image class has no MouseDoubleClick event but you could use an InputBinding that binds to an ICommand property:

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

You will need to provide an implementation of the ICommand interface or use someone else's. The DelegateCommand<T> class is available in Prism: https://www.nuget.org/packages/Prism.Wpf/

Please refer to the following blog post for more information about commands and how to handle events using the MVVM design pattern: https://blog.magnusmontin.net/2013/06/30/handling-events-in-an-mvvm-wpf-application/

Edit:

If the command is defined in the view model, i.e. the DataContext of the ItemsControl itself, you should use a RelativeSource to be able to bind to it:

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

It doesn't work. Please, take a look at update section in original post to see what I did. — tesicg, Feb 23 '17 at 07:27
See my edit. You should probably use a RelativeSource to bind to the command. — mm8, Feb 23 '17 at 08:24

score 7 · Answer 2 · answered Jul 05 '20 at 11:21

Sometimes it is useful to handle OnMouseDownClickCount (or MouseLeftButtonDown) event handler and check ClickCount property of MouseButtonEventArgs argument. This approach allows to handle single-, double-, triple-clicks etc :)

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

But this approach has one "feature". While double-clicking OnMouseDownClickCount event rises two times: first with e.ClickCount == 1 and then with e.ClickCount == 2.

score 0 · Answer 3 · answered Dec 06 '21 at 12:40

Adding on to @mm8 answers if you don't want to download prism, you can create a ICommand class like

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;
  }
}

And use it as a Command:

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

Here, local representing the namespace where the class is present xmlns:local="clr-namespace:Lucid_Notes". Finally add the function you want to execute on double click in the corresponding

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

Source: https://stackoverflow.com/a/38601721/9794570
Example: https://github.com/ayush1920/Stackoverflow/tree/main/sample-Image-Click

WPF: Mouse double click on Image using interaction

3 Answers3