When working with MVVM, the Command pattern is used to bind actions (such as a Click on a Button) in the View with commands in the ViewModel. The ICommand interface in Silverlight has 3 members:
// Summary:
// Defines the contract for commanding, using the same contract as used in WPF.
public interface ICommand
{ // Summary:
// Occurs when changes occur that affect whether the command should execute.
event EventHandler CanExecuteChanged;
// Summary:
// Defines the method that determines whether the command can execute in its
// current state.
//
// Parameters:
// parameter:
// Data used by the command. If the command does not require data to be passed,
// this object can be set to null.
//
// Returns:
// true if this command can be executed; otherwise, false.
bool CanExecute(object parameter);
//
// Summary:
// Defines the method to be called when the command is invoked.
//
// Parameters:
// parameter:
// Data used by the command. If the command does not require data to be passed,
// this object can be set to null.
void Execute(object parameter);
}
The fact whether or not the command can be executed (read: a Button is enabled or not) depends on the boolean value returned by the CanExecute. By default, this value is evaluated on first load of the View: a Save button should initially be disabled. However, during user input, this value has to be re-evaluated: after the user has filled in a field, we need to check if the Save button should be enabled. For this purpose, the CanExecuteChanged event exist. This event should be raised whenever the value of CanExecute should be evaluated once again.
In MVVM Light, the lightwork MVVM framework by Laurent Bugnion, a method called RaiseCanExecuteChanged exists on the RelayCommand class for this very purpose. Let’s take a look at how we can use this method.
I have a very basic view, containing some TextBox fields. Note that initially, the Save button is disabled:
The XAML code is shown below. The fields are bound to a Person object, that I expose in the ViewModel (shown further).
<Grid Width="450">
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock x:Name="FirstNameTextBlock" Grid.Row="1"
Grid.Column="0" Text="First name" VerticalAlignment="Center" Margin="3"></TextBlock>
<TextBlock x:Name="LastNameTextBlock" Grid.Row="2"
Grid.Column="0" Text="Last name" VerticalAlignment="Center" Margin="3"></TextBlock>
<TextBlock x:Name="EmailTextBlock" Grid.Row="3"
Grid.Column="0" Text="Email" VerticalAlignment="Center" Margin="3"></TextBlock>
<TextBox x:Name="FirstNameTextBox" Grid.Row="1"
Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left" Width="200"
Margin="3" Text="{Binding Person.FirstName, Mode=TwoWay}"></TextBox> <TextBox x:Name="LastNameTextBox" Grid.Row="2" Grid.Column="1"
VerticalAlignment="Center" HorizontalAlignment="Left" Width="200"
Margin="3" Text="{Binding Person.LastName, Mode=TwoWay}"></TextBox> <TextBox x:Name="EmailTextBox" Grid.Row="3" Grid.Column="1"
VerticalAlignment="Center" HorizontalAlignment="Left" Width="200"
Margin="3" Text="{Binding Person.Email, Mode=TwoWay}"></TextBox> <Button Content="Save" Grid.Row="4" Grid.Column="1"
Command="{Binding SaveCommand}" VerticalAlignment="Center" HorizontalAlignment="Right"></Button>
</Grid>
The ViewModel called MainPageViewModel is set as the DataContext for this View. This ViewModel exposes a Person instance (a Model class) and a RelayCommand for the View to bind to.
public class MainPageViewModel: ViewModelBase
{ public Person Person { get; set; }
public RelayCommand SaveCommand { get; set; }
}
The SaveCommand is initialized as follows:
private void InitializeCommands()
{ SaveCommand = new RelayCommand(OnSave, OnCanSave);
}
private void OnSave()
{ //Perform save to database
}
public bool OnCanSave()
{ return !string.IsNullOrEmpty(Person.FirstName)
&& !string.IsNullOrEmpty(Person.LastName)
&& !string.IsNullOrEmpty(Person.Email);
}
Note that the OnCanSave (the implementation of the CanExecuteChanged) will at this point only be called upon binding of the ViewModel. However, I need this to be evaluated every time a value of the bound Person changes: only after all 3 fields have a value, the Save should be enabled.
To implement this, I changed the Person class as follows. It implements the INotifyPropertyChanged interface.
public class Person : INotifyPropertyChanged
{ private string _firstName;
private string _lastName;
private string _email;
public event PropertyChangedEventHandler PropertyChanged;
public string FirstName
{ get
{ return _firstName;
}
set
{ if (_firstName != value)
{ _firstName = value;
if (PropertyChanged != null)
{ PropertyChanged(this, new PropertyChangedEventArgs("FirstName")); }
}
}
}
public string LastName
{ get
{ return _lastName;
}
set
{ if (_lastName != value)
{ _lastName = value;
if (PropertyChanged != null)
{ PropertyChanged(this, new PropertyChangedEventArgs("LastName")); }
}
}
}
public string Email
{ get
{ return _email;
}
set
{ if (_email != value)
{ _email = value;
if (PropertyChanged != null)
{ PropertyChanged(this, new PropertyChangedEventArgs("Email")); }
}
}
}
}
In the constructor of the ViewModel, I register for the PropertyChanged event being raised from the Person model.
public MainPageViewModel()
{ InitializeCommands();
Person = new Model.Person();
Person.PropertyChanged +=
new System.ComponentModel.PropertyChangedEventHandler(Person_PropertyChanged);
}
In this event handler, I now call the RaiseCanExecuteChanged method, part of the RelayCommand class of MVVM Light.
void Person_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{ SaveCommand.RaiseCanExecuteChanged();
}
This causes the CanExecuteChanged to be raised, causing Silverlight to evaluate again if the Command should be enabled or not. In this particular case, I do this as follows (this code was already shown and executed also on the initial binding):
public bool OnCanSave()
{ return !string.IsNullOrEmpty(Person.FirstName)
&& !string.IsNullOrEmpty(Person.LastName)
&& !string.IsNullOrEmpty(Person.Email);
}
Whenever a value is provided for all 3 fields, the Button will be enabled.
