Handle MouseLeftButtonDown event for Image in DataGridTemplateColumn

Question

In my DataGrid i have a column that contains an Image created like this:

            <DataGridTemplateColumn x:Name="imgView" Width="Auto">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Image Source="/MyApplication;component/Resources/View.png" />
                    </DataTemplate>                        
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>

To handle events from my View in my View Model i am using the namespace:

xmlns:intr="http://schemas.microsoft.com/expression/2010/interactivity"

On a normal Image i can handle the event like this:

    <Image Source="/MyApplication;component/Resources/View.png" HorizontalAlignment="Left" Width="150">
        <intr:Interaction.Triggers>
            <intr:EventTrigger EventName="MouseLeftButtonDown">
                <intr:InvokeCommandAction Command="{Binding ViewImageMouseDownCommand}"/>
            </intr:EventTrigger>
        </intr:Interaction.Triggers>
    </Image>

And it works just fine, yet when i add the same code to my Image in the DataGridTemplateColumn like this:

            <DataGridTemplateColumn x:Name="imgViewCompany" Width="Auto">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Image Source="/MyApplication;component/Resources/View.png">
                            <intr:Interaction.Triggers>
                                <intr:EventTrigger EventName="MouseLeftButtonDown">
                                    <intr:InvokeCommandAction Command="{Binding ViewImageMouseDownCommand}"/>
                                </intr:EventTrigger>
                            </intr:Interaction.Triggers>
                        </Image>
                    </DataTemplate>                        
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>

It doesn't seem to work.

I have also tried a method i found here : https://www.codeproject.com/Tips/478643/Mouse-Event-Commands-for-MVVM

Which also didn't work on the Image in the DataGridTemplateColumn

My ViewModel :

class vmCompaniesList: vmBase, INotifyPropertyChanged
{
    public DataView CompaniesListView { get; private set; }
    private vwCompanyListDataTable CompaniesList { get; set; }

    public RelayCommand<Image> ViewImageMouseDownCommand { get; private set; }

    public vmCompaniesList()
    {
        ViewImageMouseDownCommand = new RelayCommand<Image>(ViewImageMouseDown);
        using (vwCompanyListTableAdapter taCompanies = new vwCompanyListTableAdapter())
        {
            CompaniesList = taCompanies.GetData();
            CompaniesListView = CompaniesList.DefaultView;
        }
    }

    private void ViewImageMouseDown(object parameter)
    {
        MessageBox.Show("Click", "", MessageBoxButton.OK, MessageBoxImage.Exclamation);
    }
}

So i am wondering how i can handle the event?

EDIT: So i have tried, according to the possible duplicate post, to add my Image to a Button and subscribing to the click but still no joy, i am wondering if it is to do with it being inside the DataGridTemplateColumn

This is what i tried :

            <DataGridTemplateColumn x:Name="imgViewCompany" Width="Auto">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Button Command="{Binding ViewImageMouseDownCommand}">
                            <Image Source="/MyApplication;component/Resources/View.png" />
                        </Button>
                    </DataTemplate>                        
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>

And:

            <DataGridTemplateColumn x:Name="imgViewCompany" Width="Auto">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Button Command="{Binding ViewImageMouseDownCommand}">
                            <intr:Interaction.Triggers>
                                <intr:EventTrigger EventName="Click">
                                    <intr:InvokeCommandAction Command="{Binding ViewImageMouseDownCommand}"/>
                                </intr:EventTrigger>
                            </intr:Interaction.Triggers>
                            <Image Source="/MyApplication;component/Resources/View.png" />
                        </Button>                                    
                    </DataTemplate>                        
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>

EDIT 2: Thanks to ASh this is what got it working:

            <DataGridTemplateColumn x:Name="imgViewCompany" Width="Auto">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Image Source="/AlphaCureCRM(WPF);component/Resources/View.png">                                
                        <intr:Interaction.Triggers>
                                <intr:EventTrigger EventName="MouseLeftButtonDown">
                                    <intr:InvokeCommandAction Command="{Binding Path=DataContext.ViewImageMouseDownCommand, 
                                                                        RelativeSource={RelativeSource AncestorType=DataGrid}}"/>
                                </intr:EventTrigger>
                            </intr:Interaction.Triggers>
                        </Image>
                    </DataTemplate>                        
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>

Possible duplicate of [WPF Image Command Binding](https://stackoverflow.com/questions/3885007/wpf-image-command-binding) — ASh, Jul 31 '18 at 18:04
I read that question and didn't think it answered my problem, but now however i am thinking if i can put my image on a button inside the `DataGridTemplateColumn` then maybe that would work. I will try. — Pete, Jul 31 '18 at 18:07

score 0 · Accepted Answer · answered Jul 31 '18 at 18:13

MouseBinding should reduce markup required to bind command to click event. However the issue is probably incorrect command binding. ViewImageMouseDownCommand is not in the DataGridRow DataContext (single element of DataView, DataRowView). Try bind to DataGrid DataContext:

Command="{Binding Path=DataContext.ViewImageMouseDownCommand, 
                  RelativeSource={RelativeSource AncestorType=DataGrid}}"

Handle MouseLeftButtonDown event for Image in DataGridTemplateColumn

1 Answers1