Binding custom events of custom elements in MVVM Pattern

Question

I'm trying to bind the "DataClick" event of LiveChart's Cartesian Chart element using MVVM pattern.

I have my Charts.xml like this:

<ContentControl Grid.Row="0">
        <lvc:CartesianChart x:Name="ContrastChart" Series="{Binding ContrastSeriesCollection}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="DataClick">
                    <i:InvokeCommandAction Command="{Binding ChartDataClick}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </lvc:CartesianChart>
    </ContentControl>

This is my ICommand ChartDataClick on my ViewModel:

        public ICommand ChartDataClick {
        get
        {
            if(_dataClickCommand == null)
            {
                _dataClickCommand = new DelegateCommand( 
                    () => 
                    {
                        MessageBox.Show("Data Clicked!");
                    } 
                    );
            }

            return _dataClickCommand;
        }
    }

If I switch e.g "DataClick" for "MouseEnter" I get my command fired.

So I'm assuming that the problem is that the DataClick is a custom event.

Anybody knows a workaround for this? I really tried everything I could find on Google that could help, but nothing so far...

LiveCharts Events: Events Documentation

this is finally supported... https://github.com/beto-rodriguez/Live-Charts/issues/42 — bto.rdz, Jan 12 '17 at 22:40

score 3 · Answer 1 · answered Oct 11 '16 at 16:19

The EventTrigger doesn't discriminate.

We can check this by implementing MyButtonSimple which has a custom Routed Event Tap.

We can go from handler in code behind

<custom:MyButtonSimple 
    x:Name="mybtnsimple" Tap="mybtnsimple_Tap"
    Content="Click to see Tap custom event work">
</custom:MyButtonSimple>

To a ViewModel ICommand

<custom:MyButtonSimple 
    x:Name="mybtnsimple"  
    Content="Click to see Tap custom event work">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Tap">
            <i:InvokeCommandAction Command="{Binding Command}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</custom:MyButtonSimple>

And everything works as expected

The shortcoming of these triggers is that they have to be placed on the UIElement raising the event. In other words, they ignore Bubbling or Tunneling events. That's why there is no Interaction.Triggers alternative for:

<Grid custom:MyButtonSimple.Tap="mybtnsimple_Tap">
    <custom:MyButtonSimple 
        x:Name="mybtnsimple"  
        Content="Click to see Tap custom event work">
    </custom:MyButtonSimple>
</Grid>

To sum it up, the DataClick event isn't raised on the CartesianChart (but further down the Logical Tree) and therefore you can't handle it this way.

So I won't be able to handle this event the way is coded right now? Or you think is possible with a helper or something? If I change the code of LiveCharts to produce a routed 'DataClick' event would make a difference? — Renato Parreira, Oct 11 '16 at 16:30

Binding custom events of custom elements in MVVM Pattern

1 Answers1