Search code examples
c#wpfdatagridtemplatecolumn

Handle MouseLeftButtonDown event for Image in DataGridTemplateColumn


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>

Solution

  • 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}}"