ItemsControl that contains bound ComboBox in ItemTemplate

Question

I've just stuck in a problem to bind collection in ItemsControl with ItemTeplate that contains bounded ComboBox.

In my scenario I need to "generate" form that includes textbox and combobox for each item in collection and let user to update items. I could use DataGrid for that but I'd like to see all rows in edit mode, so I use ItemsControl with custom ItemTemplate.

It's ok to edit textboxes but when you try to change any ComboBox, all other ComboBoxes in other rows will change too. Is it a bug or feature?

Thanks, Ondrej

Window.xaml

<Window x:Class="ComboInItemsControlSample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="480" Width="640">
<Window.Resources>

    <CollectionViewSource x:Key="cvsComboSource"
        Source="{Binding Path=AvailableItemTypes}" />

    <DataTemplate x:Key="ItemTemplate">
        <Border BorderBrush="Black" BorderThickness="0.5" Margin="2">
            <Grid Margin="3">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="20" />
                    <ColumnDefinition Width="1*" />
                </Grid.ColumnDefinitions>

                <TextBox Grid.Column="0" Text="{Binding Path=ItemValue}" />
                <ComboBox Grid.Column="2"
                          SelectedValue="{Binding Path=ItemType}"
                          ItemsSource="{Binding Source={StaticResource cvsComboSource}}"
                          DisplayMemberPath="Name"
                          SelectedValuePath="Value" />
            </Grid>
        </Border>
    </DataTemplate>

</Window.Resources>
<Grid>

    <ItemsControl ItemsSource="{Binding Path=SampleItems}"
                  ItemTemplate="{StaticResource ItemTemplate}"
                  Margin="10" />

</Grid>

Window.xaml.cs

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();

        DataContext = new ViewModel();
    }
}

public class ViewModel
{
    public ViewModel()
    {
        SampleItems = new List<SampleItem> {
            new SampleItem { ItemValue = "Value 1" },
            new SampleItem { ItemValue = "Value 2" },
            new SampleItem { ItemValue = "Value 3" }
        };

        AvailableItemTypes = new List<SampleItemType> {
            new SampleItemType { Name = "Type 1", Value = 1 },
            new SampleItemType { Name = "Type 2", Value = 2 },
            new SampleItemType { Name = "Type 3", Value = 3 },
            new SampleItemType { Name = "Type 4", Value = 4 }
        };
    }

    public IList<SampleItem> SampleItems { get; private set; }
    public IList<SampleItemType> AvailableItemTypes { get; private set; }
}

public class SampleItem : ObservableObject
{
    private string _itemValue;
    private int _itemType;

    public string ItemValue
    {
        get { return _itemValue; }
        set { _itemValue = value; RaisePropertyChanged("ItemValue"); }
    }
    public int ItemType
    {
        get { return _itemType; }
        set { _itemType = value; RaisePropertyChanged("ItemType"); }
    }
}

public class SampleItemType : ObservableObject
{
    private string _name;
    private int _value;

    public string Name
    {
        get { return _name; }
        set { _name = value; RaisePropertyChanged("Name"); }
    }
    public int Value
    {
        get { return _value; }
        set { _value = value; RaisePropertyChanged("Value"); }
    }
}

public abstract class ObservableObject : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected void RaisePropertyChanged(string propertyName) {
        var handler = PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }
}

Picture

here you can see the result on picture

Answer 1

I believe it's because you're binding to a CollectionViewSource, which tracks the current item. Try binding directly to your list instead, which won't track the current item

<ComboBox Grid.Column="2"
          SelectedValue="{Binding Path=ItemType}"
          DisplayMemberPath="Name"
          SelectedValuePath="Value"
          ItemsSource="{Binding RelativeSource={
              RelativeSource AncestorType={x:Type ItemsControl}}, 
              Path=DataContext.AvailableItemTypes}" />

Answer 2

While you have a combobox in each row, it doesnt see these comboboxes as being seperate. i.e. They are all using the same collection, and the same selectedValue, so when a value changes in one box, it changes in all of them.

The best way to fix this is to add the SampleItemType collection as a property on your SampleItem model and to then bind the combo box to that property.