Feeds:
Posts
Comments

Posts Tagged ‘ICommand in Silverlight’

One day someone asked me — Are you using MVVM in your project with complete no code in code behind files? I said we are using MVVM but there is still code in button click events in code behind files.
Then I realized that as my project was in Silverlight 3.0 the time we developed the application, we were forced to do the way we did. But not anymore now with Silverlight 4.0.Below is the way to use it

Commanding has always been available in WPF, but was only recently added to Silverlight 4 with the addition of the Command property to ButtonBase and Hyperlink. Commanding lets controls know when their actions are available or not. If not, the controls are disabled.
For example, when adding a new customer, you cannot also delete a customer, therefore, while adding, the Delete button needs to be disabled. The Command pattern is designed to help in these kinds of scenarios.
Commanding is based on a simple interface: ICommand. It has 3 members,

interface ICommand

{
void Execute(object parameter);
bool CanExecute(object parameter);
event EventHandler CanExecuteChanged;
}

There are basically 3 steps to use commanding feature in Silverlight:

1) Create a command class that implements the ICommand interface.
2) Create a property of type ICommand in the View/Model class.
3) Bind the Command property of a Button or Hyperlink to the property created in 2 above.

We will create a simple application to append last name with first name on a button click.

Creating a Command Class
All ICommand interfaces are wrapped in a custom RelayCommand class which makes it easy to enable and disable commands from the ViewModel itself. The code for the RelayCommand is shown below:

public class RelayComand :ICommand
{
private Action handler;

public RelayComand(Action handler1)
{
handler = handler1;
}

           private bool isEnabled;

           public bool IsEnabled
{
get { return isEnabled; }
set
{
if (value != isEnabled)
{
isEnabled = value;
if (CanExecuteChanged != null)
{
CanExecuteChanged(this, EventArgs.Empty);
}
}

}
}

public bool CanExecute(object parameter)
{
return IsEnabled;
}

public event EventHandler CanExecuteChanged;

public void Execute(object parameter)
{
handler();
}
}

Creating a Property in the View/Mode
private readonly ICommand calculateCommand;

public ICommand CalculateCommand
{
get
{
return calculateCommand;
}
}

Binding to the Command

<Button Grid.Row=”1″ Grid.ColumnSpan=”5″ Margin=”0,5,0,0″

Content=”Calculate” x:Name=”btnCalculate”

Command=”{Binding CalculateCommand}” />

The complete code is shown below:
public class ViewModel : INotifyPropertyChanged
{
public ViewModel()
{
calculateCommand = new RelayComand(Calculate) { IsEnabled = true };
}
private string firstName;
public string FirstName
{
get { return firstName; }
set
{
firstName = value;
OnPropertyChanged(“FirstName”);
}
}
private string lastName;
public string LastName
{
get { return lastName; }
set
{
lastName =  value;
OnPropertyCh anged(“LastName”);
}
}
private string fullName;
public string FullName
{
get { return fullName; }
set
{
fullName = value;
OnPropertyChanged(“FullName”);
}
}
protected void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}

public event PropertyChangedEventHandler PropertyChanged;
private readonly ICommand calculateCommand;
public ICommand CalculateCommand
{
get
{
return calculateCommand;
}

}

private void Calculate()
{
FullName = FirstName + ” ” + LastName;
}

}

Read Full Post »