Commands Bindng in MVVM

In my last post on MVVM for Beginner I have show you the simple way to bind the textbox and date picker to the data-source properties. Which are either declared in the Model or viewModel. In this article I will show you how to bind the Buttons control so that viewModel will allow the view to consume its functionality. I am using the Relay Command which is discussed by Josh Smith.
Commands are a way to handle user interface (UI) actions. They are a loosely coupled way to bind the UI to the logic that performs the action. When building composite applications, presentation design patterns such as Model-View-Presenter (MVP) and Model-View-Controller (MVC) are often used to separate the UI logic from the UI layout and presentation. When implementing these patterns with Windows Presentation Foundation (WPF), the presenter or controller handles commands but lives outside the logical tree. WPF-routed commands deliver command messages through UI elements in the tree, but the elements outside the tree will not receive these messages because they only bubble up or down from the focused element or an explicitly stated target element. Additionally, the WPF-routed commands require a command handler in the code behind.

Let us start our example code of how to bind the Button command property and execute the code on the view model to perform the task. I have same example code which I have used in my MVVM for Beginner post, but in that post the buttons are not working which will work in this post and I have changed the theme to red which was black in the previous post.

View:

In the view if you look at the starting tag which is normally started with either user control or window, but in case of my view it starts with classes.ViewBase as I have created base class for the view and the base class is inherit from the window. I have created a base class so that I have single close event handler for all the views. If you look at the xaml , you can see that I have used the ApplicationCommads.Close, which will get value that represents the Close command. I have also used the CommandBinding class which Binds a RoutedCommand to the event handlers that implement the command.

<classes:ViewBase.CommandBindings >
<CommandBinding Command="ApplicationCommands.Close" 
                   Executed="CloseCommandHandler"/>
<classes:ViewBase.CommandBindings >

<Button Content="Save" Grid.Row="7" Grid.Column="1" Width="75" Margin="0,3,80,3" HorizontalAlignment="Right" Command="{Binding Path=SaveCommand}" > </Button>
<Button Content="Close" Grid.Row="7" Grid.Column="1" Width="75" Margin="0,3,-1,3" HorizontalAlignment="Right" Command="ApplicationCommands.Close"> </Button>

Then I have used the Command property of the button (Gets the command that will be executed when the command source is invoked) to bind the command for both the save and the close buttons.

ViewModel

In the ViewModel I have declared RelayCommand object which is discussed by the Josh Smith. And a get property is define which will return the ICommand Interface. I have also created RelayCommand class which is implemented by Josh Smith. I have just shown the messageBox to display full name of the customer.

There is no changed in the model. Hope you get idea about how to bind the commands to the buttons.You can download the source code from here

All and any comments / bugs / suggestions are welcomed!

References:
1- Commands