Introduction
Commands provide a mechanism for the view to update the model in the MVVM architecture. Commands provide a way to search the element tree for a command handler. The ICommand interface is defined inside the System.Windows.Input namespace. It has two methods and an event.
bool CanExecute(object parameter);
void Execute(object parameter);
event EventHandler CanExecuteChanged;
The Execute method is only invoked when CanExecute returns true. In case the CanExecute method returns false then the binding control is disabled automatically.
In order to know the CanExecute value, listen to the CanExecuteChanged event, which may vary based on the parameter passed.
Using Code
Use of ICommand
The ICommand interface is generally used in the MVVM architecture. Here in the Button control, the Command property is bound to the "UpdateCommand". Since UpdateCommand is nothing but an ICommand instance, while loading the window it will check the CanExecute return value and if it returns true then it will enable the button control and the Execute method is ready to be used otherwise the button control is disabled.
<Button x:Name="btnUpdate" Width="100" Height="20" HorizontalAlignment="Center" Grid.Row="1" Content="Update" Command="{Binding Path=UpdateCommand}"/>
Passing a parameter to the CanExecute and Execute methods
A parameter can be passed through the "CommandParameter" property. Once the button is clicked the selected address value is passed to the ICommand.Execute method.
The CommandParameter is sent to both CanExecute and Execute events.
<Button x:Name="btnUpdate" Width="100" Height="20" HorizontalAlignment="Center" Grid.Row="1" Content="Update" Command="{Binding Path=UpdateCommand}" CommandParameter="{Binding ElementName=lstPerson, Path=SelectedItem.Address}">
</Button>
Tasks of CanExecuteChanged
CanExecuteChanged notifies any command sources (like a Button or CheckBox) that are bound to that ICommand that the value returned by CanExecute has changed. Command sources care about this because they generally need to update their status accordingly (eg. a Button will disable itself if CanExecute() returns false).
Listen CanExecuteChanged
The CommandManager.RequerySuggested event is raised whenever the CommandManager thinks that something has changed that will affect the ability of commands to execute. This might be a change of focus, for example. This event happens to fire a lot.
public event EventHandler CanExecuteChanged
{
add { CommandManager.RequerySuggested += value; }
remove { CommandManager.RequerySuggested -= value; }
}
ICommand in MVVM
UI
![MVVM]()
Model
Create a folder named Model and a class named Person. Implement INotifyPropertyChanged and override the PropertyChanged event. Define two properties, Name and Address.
public class Person : INotifyPropertyChanged
{
private string name;
private string address;
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
public string Name
{
get { return name; }
set
{
name = value;
OnPropertyChanged("Name");
}
}
public string Address
{
get { return address; }
set
{
address = value;
OnPropertyChanged("Address");
}
}
}
ViewModel
Create a folder named ViewModel and a class named PersonViewModel. Initialize a List object of type person. Expose this object through the person's property. Also, expose an ICommand instance in this class.
Define a class Updater and implement ICommand interface.
public class PersonViewModel
{
private IList<Person> _personList;
public PersonViewModel()
{
_personList = new List<Person>()
{
new Person(){Name="Prabhat", Address="Bangalore"},
new Person(){Name="John",Address="Delhi"}
};
}
public IList<Person> Persons
{
get { return _personList; }
set { _personList = value; }
}
private ICommand mUpdater;
public ICommand UpdateCommand
{
get
{
if (mUpdater == null)
mUpdater = new Updater();
return mUpdater;
}
set
{
mUpdater = value;
}
}
}
class Updater : ICommand
{
#region ICommand Members
public bool CanExecute(object parameter)
{
return true;
}
public event EventHandler CanExecuteChanged
{
add { CommandManager.RequerySuggested += value; }
remove { CommandManager.RequerySuggested -= value; }
}
public void Execute(object parameter)
{
//Your Code
}
#endregion
}
View
Create a view folder and a Person.xaml class. Bind the command to the button control. Once the button is clicked, the command parameter is passed to the Execute method. You can also bind a command to any control that supports the command property. The TextBox is bound with listView selectedItem.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Label x:Name="lblName" Content="Name" Grid.Row="0" Grid.Column="0" VerticalAlignment="Top"></Label>
<TextBox x:Name="txtName" Grid.Row="0" Grid.Column="1" VerticalAlignment="Top" Text="{Binding ElementName=lstPerson, Path=SelectedItem.Name}"></TextBox>
<Label x:Name="lblAddress" Content="Address" Grid.Row="1" Grid.Column="0" VerticalAlignment="Top"></Label>
<TextBox x:Name="txtAddress" Grid.Row="1" Grid.Column="1" VerticalAlignment="Top" Text="{Binding ElementName=lstPerson Path=SelectedItem.Address}"></TextBox>
</Grid>
<Button x:Name="btnUpdate" Width="100" Height="20" HorizontalAlignment="Center" Grid.Row="1" Content="Update" Command="{Binding Path=UpdateCommand}" CommandParameter="{Binding ElementName=lstPerson, Path=SelectedItem.Address}"></Button>
<ListView x:Name="lstPerson" Grid.Row="2" ItemsSource="{Binding Persons}">
<ListView.View>
<GridView>
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" />
<GridViewColumn Header="Address" Width="200" DisplayMemberBinding="{Binding Address}"/>
</GridView>
</ListView.View>
</ListView>
</Grid>
App.xaml.cs
Override the OnStartup method of the Application class. Initialize a view and ViewModel class and wrap a ViewModel to the view by the DataContext property.
protected override void OnStartup(StartupEventArgs e)
{
base.OnStartup(e);
View.Person person = new View.Person();
PersonViewModel personViewModel = new PersonViewModel();
person.DataContext = personViewModel;
person.Show();
}
Summary
- What is ICommand in WPF?
- How ICommand is used in MVVM architecture.
- MVVM architecture flow.
- How to pass parameters in CanExecute and Execute methods?
- How to listen to the CanExecuteChanged event?
Point Of Interest
Instead of events, commands have been used in the MVVM architecture. We cannot pass a parameter to the event but we can pass a parameter through a command.