How to bind buttons in ListView DataTemplate to Commands in ViewModel? (MVVMLight)

Question

I have a list view with following code:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ListBox x:Name="allToDoItemsListBox" 
             ItemsSource="{Binding AllToDoItems,Mode=OneWay}" 
             Margin="12,0,12,0" 
             Width="440" 
             ItemTemplate="{StaticResource ToDoListBoxItemTemplate}" />
</Grid>

The datatemplate is as follows :

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="ToDoListBoxItemTemplate">

        <Grid HorizontalAlignment="Stretch" Width="420">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="100" />
            </Grid.ColumnDefinitions>

            <CheckBox 
                IsChecked="{Binding IsComplete, Mode=TwoWay}" 
                Grid.Column="0" VerticalAlignment="Top"/>

            <TextBlock 
                Text="{Binding ItemName}" 
                FontSize="{StaticResource PhoneFontSizeLarge}" 
                Foreground="Gray"
                Grid.Column="1" Grid.ColumnSpan="2" 
                VerticalAlignment="Top" Margin="-36, 12, 0, 0"/>

            <Button                                
                Grid.Column="3"
                x:Name="deleteTaskButton"
                BorderThickness="0"                                                                  
                Margin="0, -18, 0, 0"
                Command="{Binding Path=DeleteCommand}" CommandParameter="{Binding}"/>

            <Image 
                Source="/Images/appbar.delete.rest.png"
                Height="75"
                Width="75"/>
        </Grid>
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

I tried to bind the Button Command "DeleteCommand" to a ICommand in ViewModel but it failed what should i do?

The Code in ViewModel is :

 public ICommand DeleteCommand { get; private set; }

In the ViewModel Construct :

 DeleteCommand = new RelayCommand<object>(Delete);

And The delete method :

private void Delete(object obj)
{
    ToDoItem newToDoItem = obj as ToDoItem;
    DeleteToDoItem(newToDoItem);
}

I need to pass the item to DeleteToDoItem() method as parameter when the corresponding delete button of each item in the list is pressed but the command does not fire here what should i do?

Answer 1

In your ViewModel you want to pass a ToDoItem to your Delete command.

DeleteCommand = new RelayCommand<ToDoItem>(DeleteToDoItem);

And your DataTemplate's DataContext is different from the ListView's.

<Button Command="{Binding ElementName=allToDoItemsListBox, 
                          Path=DataContext.DeleteCommand}" 
        CommandParameter="{Binding}" />

That should do it.