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?

Mikko Viitala · Accepted Answer · 2015-01-29 21:23:12Z

5

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.

edited Jan 29, 2015 at 21:23

answered Jan 29, 2015 at 21:04

Mikko Viitala

8,4044 gold badges42 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related