Editable ComboBox

Question

I want to create an editable combo box with the following properties:

• Bind the text property to my data model.
• The data model can override changes in the graphical interface, even in the "Selection" section. For example. I can choose one, 2, 3 I choose 2, but some component is down when changing it to 3.

• Update data model on the following events:

  • Selection changed
  • Loss of focus
  • Enter a click (should behave just like a lost focus).

I was able to create such a control, but it is pretty ugly (using a lot of hacks), and I was hoping it would be easier there ...

Thanks in advance

Answer 1

Well, here's what I did, and it's not so ugly:

/// <summary> /// Editable combo box which updates the data model on the following: /// 1. Select## Heading ##ion changed /// 2. Lost focus /// 3. Enter or Return pressed /// /// In order for this to work, the EditableComboBox requires the follows, when binding: /// The data model value should be bounded to the Text property of the ComboBox /// The binding expression UpdateSourceTrigger property should be set to LostFocus /// eg in XAML: /// <PmsEditableComboBox Text="{Binding Path=MyValue, UpdateSourceTrigger=LostFocus}" /// ItemsSource="{Binding Path=MyMenu}"/> /// </summary> public class PmsEditableComboBox : ComboBox { /// <summary> /// Initializes a new instance of the <see cref="PmsEditableComboBox"/> class. /// </summary> public PmsEditableComboBox() : base() { // When TextSearch enabled we'll get some unwanted behaviour when typing // (ie the content is taken from the DropDown instead from the text) IsTextSearchEnabled = false; IsEditable = true; } /// <summary> /// Use KeyUp and not KeyDown because when the DropDown is opened and Enter is pressed /// We'll get only KeyUp event /// </summary> protected override void OnKeyUp(KeyEventArgs e) { base.OnKeyUp(e); // Update binding source on Enter if (e.Key == Key.Return || e.Key == Key.Enter) { UpdateDataSource(); } } /// <summary> /// The Text property binding will be updated when selection changes /// </summary> protected override void OnSelectionChanged(SelectionChangedEventArgs e) { base.OnSelectionChanged(e); UpdateDataSource(); } /// <summary> /// Updates the data source. /// </summary> private void UpdateDataSource() { BindingExpression expression = GetBindingExpression(ComboBox.TextProperty); if (expression != null) { expression.UpdateSource(); } } } 

Answer 2

The easiest way to do this is to use the UpdateSourceTrigger property for binding. You may not be able to exactly match your current behavior, but you may find that it is comparable.

The UpdateSourceTrigger property determines when the binding object updates the source. Different WPF controls have different default values ​​for this property when binding.

Here are your options:

UpdateSourceTrigger.Default = Allow target control to define UpdateSourceTrigger mode.

UpdateSourceTrigger.Explicit = Use only the update source when someone calls BindingExpression.UpdateSource ();

UpdateSourceTrigger.LostFocus = automatically update the binding source whenever the target loses focus. Thus, the change can be completed, and then the binding is updated after the user proceeds.

UpdateSourceTrigger.PropertyChanged = Whenever DependencyProperty on the target of a value change, the source is updated immediately. Most UserControls do not use this property by default because it requires more binding updates (there may be a performance issue).