UpdateSourceTrigger = "Explicit" for MVVM Puritans

Recently, a new term has been evolved and established in WPF community. This is Pure MVVM. MVVM puritans is a belief system in MVVM. The believers of this faith have clean heart and no code behind :)

There are so many techniques developed by WPF community to adjust the believer of this faith in our society. One limitation that I have seen these people experiencing, is how to practice their religion with Explicit Binding. Just to recall, you can see this from msdn:

http://msdn.microsoft.com/en-us/library/system.windows.data.binding.updatesourcetrigger.aspx

With explicit binding, this has always been expected to update the binding source using BindingExpression. You might be familiar with this code:

private void SubmitButtonClick(object sender, RoutedEventArgs e)
{
  textBoxName.GetBindingExpression(TextBox.TextProperty).UpdateSource();
}

But the thing is that this code is written in code behind which is not allowed under pure MVVM methodology. In this post, we are going to look at one technique which could be used to overcome such situation. We will be using CommandParameters for our DelegateCommand in the DataContext (ViewModels) of our View.

Let's assume a sample view, StudentView. This form has two fields. They are student's First and Last names. This view should also have a button to update the Student details to the view model. The organization has zero tolerance to code behind so it is part of design requirement to avoid it.



We would be using RelayCommand for this post. You can get the code of RelayCommand from Josh Smith's article:

http://msdn.microsoft.com/en-us/magazine/dd419663.aspx

The XAML definition of Student view is as follows:

<Window x:Class="WpfAppMVVM_Puritans_ExplicitBinding.StudentView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfAppMVVM_Puritans_ExplicitBinding"
        Title="StudentView" Height="300" Width="555">
    <Window.Resources>
        <local:StudentConverter x:Key="studentParameterConverter" />
    </Window.Resources>
    <Window.DataContext>
        <local:StudentViewModel />
    </Window.DataContext>
    <Grid>
        <Label Content="First Name" Height="32" HorizontalAlignment="Left" Margin="13,11,0,0" Name="label1" VerticalAlignment="Top" Width="127" />
        <TextBox Height="32" HorizontalAlignment="Left" Margin="148,10,0,0" Name="textBoxFirstName" VerticalAlignment="Top" Width="349" >
            <TextBox.Text>
                <Binding Path="FirstName" UpdateSourceTrigger="Explicit" />
            </TextBox.Text>
        </TextBox>
        <Label Content="Last Name" Height="32" HorizontalAlignment="Left" Margin="13,49,0,0" Name="label2" VerticalAlignment="Top" Width="127" />
        <TextBox Height="32" HorizontalAlignment="Left" Margin="148,48,0,0" Name="textBoxLastName" VerticalAlignment="Top" Width="349" >
            <TextBox.Text>
                <Binding Path="LastName"  UpdateSourceTrigger="Explicit" />
            </TextBox.Text>
        </TextBox>
        <Button Content="Save" Height="30" HorizontalAlignment="Left" Margin="148,86,0,0" Name="button1" VerticalAlignment="Top" Width="153" 
               Command="{Binding SaveCommand}" >
            <Button.CommandParameter>
                <MultiBinding Converter="{StaticResource studentParameterConverter}">
                    <Binding ElementName="textBoxFirstName" Path="Text" />
                    <Binding ElementName="textBoxLastName" Path="Text" /> 
                </MultiBinding>
            </Button.CommandParameter>
        </Button>
    </Grid>
</Window>

As you can see the above view has two text boxes. The Text property of these text boxes are bound to FirstName and LastName property of the DataContext. Please notice UpdateSourceTrigger = Explicit with binding. An instance of StudentViewModel has been created and assigned as DataContext of this view. This also has a Update button. StudentViewModel is expected to have a command SaveCommand bound with the Command property of the button.

The most interesting thing and the reason of this post is the CommandParameter for the button. The CommandParameter has been bound with the Text properties of the two text boxes. We have to use MultiBinding for this. In order to get the value of this binding, we have to use converter. We have instantiate StudentConverter in the Resources section of the Window and used this as a StaticResource for this. Alternatively, We could have used StringFormat but WPF has this issue of StringFormat when bound to the property of System.Object type. StringFormat mainly works with string based properties for MultiBinding.

The definition of StudentViewModel is as follows:

class StudentViewModel : INotifyPropertyChanged
{
    #region Private Fields
        private string _firstName;
        private string _lastName;
        #endregion

    #region Public Properties
    public string FirstName
    {
        get { return _firstName; }
        set
        {
            _firstName = value;
            OnPropertyChanged("FirstName");
        }
    }

    public string LastName
    {
        get { return _lastName; }
        set
        {
            _lastName = value;
            OnPropertyChanged("LastName");
        }
    }
    #endregion

    #region Commands
    RelayCommand _saveCommand;
    public ICommand SaveCommand
    {
        get
        {
            if (_saveCommand == null)
            {
                _saveCommand = new RelayCommand((param) => this.Save(param),
                    param => this.CanSave);
            }
            return _saveCommand;
        }
    }

    public void Save(object parameter)
    {
        string[] Names = ((string)parameter).Split(new char[] { ':' });
        FirstName = Names[0];
        LastName = Names[1];            
    }

    bool CanSave
    {
        get
        {
            return true;
        }
    }
    #endregion Commands
    
    #region INotifyPropertyChanged implementation
        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        #endregion INotifyPropertyChanged implementation
}

As expected by StudentView. It has two properties FirstName and LastName. It also has a RelayCommand based property SaveCommand. The view model is implementing INotifyPropertyChanged to propagate change notifications to the view.

Please notice the definition of Execute method of SaveCommand (named Save). This is expecting FirstName and LastName joined together using colon ":". This code is just splitting the two from parameter (passed through CommandParameter) and assigning to FirstName and LastName properties. It is also possible that these values are not assigned directly but they are updated before being assigned. Whatever you would assign to the property bound to the view, the changes will be propagated to the view because of implementation of INotifyPropertyChanged.

As seen from above, the responsibility of CommandParameter's converter is to combine first and last name with a colon. The definition of converter is as follows:

public class StudentConverter  : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        string firstName = (string)values[0];
        string lastName = (string)values[1];

        return string.Format("{0}:{1}", firstName, lastName);
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Now run the application. Enter first and last names in the assigned textboxes and click Save button. Those values will be converted and passed to the SaveCommand in the view model. Here the view model's properties will be updated and changes are propagated to the View.


Download: