Key Value Pair Combobox in WPF

11
votes

Consider I have Key Value Pair Collection (Ex Key=MSFT Value=MSFT Microsoft) which I bind to the ComboBox. DisplayMemeberPath=Value. the Following needs to be accomplished

  • On Selection of a Item only the Key needs to be displayed in Combo,

  • the user could also type a brand new value in the Combo.

I cant come up with the solution that supports both these features. Solving one breaks the other.

<ComboBox IsTextSearchEnabled="True" Name="cmbBrokers" IsEditable="True" 
ItemsSource="{Binding BrokerCodes}" SelectedValuePath="Key" 
 DisplayMemberPath="Value" Text="{Binding SelectedBroker, Mode=TwoWay}">
3
c#.netwpfxamlcombobox
You might try a separate textbox that displays the key of the selected item. Name the combobox and use it as the binding element source and the path is selecteditem. I think you use selecteditem.key to get to the key but I am not sure. - paparazzo
if you wanna see the new input the user entered, you have to update your itemssource (BrokerCodes) with the new value - blindmeis

3 Answers

35
votes

I guess what you're looking for is as follows.

public class ComboBoxPairs
{
    public string _Key { get; set; }
    public string _Value { get; set; }

    public ComboBoxPairs(string _key,string _value )
    {
        _Key = _key ;
        _Value = _value ;
    }
}

Then you go on and use this class like this

List<ComboBoxPairs> cbp = new List<ComboBoxPairs>();

cbp.Add(new ComboBoxPairs("Microsoft", "MSFT"));
cbp.Add(new ComboBoxPairs("Apple", "AAPL"));

And bind it to the combobox you have

cmbBrokers.DisplayMemberPath = "_Key";
cmbBrokers.SelectedValuePath = "_Value";

cmbBrokers.ItemsSource = cbp;

And When you need to access it just do this

ComboBoxPairs cbp = (ComboBoxPairs)cmbBrokers.SelectedItem;

string _key = cbp._Key;
string _value = cbp._Value;

This is all you need to do.

7
votes

Expanding on Adams example with a even more generic solution.

In the xaml.cs create a observable collection property and assign a collection to it. 

ObservableCollection < KeyValuePair < string , string > > MyCollection { get; set; }

MyCollection = new ObservableCollection < KeyValuePair < string , string > > ( ) 

{
   new KeyValuePair < string , string > ("key1" ,"value1"),
   new KeyValuePair < string , string > ("key2" ,"value2")
};

In the xaml file databind your observable collection to the property you created in the code behind.

<ComboBox Grid.Row="3"
          Grid.Column="1"
          ItemsSource="{Binding MyCollection}"
          DisplayMemberPath="Key" />

You can change the DisplayMemberPath="Key" to DisplayMemberPath="Value" if you wish to display the value instead.

-7
votes

I don't think a straight out of the box combobox is the proper UI element for you to use in this situation. The issue here is the combobox is not designed to support key/value pairs, especially if you want the user to be able to add values to the dictionary while you're binding to the key. For example, if you allow them to add a value, how do they add the key or the select the key to update?

I think the solution is to have two controls: a combobox for the key selection and a textbox for the value input. The values textbox is hidden until the user selects a key. Once the key is selected, have them enter their value input into the textbox and press enter or a button, then set the value to the selected key.