Question

I have ViewModel, Which has a ObservableCollection[Employee] EmpCol , now that ViewModel is bind with my View and and EmpCol is set as with ItemSource of custom control. That custom control generates stackpanels with grids , if there are 4 objects in EmpCol then there will be 4 stackpanels with Grids inside them. Now in those grids, I have a column of Buttons.
Now my problem is I can’t bind Command of that Button in datagrid to RelayCommand in Employee class.

I am using MVVM light toolkit, and I found a way around which actually kind of give full path to binding command like this

<Button x:Name="myButton"  Width="20" Height="15" HorizontalAlignment="Center"   VerticalAlignment="Center" Margin="5" >   
<i:Interaction.Triggers>
 <i:EventTrigger EventName="Click"> 
<cmd:EventToCommand Command="{Binding Source={StaticResource VMLocator}, Path=MyVM.Employee.MyButtonCommand}" PassEventArgsToCommand="False"/>  </i:EventTrigger>
</i:Interaction.Triggers>
</Button>

Now this above approach works , but in my case I dont have Employee , but collection of Employee, so when I give binding path like this
Path=MyVM.EmpCol.MyButtonCommand

It does’t work. I have searched a lot , but could’t find any solution.
So any help will be much appreciated to solve my problem.

Thanks,
Maverick

The command binding happens inside a row of a DataGrid.

Answer 1

The tsolution depends on the structure of your view, if you have a master detail view you should create a sub-structure that expects an employee ViewModel as a DataContext and bind that to the currently selected employee. With that you get the correct ViewModel for your view.

If you navigate to a new page the easiest approach might be to to pass the View the id of the employee you want to show and then in code behind call a method on you view model – which you can get from the DataContext propery – to load the correct employee from the database or service.

Alternatively, you can hold the current employee in a application wide acessible variable. E.g. a static variable on your application class, a singleton or static class stored in you resources, or on your ViewLocator (in all cases you may have to provide an empty employee ViewModel when no employee is selected or prevent the opening of the View).

Edit:

If a collection of ViewModels is bound to a DataGrid and binding of the command is a problem, this might be a possible solution:

Put the command on a ViewModel that contains the Collection (i.e.the propety that is bound to the ItemsSource of the DataGrid). Then implement the command on this high level ViewModel. You now can use a RelativeSurce binding to access this higher level ViewModel via the DataGrid’s parent DataContext property. In your button you can now bind the command and pass the current row’s DataContext as the command parameter – the command obviously has to expect this parameter.

Edit 2:

Forgot Silverlight does not support all RelativeSource modes, however, it supports binding to a named element, so the following should work …

Assumptions:

1. The higher level ViewModel is called “EmployeeListViewModel”
2. It has a property called Employees containing the list of EmployeeViewModels
3. The DataContext of the element containing the DataGrid is set to EmployeeListViewModel

Code:

<DataGrid x:Name="dgEmployees" ItemsSource="{Binding Empoyees}" ...>
    ...
        <Button x:Name="myButton"  Width="20" Height="15" HorizontalAlignment="Center" 
                VerticalAlignment="Center" Margin="5" >   
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click"> 
                    <cmd:EventToCommand 
                        Command="{Binding ElementName=dgEmployees, Path=DataContext.MyButtonCommand}" 
                        CommandParameter="{Binding}" 
                        PassEventArgsToCommand="False"/>
            </i:Interaction.Triggers>
        </Button>
    ...
</DataGrid>