Binding forms ComboBox to DataTable DataContext

Question

I'm usually able to solve my problems with about five minutes of searching but this one has taken several days with no results, so I'll try posing the question.

I have a Form whose DataContext is set to a datatable (would prefer LINQ to SQL but I am stuck w/ Sybase which lacks good support for modern entity frameworks.) I have a combo box sourced by another datatable that should update a column on the forms data table but I can't seem to get the binding for SelectedValue to work correctly.

I get a binding error in my Output window which I am unsure how to resolve but it points to the cause of the problem:

System.Windows.Data Error: 40 : BindingExpression path error: 'color' property not found on 'object' ''DataTable' (HashCode=1796783)'. BindingExpression:Path=color; DataItem='DataTable' (HashCode=1796783); target element is 'ComboBox' (Name='cboColor'); target property is 'SelectedValue' (type 'Object')

I've created a sample app that recreates the problem and provide the Xaml and code behind here

Thanks in advance for your help

<Window x:Class="WPFTestBed.ComboTest"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ComboTest" Height="300" Width="300"
    Loaded="OnLoad">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="126*" />
        <ColumnDefinition Width="152*" />
    </Grid.ColumnDefinitions>
    <DataGrid AutoGenerateColumns="False" Height="243" Margin="8,6,0,0" Name="dgList" VerticalAlignment="Top" CanUserAddRows="False" ItemsSource="{Binding}" SelectionChanged="dgList_SelectionChanged"> 
        <DataGrid.Columns>
            <DataGridTextColumn Header="Name" IsReadOnly="True" Binding="{Binding Path=name}" Width="*"/>
            <DataGridTextColumn Header="Color" IsReadOnly="True" Binding="{Binding Path=color}" Width="Auto"/>
        </DataGrid.Columns>
    </DataGrid>
    <Grid Grid.Column="1" Height="207" HorizontalAlignment="Left" Margin="6,6,0,0" Name="grdSelection" VerticalAlignment="Top" Width="140" DataContext="{Binding}">
        <TextBlock Height="23" HorizontalAlignment="Left" Margin="6,6,0,0" Name="textBlock1" Text="{Binding Path=name}" VerticalAlignment="Top" />
        <TextBlock Height="23" HorizontalAlignment="Left" Margin="6,27,0,0" Name="textBlock2" Text="{Binding Path=color}" VerticalAlignment="Top" />
        <ComboBox Height="23" HorizontalAlignment="Left" Margin="6,56,0,0" Name="cboColor" VerticalAlignment="Top" Width="120" 
                  ItemsSource="{Binding}" DisplayMemberPath="colorName" SelectedValuePath="colorName" SelectedValue="{Binding Path=color}" />
    </Grid>
    <Button Content="_Save" Grid.Column="1" Height="23" HorizontalAlignment="Right" Margin="0,0,6,12" Name="btnSave" VerticalAlignment="Bottom" Width="75" Click="btnSave_Click" />
</Grid>

Code behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Data;

namespace WPFTestBed
{
    /// <summary>
    /// Interaction logic for ComboTest.xaml
    /// </summary>
    public partial class ComboTest : Window
    {
        public ComboTest()
        {
            InitializeComponent();
        }


        private DataTable getList()
        {
            DataTable dt = new DataTable();
            DataRow row;

            dt.Columns.Add(new DataColumn("name"));
            dt.Columns.Add(new DataColumn("color"));

            row = dt.NewRow(); row["name"] = "abe";  row["color"] = "Red"; dt.Rows.Add(row);
            row = dt.NewRow(); row["name"] = "bob"; row["color"] = "Yellow"; dt.Rows.Add(row);
            row = dt.NewRow(); row["name"] = "chuck"; row["color"] = "Blue"; dt.Rows.Add(row);
            row = dt.NewRow(); row["name"] = "doug"; row["color"] = "Red"; dt.Rows.Add(row);
            row = dt.NewRow(); row["name"] = "eddie"; row["color"] = "Yellow"; dt.Rows.Add(row);
            row = dt.NewRow(); row["name"] = "fred"; row["color"] = "Blue"; dt.Rows.Add(row);
            return dt;
        }

        private DataTable getColors()
        {
            DataTable dt = new DataTable();
            DataRow row;
            dt.Columns.Add(new DataColumn("colorName"));
            row = dt.NewRow(); row["colorName"] = "Red"; dt.Rows.Add(row);
            row = dt.NewRow(); row["colorName"] = "Yellow"; dt.Rows.Add(row);
            row = dt.NewRow(); row["colorName"] = "Blue"; dt.Rows.Add(row);
            return dt;
        }

        private void OnLoad(object sender, RoutedEventArgs e)
        {
            dgList.DataContext = getList();
            cboColor.DataContext = getColors();
        }

        private void dgList_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            // Get the selected Item
            DataRowView selectedRow = (DataRowView)dgList.SelectedCells[0].Item;

            //For Illustrative purposes - in "real life" the data table used for the DataContext would come from the database
            DataTable dt = new DataTable();
            dt.Columns.Add(new DataColumn("name"));
            dt.Columns.Add(new DataColumn("color"));
            DataRow row = dt.NewRow(); row["name"] = selectedRow["name"].ToString();  row["color"] = selectedRow["color"]; dt.Rows.Add(row);

            // Set the data context for the form
            grdSelection.DataContext = dt;
        }

        private void btnSave_Click(object sender, RoutedEventArgs e)
        {
            DataTable dt = (DataTable)grdSelection.DataContext;
            // dt is not updated by combobox binding as expected
        }            
    }
}

Answer 1

Your ComboBox SelectedValue binding should be bound to colorName.

XAML:

<ComboBox Height="23" HorizontalAlignment="Left" Margin="6,56,0,0" Name="cboColor" 
        VerticalAlignment="Top" Width="120" ItemsSource="{Binding}" 
        DisplayMemberPath="colorName" SelectedValuePath="colorName" 
        SelectedValue="{Binding Path=colorName}" />

Answer 2

The problem is that when you bind the list to the colors, the data context gets screwed up:

 cboColor.DataContext = getColors();

Need to keep the ComboBox's data context bound to the DataTable. In the example app, you could do by setting the items source directly and leaving its data context alone:

cboColor.ItemsSource = getColors().AsDataView();