Visual Studio Code – WPF CommandBindings, ViewModel and UserControl

To handle global input events, you must use RoutedCommand definitions and then handle them at the visual root e.g., the MainWindow.
Using routed commands allows you to decouple the different scopes (data contexts) so that each data context don’t

• has to define a duplicated ICommand property and logic
• has to know a particular scope/data context (that is not their own) only to bind to the ICommand.

Using a routed command in this scenario allows to execute the actual view model command from a single place amd within the correct data context.

If commands should have a smaller scope, then define the command bindings on an appropriate common parent of the controls that must share a command action. Every UIElement can define CommandBinding objects and therefore act as a routed command scope.

MainWindow.cs

partial class MainWindow : Window
{
  public static RoutedCommand SaveCommand { get; }
  private MainViewModel MainViewModel { get; }

  static MainWindow()
  {
    MainWindow.SaveCommand = new RoutedCommand(nameof(MainWindow.SaveCommand), typeof(MainWindow));
    var saveCommandGesture = new KeyGesture(Key.S, ModifierKeys.Control);
    _ = MainWindow.SaveCommand.InputGestures.Add(commandGestures);
  }

  public MainWindow()
  {
    InitializeComponent();

    this.MainViewModel = new MainViewModel();
    this.DataContext = this.MainViewModel;

    // Handle all executions of the routed SaveCommand, 
    // where the source is a child of MainWindow
    var saveCommandBinding = new CommandBinding(
      MainWindow.SaveCommand,
      ExecutedSaveCommand,
      CanExecuteSaveCommand);
    this.CommandBindings.Add(saveCommandBinding);
  }

  // Handle the routed command execution and delegate the action 
  // to the MainViewModel (or the DataContext of MainWindow in general)
  private void ExecutedSaveCommand(object sender, ExecutedRoutedEventArgs e)
    => this.MainViewModel.SaveDataCommand.Execute(e.Parameter);


  // Handle the routed command execution and delegate the action 
  // to the MainViewModel (or the DataContext of MainWindow in general)
  private void CanExecuteSaveCommand(object sender, CanExecuteRoutedEventArgs e)
    => e.CanExecute = this.MainViewModel.SaveDataCommand.CanExecute(e.Parameter);
}

HomeToolbar.xaml

<UserControl>
  <Button Content="Save data"
          Command="{x:Static MainWindow.SaveCommand}" />
</UserControl>

HomeToolbarViewModel.cs

class HomeToolbarViewModel : INotifyPropertyChanged
{
  public ICommand SaveDataCommand { get; }
}

This is an alternative version where the MainWindow is allowed to handle the view model command anonymously, without an explicit reference to the view model i.e. without explicit knowledge of the actual view model type and ICommand identity (commands property name or member path).
It’s an improved example, but requires to increase the complexity a tiny bit (nothing is for free).

This decoupling is achieved by introducing a dependency property for each routed command. This property can then be bound to the view model’s ICommand implementation (the same way a Button.Command property is bound).
This version successfully eliminates the requirement that the MainWindow has to explicitly reference its data context (although this ain’t something bad in general, we just strive to decouple as much as possible. Therefore, avoiding this explicit dependency is favorable).

MainWindow.cs

partial class MainWindow : Window
{
  public ICommand SaveCommand
  {
    get => (ICommand)GetValue(SaveCommandProperty);
    set => SetValue(SaveCommandProperty, value);
  }

  public static readonly DependencyProperty SaveCommandProperty = DependencyProperty.Register(
    "SaveCommand", 
    typeof(ICommand), 
    typeof(MainWindow), 
    new PropertyMetadata(default));

  public static RoutedCommand SaveCommand { get; }

  static MainWindow()
  {
    MainWindow.SaveCommand = new RoutedCommand(nameof(MainWindow.SaveCommand), typeof(MainWindow));
    var saveCommandGesture = new KeyGesture(Key.S, ModifierKeys.Control);
    _ = MainWindow.SaveCommand.InputGestures.Add(commandGestures);
  }

  public MainWindow()
  {
    InitializeComponent();

    this.DataContext = new MainViewModel();

    // Handle all executions of the routed SaveCommand, 
    // where the source is a child of MainWindow
    var saveCommandBinding = new CommandBinding(
      MainWindow.SaveCommand,
      ExecutedSaveCommand,
      CanExecuteSaveCommand);
    this.CommandBindings.Add(saveCommandBinding);
  }

  // Handle the routed command execution and delegate the action 
  // to the MainViewModel (or the ICommand bound to 
  // the dedicated command properties in general)
  private void ExecutedSaveCommand(object sender, ExecutedRoutedEventArgs e)
    => this.SaveDataCommand?.Execute(e.Parameter);


  // Handle the routed command execution and delegate the action 
  // to the MainViewModel (or the ICommand bound to 
  // the dedicated command properties in general)
  private void CanExecuteSaveCommand(object sender, CanExecuteRoutedEventArgs e)
    => e.CanExecute = this.SaveCommand?.CanExecute(e.Parameter) ?? false;
}

MainWindow.xaml

<Window>
  <Window.Resources>
    <Style TargetType="MainWindow">

      <!-- 
        Bind the command properties to the ICommand implementations 
        of the view model 
      -->
      <Setter Property="SaveCommand"
              Value="{Binding SaveDataCommand}" />
    </Style>
  </Window.Resources>
</Window>

The rest, how the routed command is invoked, is exactly the same as in the previous example.