Set UpdateSourceTrigger to Explicit in ShowDialog (WPF MVVM)

Maya picture Maya · Oct 5, 2011 · Viewed 7.4k times · Source

I saw this example - Binding.UpdateSourceTrigger Property

in the example the UpdateSourceTrigger set to Explicit and then in the view code he call to UpdateSource of the TextBox name.

But if i use the MVVM dp i dont want to have names to my controls and source properties are in the VM and not in the view so what is the right way to bind controls to VM properties and set the UpdateSourceTrigger to explicit?

I want to do this because in my case its ShowDialog window and I want that the source will update only if the user click "ok"

Thanks in advance!

Answer

WPF-it picture WPF-it · Oct 5, 2011

If you are using MVVM truely then your OK button click must be handled by some Command. This command must be coming from your ViewModel. The Expliticly bound properties must be coming from your ViewModel again. So whats stopping you.

  1. Do not use Explicit binding but use OneWay binding.
  2. In you button, bind a command and bind a command parameter to the OneWay bound Dependency property.
  3. In your Command's Execute handler (which must be some method from your ViewModel), change the ViewModel's property with the parameter coming.
  4. Raise the NotifyPropertyChanged for that property from your ViewModel.

E.g.

Assume I need to update a TextBox's Text back into my model on OK button click.

So for that I have a EmployeeViewModel class that has EmployeeName property in it. The property is has a getter and a setter. The setter raises property changed notification. The view model also has another property of type ICommand named SaveNameCommand that return a command for me to execute.

EmployeeViewModel is the data context type of my view. Myview has a TextBox (named as x:Name="EmployeeNameTxBx") OneWay bound to the EmployeeName and a Button as OK. I bind Button.Command property to EmployeeViewModel.SaveNameCommand property and Button.CommandParameter is bound to EmployeeNameTxBx.Text property.

      <StackPanel>
          <TextBox x:Name="EmployeeNameTxBx"
                   Text="{Binding EmployeeName, Mode=OneWay}" />
          <Button Content="OK"
                  Command="{Binding SaveNameCommand}"
                  CommandParameter="{Bidning Text, ElementName=EmployeeNameTxBx}" />
      </StackPanel>

Inside my EmployeeViewModel I have OnSaveNameCommandExecute(object param) method to execute my SaveNameCommand.

In this perform this code...

     var text = (string)param;
     this.EmployeeName = text;

This way ONLY OK button click, updates the TextBox's text back into EmployeeName property of the model.

EDIT

Looking at your comments below, I see that you are trying to implement Validation on a UI. Now this changes things a little bit.

IDataErrorInfo and related validation works ONLY IF your input controls (such as TextBoxes) are TwoWay bound. Yes thats how it is intended. So now you may ask "Does this mean the whole concept of NOT ALLOWING invalid data to pass to model is futile in MVVM if we use IDataErrorInfo"?

Not actually!

See MVVM does not enforce a rule that ONLY valid data should come back. It accept invalid data and that is how IDataErrorInfo works and raises error notfications. The point is ViewModel is a mere softcopy of your View so it can be dirty. What it should make sure is that this dirtiness is not committed to your external interfaces such as services or data base.

Such invalid data flow should be restricted by the ViewModel by testing the invalid data. And that data will come if we have TwoWay binding enabled. So considering that you are implementing IDataErrorInfo then you need to have TwoWay bindings which is perfectly allowed in MVVM.

Approach 1:

What if I wan to explicitly validate certain items on the UI on button click?

For this use a delayed validation trick. In your ViewModel have a flag called isValidating. Set it false by default.

In your IDataErrorInfo.this property skip the validation by checking isValidating flag...

    string IDataErrorInfo.this[string columnName]
    {
      get
      {
        if (!isValidating) return string.Empty;

        string result = string.Empty;
        bool value = false;

        if (columnName == "EmployeeName")
        {
            if (string.IsNullOrEmpty(AccountType))
            {
                result = "EmployeeName cannot be empty!";
                value = true;
            }
        }
        return result;
      }
    }

Then in your OK command executed handler, check employee name and then raise property change notification events for the same property ...

    private void OnSaveNameCommandExecute(object param)
    {
         isValidating = true;
         this.NotifyPropertyChanged("EmployeeName");
         isValidating = false;
    }

This triggers the validation ONLY when you click OK. Remember that EmployeeName will HAVE to contain invalid data for the validation to work.

Approach 2:

What if I want to explicitly update bindings without TwoWay mode in MVVM?

Then you will have to use Attached Behavior. The behavior will attach to the OK button and will accept list of all items that need their bindings refreshed.

       <Button Content="OK">
           <local:SpecialBindingBehavior.DependentControls>
                <MultiBinding Converter="{StaticResource ListMaker}">
                    <Binding ElementName="EmployeeNameTxBx" />
                    <Binding ElementName="EmployeeSalaryTxBx" />
                    ....
                <MultiBinding>
           </local:SpecialBindingBehavior.DependentControls>
       </Button>

The ListMaker is a IMultiValueConverter that simply converts values into a list...

       Convert(object[] values, ...)
       {
            return values.ToList();
       }

In your SpecialBindingBehavior have a DependentControls property changed handler...

      private static void OnDependentControlsChanged(
          DependencyObject depObj,
          DependencyPropertyChangedEventArgs e) 
      {
           var button = sender as Button;
           if (button != null && e.NewValue is IList)
           {
               button.Click 
                    += new RoutedEventHandler(
                         (object s, RoutedEventArgs args) =>
                         {
                              foreach(var element in (IList)e.NewValue)
                              {
                                 var bndExp
                                   = ((TextBox)element).GetBindingExpression(
                                       ((TextBox)element).Textproperty);

                                 bndExp.UpdateSource();
                              }
                         });
           }
      }

But I will still suggest you use my previous pure MVVM based **Approach 1.