WPF Toolkit PropertyGrid direct update

For the visuals in our WPF project we use the WPF toolkit. An awesome library that offers a lot of controls for free (Community Edition) and even more controls in the paid editions.

product_wpf_toolkit_plus_horizontal-300x53

When editing a string property in the PropertyGrid, we noticed some strange behaviour. The ViewModel would only be updated after changing the selection. This required the user to first switch to another property before clicking the save button. Unacceptable!

Custom Editors with DataTemplates in the WPF Toolkit documentation handed the solution. But first we dug around the source code for the controls. Why was the string property not updated as we typed the new value?

A string in the PropertyGrid is default edited with the PropertyGridEditorTextBox control. This can be stripped down to a TextBox. The TextBox has UpdateSourceTrigger set to LostFocus. All other types (int, DateTime, bool) have default controls that handle the change of value like masters, so no coding required for those.

We made a custom editor for strings and hooked it up to the PropertyGrid by adding the EditorAttribute to the ViewModel. See simplified code below.

public class InstantUpdatingTextBox : ITypeEditor{
   public FrameworkElement ResolveEditor(PropertyItem propertyItem) {
      var textBox = new TextBox();
      var _binding = new Binding("Value");
      _binding.Source = propertyItem;
      _binding.ValidatesOnExceptions = true;
      _binding.ValidatesOnDataErrors = true;
      _binding.Mode = BindingMode.TwoWay;
      _binding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged;
      BindingOperations.SetBinding(textBox, TextBox.TextProperty, _binding);
      return textBox;
   }
}

public class ViewModel {
   [Category("(General)")]
   [Editor(typeof(InstantUpdatingTextBox), typeof(InstantUpdatingTextBox))]
   public string Name {
      get { return _name; }
      set
      {
         _name = value;
         RaisePropertyChanged(() => Name);
      }
   }
}

Now we see changes everywhere as we type the new value. Got to love WPF and its DataBinding. 😉

About erictummers

Working in a DevOps team is the best thing that happened to me. I like challenges and sharing the solutions with others. On my blog I’ll mostly post about my work, but expect an occasional home project, productivity tip and tooling review.
This entry was posted in Development and tagged , . Bookmark the permalink.

1 Response to WPF Toolkit PropertyGrid direct update

  1. Pingback: WPF Toolkit DateTimePicker customisation of header | .NET Development by Eric

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.