Setting DataContext for binding RelayCommand in xaml

Question

In the following xaml code, I'm trying bind a RelayCommand ResourceButtonClick, which is in the view model. In addition to that, I want to pass the Resource.Id as a parameter to this command.

However, ResourceButtonClick is not called. I suspect that by setting the ItemsSource to Resources, I override the data context, which was view model.

<UserControl ...>
    <Grid>
        <ItemsControl ItemsSource="{Binding Resources}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Tag="{Binding Id}" Content="{Binding Content}"
                    Width="300" Height="50"
                    Command="{Binding ResourceButtonClick}"
                    CommandParameter="{Binding Id}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</UserControl>

Here's the RelayCommand in the view model.

public RelayCommand<int> ResourceButtonClick { get; private set; }

The constructor of the view model:

public ResourcesViewModel()
{
    this.ResourceButtonClick = 
        new RelayCommand<int>((e) => this.OnResourceButtonClick(e));
}

The method in the view model:

private void OnResourceButtonClick(int suggestionId)
{
...
}

I have two questions: First, how can I call the ResourceButtonClick command. Second, how can I pass Resource.Id as a parameter to that command.

Any suggestion will be appreciated.

Answer 1

Maybe you can show your complete ViewModel class? Assuming, that the ResourceButtonClick command is on the ViewModel which also holds the collection Resources, you're trying to access the command on the wrong object (on the item in Resources, instead of the ViewModel which holds the Resources collection and the command).

Therefore you would have to access the command on the 'other' DataContext, this is the DataContext of the ItemsControl not of it's item. The easiest way is to use the ElementName attribute of the binding:

<UserControl ...>
    <Grid>
        <ItemsControl ItemsSource="{Binding Resources}" Name="ResourcesItemsControl">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Tag="{Binding Id}" Content="{Binding Content}"
                    Width="300" Height="50"
                    Command="{Binding DataContext.ResourceButtonClick, ElementName=ResourcesItemsControl}"
                    CommandParameter="{Binding Id}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</UserControl>

Maybe this solves the problem, otherwise please let me know and provide some more detail.

I usually pass the whole item as a CommandParameter, not an ID. This doesn't cost anything and you don't have to translate the ID back to the item. But that depends on your case.

Hope this helps.

Answer 2

I resolved this in a such way: In View.xaml

1) I added a property SelectedItem for my ListView:

<ListView Name="MyList" ItemsSource="{Binding MyList}" SelectedItem="{Binding MySelectedItem, Mode=TwoWay}" >

2) I added a Command property to a button:

In viewModel: 3) I added a command handler:

MyCommand = new RelayCommand(MyMethod);

4) I added method MyMethod which takes value(s) from MySelectedItem property:

private void MyMethod ()
       {
            MyType mt = MySelectedItem;
            //now you have access to all properties of your item via mt object
        }