Avoiding CommandBinding in the XAML Code Behind files

Yesterday I got a very good question from a colleague. Basically we were discussing the M-V-VM pattern and how it makes your XAML code behind much cleaner + your application more testable. The only thing that was annoying him was the fact that he had to do the command binding and delegate the work to the ViewModel . So he asked me, “Is there a way how I can remove the Command Binding from my code behind as well?”. What he was referring to, was the hooking of Commands to the ViewModel, which would look something like this

   1: CommandBindings.Add(

   2:     new CommandBinding(Commands.Search,

   3:     (x, e) => vm.Search(),

   4:     (x, e) => e.CanExecute = vm.CanSearch())

   5:     );

And the answer is, of course you can! After all, is there something you cannot do with the mighty WPF

So how can we achieve this? We have to create a class that implements the ICommand interface. Here is how the ICommand interface looks like.

   1: public interface ICommand

   2: {

   3:     event EventHandler CanExecuteChanged;

   4:  

   5:     bool CanExecute(object parameter);

   6:  

   7:     void Execute(object parameter);

   8: }

Very simple isn’t it! Here is the MSDN description of the methods of this interface

CanExecute
Defines the method that determines whether the command can execute in its current state.

Execute
Defines the method to be called when the command is invoked.

CanExecuteChanged
Occurs when changes occur that affect whether or not the command should execute.

So in the CanExecute we have to put the logic that checks if we can execute the command and in the Execute we put the logic that executes the command…. but what about the CanExecuteChanged event? Well here we have to hook up to the Command System. Here is a simple implementation of the ICommand.

   1: public class SearchCommand : ICommand

   2: {

   3:     ViewModel viewModel;

   4:     public SearchCommand(ViewModel viewModel)

   5:     {

   6:         this.viewModel = viewModel;

   7:     }

   8:  

   9:     #region ICommand Members

  10:  

  11:     public bool CanExecute(object parameter)

  12:     {

  13:         return !String.IsNullOrEmpty(viewModel.SearchText);

  14:     }

  15:  

  16:     public event EventHandler CanExecuteChanged

  17:     {

  18:         add { CommandManager.RequerySuggested += value; }

  19:         remove { CommandManager.RequerySuggested -= value; }

  20:     }

  21:  

  22:     public void Execute(object parameter)

  23:     {

  24:         viewModel.MyDataView.Filter = x => ((Person)x).Name.Contains(viewModel.SearchText);

  25:     }

  26:  

  27:     #endregion

  28: }

  As you can see in order to hook up to the WPF command system we have to override the default behavior of the event and register to the CommandManager.RequerySuggested like so

   1: public event EventHandler CanExecuteChanged

   2: {

   3:     add { CommandManager.RequerySuggested += value; }

   4:     remove { CommandManager.RequerySuggested -= value; }

   5: }

This is very important because by doing so the CanExecute method will be called when ever there is focus changed, user input etc…

Once you have a class that implements the ICommand you can expose that class in your ViewModel and databind to it in the Command property of the control you want to hook up the command to like so

   1: ViewModel property

   2: /// <summary>

   3: /// Return an ICommand that can execute the search

   4: /// </summary>

   5: public ICommand SearchByNameCommand

   6: {

   7:     get { return searchByNameCommand; }

   8: }

   9:  

  10: XAML to hook to that command

  11: <Button Command="{Binding SearchByNameCommand}" Content="Search" />

And that’s it… No more command bindings to hook to the Command in the code behind of the XAML file! This is very cool but now I guess the next question would be, so we actually have to create a class and implement an ICommand every time??

Well the answer is HELL NO…. What I do is create a class that does all the stuff for me and then I pass a delegate for the CanExecute and another one for the Execute… as simple as this…

   1: public class SimpleCommand : ICommand

   2: {

   3:     public Predicate<object> CanExecuteDelegate { get; set; }

   4:     public Action<object> ExecuteDelegate { get; set; }

   5:  

   6:     #region ICommand Members

   7:  

   8:     public bool CanExecute(object parameter)

   9:     {

  10:         if (CanExecuteDelegate != null)

  11:             return CanExecuteDelegate(parameter);

  12:         return true;// if there is no can execute default to true

  13:     }

  14:  

  15:     public event EventHandler CanExecuteChanged

  16:     {

  17:         add { CommandManager.RequerySuggested += value; }

  18:         remove { CommandManager.RequerySuggested -= value; }

  19:     }

  20:  

  21:     public void Execute(object parameter)

  22:     {

  23:         if (ExecuteDelegate != null)

  24:             ExecuteDelegate(parameter);

  25:     }

  26:  

  27:     #endregion

  28: }

and to create a command now is as simple as this…

   1: searchByNameCommand = new SimpleCommand

   2: {

   3:     CanExecuteDelegate = x => !String.IsNullOrEmpty(SearchText),

   4:     ExecuteDelegate = x => myDataView.Filter = stateObj => ((Person)stateObj).Name.Contains(SearchText)

   5: };

and yes you could say that it is a 1 line of code (well a long one maybe )… yet of course, you can have as much logic in there as you want!

 

If you want to see a sample project I created a demo app that you can download here.

About these ads