Sinking RoutedCommands to ViewModel Commands in WPF

• Download CommandSink.zip - 1.1 MB 

Introduction

I found myself searching for a solution to using the RoutedCommand and sinking it to a ViewModel's command. I found Josh Smith's solution, but I found it hard to read when the Xaml was done. I wanted something that read nicer.

Why don't I just always used view model commands? Well, sometimes I cannot get around it. When my products use Third Party Controls, they typically implement the standard RoutedUICommands, like those in the System.Windows.Input namespace, such as ApplicationsCommands, MediaCommands, and NavigationCommands. I want to use my controls that I bought, but I also want to stick with my MVVM design. 

Solution 

My solution entails adding an invisible UserControl called CommandSinkControl. That control associates RoutedCommands with view model ICommands. Then in your normal CommandBindings, you forward the event call to the CommandSinkControl's public methods DoExecuted and DoCanExecute to handle the event. 

The Code  

There is just one control that you have to add to your code base, CommandSinkControl.  

CommandSinkControl.xaml 

<UserControl x:Class="CommandSink.CommandSinkControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Visibility="Collapsed">
</UserControl> 

CommandSinkControl.xaml.cs 

using System.Collections;
using System.Collections.ObjectModel;
using System.Collections.Specialized;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Markup;

namespace CommandSink {
    [ContentProperty("CommandSinkBindings")]
    public partial class CommandSinkControl : UserControl {
        private static readonly DependencyPropertyKey SinksPropertyKey =
            DependencyProperty.RegisterReadOnly("CommandSinkBindings",
                                                typeof(CommandSinkBindingCollection),
                                                typeof(CommandSinkControl),
                                                null);

        public static readonly DependencyProperty SinksProperty =
            SinksPropertyKey.DependencyProperty;

        public CommandSinkBindingCollection CommandSinkBindings {
            get { return (CommandSinkBindingCollection)this.GetValue(SinksProperty); }
            private set { this.SetValue(SinksPropertyKey, value); }
        }

        public CommandSinkControl() {
            this.InitializeComponent();
            this.CommandSinkBindings = new CommandSinkBindingCollection();
            this.CommandSinkBindings.CollectionChanged += this.Sinks_OnCollectionChanged;
        }

        protected override IEnumerator LogicalChildren {
            get {
                if (this.CommandSinkBindings == null) {
                    yield break;
                }
                foreach (var sink in this.CommandSinkBindings) {
                    yield return sink;
                }
            }
        }

        private void Sinks_OnCollectionChanged(object sender,
                                               NotifyCollectionChangedEventArgs e) {
            switch (e.Action) {
                case NotifyCollectionChangedAction.Add:
                    foreach (var sink in e.NewItems) {
                        this.AddLogicalChild(sink);
                    }
                    break;
            }
        }

        public void DoCanExecute(object sender, CanExecuteRoutedEventArgs e) {
            var commandSinkBinding = this.CommandSinkBindings
                                         .FirstOrDefault(csb => csb.Faucet == e.Command);
            if (commandSinkBinding != null && commandSinkBinding.Drain != null) {
                e.Handled = true;
                e.CanExecute = commandSinkBinding.Drain.CanExecute(e.Parameter);
            }
        }

        public void DoExecuted(object sender, ExecutedRoutedEventArgs e) {
            var commandSinkBinding = this.CommandSinkBindings
                                         .FirstOrDefault(csb => csb.Faucet == e.Command);
            if (commandSinkBinding != null && commandSinkBinding.Drain != null) {
                e.Handled = true;
                commandSinkBinding.Drain.Execute(e.Parameter);
            }
        }
    }

    public sealed class CommandSinkBindingCollection
        : ObservableCollection<CommandSinkBinding> {
    }

    public class CommandSinkBinding : FrameworkElement {
        public static readonly DependencyProperty FaucetProperty =
            DependencyProperty.RegisterAttached("Faucet",
                                                typeof(RoutedCommand),
                                                typeof(CommandSinkBinding));

        public RoutedCommand Faucet {
            get { return (RoutedCommand) this.GetValue(FaucetProperty); }
            set { this.SetValue(FaucetProperty, value); }
        }

        public static readonly DependencyProperty DrainProperty =
            DependencyProperty.RegisterAttached("Drain",
                                                typeof(ICommand),
                                                typeof(CommandSinkBinding));

        public ICommand Drain {
            get { return (ICommand) this.GetValue(DrainProperty); }
            set { this.SetValue(DrainProperty, value); }
        }
    }
} 

Implementation 

In the following example, I have hooked up the CommandSinkControl such that it sinks the ApplicationCommands.Open RoutedCommand to the OpenCommand that I've defined in my View Model. 

MainWindow.xaml

<Window x:Class="CommandSink.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:CommandSink"
        Title="CommandSink" SizeToContent="WidthAndHeight" ResizeMode="NoResize">
    
    <!-- Normal Command Bindings to RoutedCommands -->
    <Window.CommandBindings>
        <CommandBinding Command="ApplicationCommands.Open"
                        Executed="CommandBinding_OnExecuted"
                        CanExecute="CommandBinding_OnCanExecute"/>
    </Window.CommandBindings>

    <Window.InputBindings>
        <!-- Example KeyBinding with Command Binding to a Routed Command -->
        <KeyBinding Gesture="CTRL+O" Command="ApplicationCommands.Open"/>
    </Window.InputBindings>

    <StackPanel>
        <!-- Make sure this is at the top so that CanExecute events can use CommandSinkControl.
             It defaults to hidden, so you don't have to hide it.-->
        <local:CommandSinkControl x:Name="CommandSinkControl">
            <!-- Sinks the ApplicationCommands.Open RoutedUICommand to the OpenCommand -->
            <local:CommandSinkBinding Faucet="ApplicationCommands.Open"
                                      Drain="{Binding OpenCommand}"/>
        </local:CommandSinkControl>

        <CheckBox Margin="10"
                  Content="Toggles the Open button's enabled state"
                  IsChecked="{Binding OpenCanExecute}"/>

        <!-- Example Button with Command Binding to a Routed Command-->
        <Button Margin="10" Content="Open" HorizontalAlignment="Left"
                Command="ApplicationCommands.Open"/>
    </StackPanel>
</Window>

 MainWindow.xaml.cs 

using System.Windows;
using System.Windows.Input;

namespace CommandSink {
    /// <summary>
    ///   Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window {
        public MainWindow() {
            this.InitializeComponent();
            this.DataContext = new MainViewModel();
        }

        private void CommandBinding_OnExecuted(object sender, ExecutedRoutedEventArgs e) {
            this.CommandSinkControl.DoExecuted(sender, e);
        }

        private void CommandBinding_OnCanExecute(object sender, CanExecuteRoutedEventArgs e) {
            this.CommandSinkControl.DoCanExecute(sender, e);
        }
    }
} 

 MainViewModel.cs 

using System.ComponentModel;
using System.Windows;
using System.Windows.Input;
using Microsoft.Practices.Prism.Commands;

namespace CommandSink {
    public class MainViewModel : INotifyPropertyChanged {
        public ICommand OpenCommand { get; private set; }

        private bool m_openCanExecute;
        public bool OpenCanExecute {
            get { return this.m_openCanExecute; }
            set {
                if (value != this.m_openCanExecute) {
                    this.m_openCanExecute = value;
                    this.OnPropertyChanged("OpenCanExecute");
                }
            }
        }

        public MainViewModel() {
            this.OpenCommand = new DelegateCommand(this.OpenCommand_OnExecuted,
                                                   this.OpenCommand_OnCanExecute);
        }

        private bool OpenCommand_OnCanExecute() {
            return this.OpenCanExecute;
        }

        private void OpenCommand_OnExecuted() {
            MessageBox.Show("Open Command");
        }

        #region Implementation of INotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName) {
            var handler = this.PropertyChanged;
            if (handler != null) {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        #endregion
    }
}

Points of Interest 

While you have to add a little wire-up code to the code-behind of the view, I found this acceptable to gain the added readability. 

You might also ask why I created an invisible UserControl instead of just putting it in the Window.Resources. It was crucial that Drain="{Binding OpenCommand}" worked. To do that, I needed it to be part of the LogicalTree and inherit the DataContext such that I could use DataBinding. Do you have a better solution to do this? Please let me know! 

Thank You!

Thank you for reading my article. I hope I was clear and understandable. Please provide comments, suggestions, and/or concerns! I'd love to hear them! Thank you!