Building an Editable ComboBox for WPF

Let's say we want to have in our WPF application an Editable ComboBox in which the user can select an item, but also type some free text. Unfortunately this is a little bit more work than setting the IsEditable property of a ComboBox to true. A standard ComboBox falls short if e.g. we want to make sure that -when binding is used- the source is updated at the expected moments, or when we want to apply a maximum length to the input. And while a ComboBox is supposed to be a combination of a TextBox and a DropDown (hence its name Combo), in WPF's standard implementation the TextBox is kept internal.

This little class shows you how you can control the binding updates and make inner TextBox properties accessible:

//-----------------------------------------------------------------------

// <copyright file="EditableComboBox.cs" company="DockOfTheBay">

//     http://www.dotbay.be

// </copyright>

// <summary>Defines the EditableComboBox class.</summary>

//-----------------------------------------------------------------------

namespace DockOfTheBay

{

    using System.ComponentModel;

    using System.Windows;

    using System.Windows.Controls;

    using System.Windows.Data;

    using System.Windows.Input;

    /// <summary>

    /// Editable combo box which updates its data source on the following events:

    /// - Selection changed (e.g. via the DropDown)

    /// - Lost focus (e.g. after Tab Key)

    /// - Enter or Return pressed.

    /// </summary>

    /// <remarks>

    /// To work properly, this EditableComboBox assumes/requires the following about its binding:

    /// - The data source should be bound to the Text property of the ComboBox (not SelectedValue)

    /// - The binding expression UpdateSourceTrigger property should be set to LostFocus

    /// </remarks>

    public class EditableComboBox : ComboBox

    {

        /// <summary>

        /// The Maximum Length of the TextBox's content.

        /// </summary>

        /// <remarks>

        /// It's implemented as a Dependency Property, so you can set it in XAML 

        /// </remarks>

        public static readonly DependencyProperty MaxLengthProperty =

            DependencyProperty.Register(

                "EditableTextBox",

                typeof(int),

                typeof(EditableComboBox),

                new UIPropertyMetadata(int.MaxValue));

        /// <summary>    

        /// Initializes a new instance of the <see cref="EditableComboBox"/> class.    

        /// </summary>    

        public EditableComboBox()

        {

            // Avoid non-intuitive behavior

            this.IsTextSearchEnabled = false;

            this.IsEditable = true;

        }

        /// <summary>

        /// Gets or sets the maximum length of the text in the EditableTextBox.

        /// </summary>

        /// <value>The maximum length of the text in the EditableTextBox.</value>

        [Description("Maximum length of the text in the EditableTextBox.")]

        [Category("Editable ComboBox")]

        [DefaultValue(int.MaxValue)]

        public int MaxLength

        {

            [System.Diagnostics.DebuggerStepThrough]

            get

            {

                return (int)this.GetValue(MaxLengthProperty);

            }

            [System.Diagnostics.DebuggerStepThrough]

            set

            {

                this.SetValue(MaxLengthProperty, value);

                this.ApplyMaxLength();

            }

        }

        /// <summary>

        /// Gets a reference to the internal editable textbox.

        /// </summary>

        /// <value>A reference to the internal editable textbox.</value>

        /// <remarks>

        /// We need this to get access to the real MaxLength.

        /// </remarks>

        protected TextBox EditableTextBox

        {

            get

            {

                return this.GetTemplateChild("PART_EditableTextBox") as TextBox;

            }

        }

        /// <summary>

        /// Makes sure that the design time settings are applied when the control 

        /// becomes operational. If the MaxLength setter is called too early, we miss

        /// the assignment.

        /// </summary>

        /// <remarks>

        /// This feels like a hack, but

        /// - OnInitialized is fired too early

        /// - OnRender in fired too often

        /// </remarks>

        public override void OnApplyTemplate()

        {

            base.OnApplyTemplate();

            this.ApplyMaxLength();

        }

        /// <summary>    

        /// Updates the Text property binding when the user presses the Enter key.  

        /// </summary>

        /// <remarks>

        /// KeyDown is not raised for Arrows, Tab and Enter keys.

        /// They are swallowed by the DropDown if it is open.

        /// So use the KeyUp instead.   

        /// </remarks>

        /// <param name="e">A Key EventArgs.</param>

        protected override void OnKeyUp(KeyEventArgs e)

        {

            base.OnKeyUp(e);

            if (e.Key == Key.Return || e.Key == Key.Enter)

            {

                this.UpdateDataSource();

            }

        }

        /// <summary>    

        /// Updates the Text property binding when the selection changes. 

        /// </summary>

        /// <param name="e">A SelectionChanged EventArgs.</param>

        protected override void OnSelectionChanged(SelectionChangedEventArgs e)

        {

            base.OnSelectionChanged(e);

            this.UpdateDataSource();

        }

        /// <summary>

        /// Applies the MaxLength value to the EditableTextBox.

        /// </summary>

        private void ApplyMaxLength()

        {

            if (this.EditableTextBox != null)

            {

                this.EditableTextBox.MaxLength = this.MaxLength;

            }

        }

        /// <summary>    

        /// Updates the data source.

        /// </summary>    

        private void UpdateDataSource()

        {

            BindingExpression expression = GetBindingExpression(ComboBox.TextProperty);

            if (expression != null)

            {

                expression.UpdateSource();

            }

        }

    }

}

You have now access to the MaxLength property, even from XAML:

<local:EditableComboBox x:Name="EditableComboBox1" 

                        Text="{Binding Value, UpdateSourceTrigger=LostFocus}"  

                        MaxLength="15" />