Introduction
Silverlight 4 now came up with the support of Command Binding. Using Command
Binding you can easily develop your Silverlight MVVM (Model-View-ViewModel)
applications where your view will not know about the data i.e. a full separation
of the view from the model. In this article I will describe you how to implement
the command binding to load some informations & display it to the UI.
Background
In earlier version of Silverlight, if you want to load something on the click
of a button, you have to register the event in your view and then you had to
call the appropriate method to load data. Lets say, as an example I want to load
the customer information of my grocery shop when I click on a specific button.
How will you implement this in Silverlight? The answer is simple. I will
register a Click event of the button and then I will call the CustomerProvider
to load the customer information in my view. It’s simple enough but do you agree
that this scatters your view with the functionality to load the informations?
Yup, this backend related calls are tightly coupled with your view. They know
each other and if I want to give the same call from a different button, I have
to register the click event for that button and then have to give a call. It
looks a bit ugly in normal scenarios.
Now assume the MVVM architecture, where you will have the view to show the UI
related stuffs, model as data and viewmodel to do my necessary staffs to call
the provider to get the customer informations and store within the viewmodel.
Your view will not have any information about your data. Once binded to the UI
it will automatically load the informations. This will give you clean,
maintainable code with separation of the view from the business logic.
Implementation of DelegateCommand
To implement the Command binding you have to create a
DelegateCommand which implements the ICommand interface. The ICommand interface
is available in System.Windows.Input namespace in the System.Windows.dll
assembly. It defines the contract for commanding.
-
It has an EventHandler “CanExecuteChanged” which occurs when
changes occur that affect whether the command should execute.
-
It has a method named “CanExecute” and returns boolean value
true or false based on whether the command can be executed in its current
state.
-
Another method named “Execute” which calls when the command
is invoked.
Here is the implementation of the ICommand interface:
namespace System.Windows.Input
{
public interface ICommand
{
event EventHandler CanExecuteChanged;
bool CanExecute(object parameter);
void Execute(object parameter);
}
}
Now we have to implement the methods defined in the ICommand
interface to our DelegateCommand class. Here is the simple implementation of the
same:
using System;
using System.Windows.Input;
namespace Silverlight4.CommandBinding.Demo.CommandBase
{
public class DelegateCommand : ICommand
{
/// <summary>
/// Occurs when changes occur that affect whether the command should execute.
/// </summary>
public event EventHandler CanExecuteChanged;
Func<object, bool> canExecute;
Action<object> executeAction;
bool canExecuteCache;
/// <summary>
/// Initializes a new instance of the <see cref="DelegateCommand"/> class.
/// </summary>
/// <param name="executeAction">The execute action.</param>
/// <param name="canExecute">The can execute.</param>
public DelegateCommand(Action<object> executeAction,
Func<object, bool> canExecute)
{
this.executeAction = executeAction;
this.canExecute = canExecute;
}
#region ICommand Members
/// <summary>
/// Defines the method that determines whether the command
/// can execute in its current state.
/// </summary>
/// <param name="parameter">
/// Data used by the command.
/// If the command does not require data to be passed,
/// this object can be set to null.
/// </param>
/// <returns>
/// true if this command can be executed; otherwise, false.
/// </returns>
public bool CanExecute(object parameter)
{
bool tempCanExecute = canExecute(parameter);
if (canExecuteCache != tempCanExecute)
{
canExecuteCache = tempCanExecute;
if (CanExecuteChanged != null)
{
CanExecuteChanged(this, new EventArgs());
}
}
return canExecuteCache;
}
/// <summary>
/// Defines the method to be called when the command is invoked.
/// </summary>
/// <param name="parameter">
/// Data used by the command.
/// If the command does not require data to be passed,
/// this object can be set to null.
/// </param>
public void Execute(object parameter)
{
executeAction(parameter);
}
#endregion
}
}
Implementation of ViewModelBase
Let us now implement the ViewModelBase for our application. Though for this
sample application you can directly use the ViewModel, but it is recommended to
create a base class implementation by inheriting the INotifyPropertyChanged
interface so that, if you are creating multiple ViewModel it will be easier to
inherit the base class. Here is the code for that:
using System.ComponentModel;
namespace Silverlight4.CommandBinding.Demo.CommandBase
{
public abstract class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
/// <summary>
/// Called when [property changed].
/// </summary>
/// <param name="propertyName">Name of the property.</param>
protected void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
Implementation of ViewModel
Now our all the base classes are ready to use. Hence, we can go further to
create our first ViewModel. In this example we are going to load Customer
informations, so we will name it as CustomerViewModel.
First of all we will create a new instance of DelegateCommand
“LoadCustomersCommand” which is a ICommand type variable. It takes two
parameters. First one is the Action which fires when the command executes and
the second one is a Function pointer which returns whether the command can be
executed. If it returns true, the command binded to the element will be enabled
to do the operation and if it returns false, the command binded to the element
will be disabled by default. Once it becomes true by any other operation, the UI
thread automatically make the element enabled.
Here in the demo application when the command executes, we will fetch the
customer information from the provider and store the data in the
ObservableCollection called “CustomerCollection”. We used ObservableCollection
because it inherits the INotifyPropertyChanged interface and causes the UI
thread to update the UI automatically when the collection changed event occurs
binded to the specific UI.
/// <summary>
/// Initializes a new instance of the <see cref="CustomerViewModel"/> class.
/// </summary>
public CustomerViewModel()
{
LoadCustomersCommand = new DelegateCommand(LoadCustomers, CanLoadCustomers);
}
/// <summary>
/// Loads the customers.
/// </summary>
/// <param name="parameter">The parameter.</param>
private void LoadCustomers(object parameter)
{
CustomerCollection = CustomerProvider.LoadCustomers();
}
/// <summary>
/// Determines whether this instance [can load customers] the specified parameter.
/// </summary>
/// <param name="parameter">The parameter.</param>
/// <returns>
/// <c>true</c> if this instance [can load customers] the specified parameter;
/// otherwise, <c>false</c>.
/// </returns>
private bool CanLoadCustomers(object parameter)
{
return true;
}
Implementation of UI (XAML)
As of now, our back end code implmentation is ready and now we have to create
our UI to show the customer information. First of all we will create the static
instance of the viewmodel as a resource of the UserControl. We named it as
“vmCustomer”. Now we will design our UI with a ListBox and a Button. Once we
click on the button it should execute the command and load the data in the
ListBox.
The ListBox should point it’s ItemSource to the CustomerCollection inside the
ViewModel. The button will have the LoadCustomersCommand associated with it. If
the canExecute method returns false, you will notice the button as disabled and
when it returns true, it will become enabled.
Here is the full XAML implementation:
<UserControl x:Class="Silverlight4.CommandBinding.Demo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Silverlight4.CommandBinding.Demo.ViewModel"
Width="500" Height="300">
<UserControl.Resources>
<local:CustomerViewModel x:Key="vmCustomer"/>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Border CornerRadius="10,10,0,0" Background="Black"
Height="30" VerticalAlignment="Top" Margin="20,20,20,0">
<TextBlock Text="Silverlight 4 Command Binding Demo" Foreground="White"
FontWeight="Bold" Margin="5"/>
</Border>
<ListBox ItemsSource="{Binding CustomerCollection, Source={StaticResource vmCustomer}}"
Margin="20,50,20,40">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Path=Name}" Width="100" Grid.Column="0"/>
<TextBlock Text="{Binding Path=Address}" Width="200" Grid.Column="1"/>
<TextBlock Text="{Binding Path=ContactNumber}" Width="100" Grid.Column="2"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Command="{Binding LoadCustomersCommand, Source={StaticResource vmCustomer}}"
Content="Load Customers" Height="25" Margin="380,267,20,8" />
</Grid>
</UserControl>
What’s Next?
Our full code implementation is ready. We can now run the application to see
the code to execute. Press F5 to run it. Once the view loaded you will see the
ListBox is empty and there is a button just below the empty ListBox.

Now press the button. It will fire the command to the viewmodel and will
fetch the customer information from the provider to load it in the collection.
Once the collection modified, this will automatically trigger the
PropertyChanged event to update the UI.

Conclusion
You will notice that in the entire sample we didn’t write any code in the CS
file of the XAML i.e. the MainPage.xaml.cs is empty. This ensures that the
business logic totally separated than the UI implementation. Thus gives higher
readability and maintainability of the code.
You are welcome for any queries, comments or suggestions here. Also, don’t
forget to vote for it.
Download the Entire Source Code: here.
Cheers…