MVVM Call Command from CommandBinding

Question

I wanted to bind a CommandBinding to a ViewModel ICommand, this way, when the user hits Delete I can trigger my ViewModel's delete logic.

The only way I know how to do it is in code behind, with this:

    <UserControl.CommandBindings>
            <CommandBinding Command="ApplicationCommands.Delete" Executed="OnDeleteCommand" />
    </UserControl.CommandBindings>

Any MVVM ways of achieving the same?

Answer 1

Here is an example for the delete logic :

<Window x:Class="DeleteCommandStack.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <DataGrid ItemsSource="{Binding items}" AutoGenerateColumns="False" CanUserAddRows="False">
        <DataGrid.Columns>
            <DataGridTemplateColumn>
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Name}"/>
                            <Button Content="Delete" 
                                    Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}, Path=DataContext.deleteCommand}" 
                                    CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, Path=SelectedItem}"/>
                        </StackPanel>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
    </DataGrid>
</Grid>

One note here:

• The delete Button has to reach the DataContext of the ViewModel, so that syntax let us go the DataContext of the Window which in fact is exactly what we want.

  • For the CommandParameter we need the SelectedItem of the DataGrid so, using RelativeSource we are able to accomplish this.

ViewModel:

public class ViewModel
{
    public ObservableCollection<Model> items { get; set; }

    public ICommand deleteCommand { get; set; }

    public ViewModel()
    {
        items = new ObservableCollection<Model>();
        items.Add(new Model() { Name = "Name1" });
        items.Add(new Model() { Name = "Name2" });
        items.Add(new Model() { Name = "Name3" });
        items.Add(new Model() { Name = "Name4" });

        deleteCommand = new DeleteCommand(this);
    }

    public void DeleteHandler(object parameter)
    {
        items.Remove(parameter as Model);
    }
}

Model:

public class Model : INotifyPropertyChanged
{
    private string _Name;

    public string Name
    {
        get { return _Name; }
        set
        {
            _Name = value;
            PropertyChanged(this, new PropertyChangedEventArgs("Name"));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged = delegate { };
}

Delete command:

public class DeleteCommand : ICommand
{
    private ViewModel _vm;
    public DeleteCommand(ViewModel vm)
    {
        _vm = vm;
    }

    public bool CanExecute(object parameter)
    {
        return true;
    }

    public event EventHandler CanExecuteChanged;

    public void Execute(object parameter)
    {
        _vm.DeleteHandler(parameter);
    }
}

And the codebehind to set the DataContext:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = new ViewModel();
    }
}

By sending the ViewModel reference to DeleteCommand we are able to call and send parameters to their methods.

We can choose to delete the item directly from the command:

public void Execute(object parameter)
{
   _vm.items.Remove(parameter as Model);
}

I think that's about it, you have a working example now.