How to handle both `MouseLeftButtonUp`and `MouseDoubleClick` mouse events?

Question

I'd like to handle both MouseLeftButtonUp and MouseDoubleClick events on Image . I used galasoft mvvm light library for EventToCommand . But, MouseDoubleClick is not called. Actually, it is called, but very rare. Why does this happen and how to fix it?

<ContentControl>
    <Image Source = "{Binding Img}" Stretch="Fill" />

    <i:Interaction.Triggers>
        <i:EventTrigger EventName = "MouseLeftButtonUp" >
            < cmd:EventToCommand Command = "{Binding MouseUpCommand}" PassEventArgsToCommand="True" />
        </i:EventTrigger>
        <i:EventTrigger EventName = "MouseDoubleClick" >
            < cmd:EventToCommand Command = "{Binding DoubleClickCommand}" PassEventArgsToCommand="True" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</ContentControl>



private ICommand _doubleClickCommand;
public ICommand DoubleClickCommand
{
    get
    {
        if (_doubleClickCommand== null)
        {
            _doubleClickCommand=new RelayCommand<MouseEventArgs>(DoubleClikcFunc);
        }

        return _doubleClickCommand;
    }
}

private ICommand _mouseUpCommand;
public ICommand MouseUpCommand
{
    get
    {
        if (_mouseUpCommand== null)
        {
            _mouseUpCommand= new RelayCommand<MouseEventArgs>(MouseUpFunc);
        }

        return _mouseUpCommand;
    }
}

private void MouseUpFunc(MouseEventArgs e)
{
    Points.Add(e.GetPosition((IInputElement)e.Source));
}

private void DoubleClikcFunc(MouseEventArgs e)
{
    Points.Add(MaskPoints[0]);
}

Answer 1

The second click of a double-click is by definition always preceded by a single click so you would better handle the MouseLeftButtonDown event alone and check the ClickCount property of the EventArgs to determine whether there was a double click:

<i:Interaction.Triggers>
    <i:EventTrigger EventName="MouseLeftButtonDown" >
        <cmd:EventToCommand Command = "{Binding MouseUpCommand}" PassEventArgsToCommand="True" />
    </i:EventTrigger>
</i:Interaction.Triggers>

---

private ICommand _mouseUpCommand;
public ICommand MouseUpCommand
{
    get
    {
        if (_mouseUpCommand == null)
        {
            _mouseUpCommand = new RelayCommand<MouseButtonEventArgs>(MouseUpFunc);
        }

        return _mouseUpCommand;
    }
}

private void MouseUpFunc(MouseButtonEventArgs e)
{
    if (e.ClickCount == 2)
        Debug.Write("double");
    else
        Debug.Write("single");
}

If you don't want to handle the preceding single click you could use a timer to wait for like 200 ms to see if there is another click before you actually handle the event as I suggested here:

How do we separate click and double click on listview in WPF application?

Answer 2

You have to put the triggers between the Image Tags. Now you bound the click events to the UserControl.

Here is a example with the normal WPF InputBindings:

        <Image Source = "{Binding Img}" Stretch="Fill">
            <Image.InputBindings>
                <MouseBinding MouseAction="LeftDoubleClick" Command="{Binding DoubleClickCommand}" />
                <MouseBinding MouseAction="LeftClick" Command="{Binding MouseUpCommand}" />
            </Image.InputBindings>
        </Image>