MVVM Controls inside ListBox (ItemsControl) not firing

Scenario: you built an app using something that more or less closely resembles the MVVM approach that I described earlier, and you have a data control with a nested control that must execute some command. Here is how it might look:

//YourViewModel.cs:
private DelegateCommand yourCommand;

public YourPageConstructor()
{
  yourCommand = new DelegateCommand(this.YourMethod);
  ...
}

private void YourMethod(object obj)
{
  ...//do something here
}

public ICommand YourCommand { get { return yourCommand; } }

//yourPage.xaml.cs:
public yourPage()
{
  InitializeComponent();
  this.DataContext = new YourViewModel();
}

//yourPage.xaml:
<ListBox x:Name="yourDataControl" ...>
  <ListBox.ItemTemplate>
    <DataTemplate>
      <StackPanel>
        <Button Command="{Binding YourCommand}" Content="YourItems" ... />
      </StackPanel>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

You go to test your page, but your command is not firing. When you set a breakpoint at the "public ICommand YourCommand ..." line, you see that it is not being hit when the page loads. What's happening?

The thing is, your command should be a part of the collection that the ListBox is bound to for the ListBox to see (and execute it). Your command lives in your ViewModel, while the ListBox is bound to a collection. What to do? Bind your command in the following way:

//yourPage.xaml, add an x:Name attribute to the content of the opening PhoneApplicationPage tag:
<phone:PhoneApplicationPage
    x:Class="YourProjectName.Views.yourPage"
    x:Name="nameYourXAMLPageName"
    ...>

//and then change the Button's binding:
<ListBox x:Name="yourDataControl" ...>
  <ListBox.ItemTemplate>
    <DataTemplate>
      <StackPanel>
        <Button Command="{Binding ElementName=nameYourXAMLPageName, Path=DataContext.YourCommand}"
                   Content="{Binding YourItems}" ... />
     </StackPanel>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>
...

This way, we are not embedding the command into the collection bound to ListBox, but rather, let the ListBox know where to find the command by providing the "address" of the current page's DataContext.


As usual, leave your thoughts in comments.