WPF ItemsControl Button command binding not working

Question

I have an ItemsControl control that has an ObservableCollection as its ItemsSource. It also has a button located inside of its DataTemplate. The button's Command property is bound to a RelayCommand in the ViewModel (I'm using MVVM Light) and the CommandParameter is bound to the corresponding item in the ItemsSource.
The problem is that the command never fires, for some reason. Code-behind works fine, on the other hand. When debugging the mouse click event handler I can see that the sender (of type Button) has a CommandParameter filled with the correct data whereas Command is null.

What did I miss here?

XAML:

<ItemsControl ItemsSource="{Binding Users}"
              Margin="{StaticResource ContentMargin}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button Margin="{StaticResource ImageButtonMargin}"
                    Style="{StaticResource ImageButtonStyle}"
                    Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}, Path=DataContext.UserSelectedCommand}"
                    CommandParameter="{Binding}">
                    <!--...-->

ViewModel:

private ObservableCollection<User> _users;
private RelayCommand<User> _userSelectedCommand;

public ObservableCollection<User> Users
{
    get { return _users; }
    set
    {
        _users = value;
        RaisePropertyChanged();
    }
}

public RelayCommand<User> UserSelectedCommand
{
    get { return _userSelectedCommand; }
}

protected override sealed void SetCommands() // called in the constructor which is in turned called by SimpleIoc
{
     userSelectedCommand = new RelayCommand<User>((user) => UserSeriesSelected(user));
}

private void UserSelected(User selectedUser)
{

}

loopedcode loopedcode · Accepted Answer · 2015-09-12T19:18:52

Use named Element binding as binding source inside your data template to access commands from root data context. You can use root grid or other containers as named element. ItemsControl iteself can be used too.

<ItemsControl x:Name="MyItems" ItemsSource="{Binding Users}"
              Margin="{StaticResource ContentMargin}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button Margin="{StaticResource ImageButtonMargin}"
                    Style="{StaticResource ImageButtonStyle}"
                    Command="{Binding ElementName=MyItems,  Path=DataContext.UserSelectedCommand}"
                    CommandParameter="{Binding}">
                    <!--...-->

WPF ItemsControl Button command binding not working

3 Answers