Binding 2 ComboBox to a Dictionary, then binding the ComboBoxes to each other

Question

I have a Dictionary of int to char (decimal & ASCII character associated with that int). I want to have two editable combo boxes that are pre-populated with the initial values. If the user selected a value from ComboBox “A” (the dict key) I want the dict value to be populated in ComboBox “B” – and vice versa.

It’s relatively easy to pre-populate the initial values into ComboBoxes “A” & “B”. It’s the two-way binding that’s stumped me.

Here is the VM where I populate the Dictionary:

    private void InitializeSpearatorsDictionaries()
    {
        // comma, semicolon, vertical pipe, tilda
        int[] fields = { 44, 59, 124, 126 };
        foreach (int f in fields)
        {
            FieldDict.Add(f, Convert.ToChar(f));
        }
    }
    public IDictionary<int, char> FieldDict
    {
        get
        {
            if (_fieldDict == null)
            {
                _fieldDict = new Dictionary<int, char>();
            }
            return _fieldDict;
        }
    }

Here is the initial XAML where I bind to the Dictionary (still, no problems)

<StackPanel>
<ComboBox x:Name="cbFieldChar" ItemsSource="{Binding Path=FieldDict}" SelectedIndex="0" DisplayMemberPath="Key" SelectedValuePath="Value" IsEditable="True" />
<ComboBox x:Name="cbFieldDecimal" ItemsSource="{Binding Path=FieldDict}" SelectedIndex="0" DisplayMemberPath="Value" SelectedValuePath="Key" IsEditable="True" />
</StackPanel>

Initially, i had the ItemsSource = {Binding Path=FIeldDict.Keys} and {Binding Path=FieldDict.Values}, in which case I didn't need the DisplayMemberPath and SelectedValuePath attributes, but with trying to get two-way working, I reworked it (both approaches work with the initial loading of the dictionary).

Here's the latest attempt at getting two-way between the two ComboBoxes working

<StackPanel>
<ComboBox x:Name="cbFieldChar" ItemsSource="{Binding Path=FieldDict}" SelectedIndex="0" DisplayMemberPath="Key" SelectedValuePath="Value" IsEditable="True" />
<ComboBox x:Name="cbFieldDecimal" ItemsSource="{Binding Path=FieldDict}" SelectedIndex="0" DisplayMemberPath="Value" SelectedValuePath="Key" IsEditable="True" SelectedValue="{Binding ElementName=cbFieldChar, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Path=ItemsSource.Value}" />
</StackPanel>

Any ideas?
Thanks in advance,
--Ed

Answer 1

I figured part of it out. The following will work to synchronize the two ComboBoxes with the values that already exist in them.

<ComboBox x:Name="cbFieldChar" ItemsSource="{Binding Path=FieldDict}" SelectedIndex="0" DisplayMemberPath="Value" SelectedValuePath="Key" IsEditable="True" />
<ComboBox x:Name="cbFieldDecimal" ItemsSource="{Binding Path=FieldDict}" SelectedIndex="0" DisplayMemberPath="Key" SelectedValuePath="Value" IsEditable="True" SelectedValue="{Binding ElementName=cbFieldChar, Path=SelectedValue}" />

I'm gonna try to work on a ValueConverter to get the editable aspect going.