WPF ICommand In MVVM

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

1. What is ICommand in WPF?
2. How ICommand is used in MVVM architecture.
3. MVVM architecture flow.
4. How to pass parameters in CanExecute and Execute methods?
5. 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.