Issue with handling MouseLeftButtonDown and MouseRightButtonDown events in LiveCharts CartesianChart in WPF

Question

I'm working on a WPF application using the LiveCharts library, specifically the CartesianChart control. I want to handle the MouseLeftButtonDown and MouseRightButtonDown events of the CartesianChart in my ViewModel, but I'm having trouble getting it to work.

I've added the event handlers in my ViewModel and bound them to the events in the XAML code like this:

<lvc:CartesianChart
    x:Name="LibSpeed"
    DockPanel.Dock="Top"
    Series="{Binding SeriesCollection}"
    XAxes="{Binding XAxes}"
    YAxes="{Binding YAxes}"
    MouseLeftButtonDown="ChartMouseLeftButtonDownCommand"
    MouseRightButtonDown="ChartMouseRightButtonDownCommand">
</lvc:CartesianChart>

And in my ViewModel:

        private ICommand chartMouseLeftButtonDownCommand;
        public ICommand ChartMouseLeftButtonDownCommand
        {
            get => chartMouseLeftButtonDownCommand ?? (chartMouseLeftButtonDownCommand = new CommandHandler((parameter) =>
            {
                if (parameter is MouseEventArgs args)
                {
                    var mousePosition = args.GetPosition(null);
                    var x = mousePosition.X;
                    var y = mousePosition.Y;

                    if (lutLibrary.XValuesReduced.Contains(x) && lutLibrary.YValuesReduced.Contains(y))
                    {
                        lutLibrary.YValuesReduced = lutLibrary.YValuesReduced.Where(val => val != y).ToArray();
                        lutLibrary.XValuesReduced = lutLibrary.XValuesReduced.Where(val => val != x).ToArray();
                    }
                }
            }, () =>
            {

                return true;
            }));
        }

        private ICommand chartMouseRightButtonDownCommand;
        public ICommand ChartMouseRightButtonDownCommand
        {
            get => chartMouseRightButtonDownCommand ?? (chartMouseRightButtonDownCommand = new CommandHandler((parameter) =>
            {
                if (parameter is MouseEventArgs args)
                {
                    var mousePosition = args.GetPosition(null);
                    var xValue = mousePosition.X; // Mausposition für den x-Wert
                    var yValue = mousePosition.Y; // Mausposition für den y-Wert

                    lutLibrary.YValuesReduced.Append(yValue);
                    lutLibrary.XValuesReduced.Append(xValue);

                    MainWindow_ViewModel.initPoints();

                }
            }, () =>
            {
                return true;
            

However, the event handlers are not recognized and I get an error message and the code does not run. Can anyone help me understand why the event handlers are not working as expected?

Thank you in advance for your assistance!

Answer 1

Event handlers need to match the delegates for the event.

In this case, your event handler methods would need to be in this form:

public void MouseButtonEventHandler(object sender, MouseButtonEventArgs e)

They would be in the code-behind for your view, not in your view model. Note that in your code above, that is where the program will expect to find them, as you have not used databinding for them.

https://learn.microsoft.com/en-us/dotnet/api/system.windows.input.mousebuttoneventhandler?view=windowsdesktop-7.0

You could define the event handlers in the code-behind for the view and invoke commands in the view model from there - which is a quick and easy approach that conforms to MVVM. Something like this:

public void ChartMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    ViewModel.ChartCommand.Execute();
}

You can set the handler in the xaml like this:

<lvc:CartesianChart
    x:Name="LibSpeed"
    DockPanel.Dock="Top"
    Series="{Binding SeriesCollection}"
    XAxes="{Binding XAxes}"
    YAxes="{Binding YAxes}"
    MouseLeftButtonDown="ChartMouseLeftButtonDown"
    ...
</lvc:CartesianChart>