WPF ComboBox editable field binding

Question

I am trying to display a ComboBox with a list of users by their names.

Say I have an object "Person" and it has properties "FirstName" and "LastName". I have successfully used DataBinding and IValueConverter to populate the ComboBox properly, but it is not displaying correctly in the editable field of the ComboBox (named cbPersons).

In code behind:

List<Person> persons = ... ; // Assume populated with data  
cbPersons.ItemsSources = persons;

In XAML:

<ComboBox.ItemTemplate>  
<DataTemplate>  
          ...       // Code for Multibinding "FirstName" and "LastName" to TextBox  
</DataTemplate>  
</ComboBox.ItemTemplate>

When I launch the window everything displays correctly in the ComboBox dropdown list. And I have the ComboBox.Text set to a string I wanted. However when I select a value, instead of displaying the appropriate string it just displays "Person", which makes sense since that's the object it contains.

My question is how do I make the editable field display properly like the rest of the dropdowns?

I thought about using the same binding on ComboBox.SelectedItem or ComboBox.Text but they didn't seem to work.

SOLUTION:

So I found out the real reason why it didn't work was that I had set IsEditable = false. After changing that back everything works fine.

Answer 1

First off, I'd recommend using a MVVM (Model-View-ViewModel) approach - instead of using the back code - which works really well with WPFs Binding technology. After that, the general strategy is to create a collection of objects and bind the collection to the combobox. The collection should contain a type who's properties the ComboBoxItem template can bind to. Your code would look something like this:

public class PersonViewModel : INotifyPropertyChanged
{
    public string First { get; set; }
    public string Last { get; set; }

    // Implement INotifyPropertyChanged
}


public class MyComboSample : Window
{
    public ObservableCollection<PersonViewModel> People {get; set;}

    public MyComboSample()
    {
        People = new ObservableCollection<PersonViewModel>();
        People.Add(new Person{First="Foo", Last="Bar"});
        DataContext = this;
        InitializeComponents();
    }
}

<!-- XAML Window -->
<ComboBox ItemsSource="{Binding People}">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding First}"/>
                <TextBlock Text="{Binding Last}"/>
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

Answer 2

You can try this way to display fullname on editable combobox when an item selected :

in Person class add read only property to return full name :

......
public string FullName { get { return FirstName + " " + LastName; } }
......

then set TextPath property of ComboBox to FullName :

<ComboBox TextSearch.TextPath="FullName"
    ......
    />