How to bind an observable collection to Multiple user controls at runtime?

Question

Hi, I am stucked at the part where I have to bind a collection to a dynamic usercontrol. Scenario is something like this. I have a dynamic control, having a expander , datagrid, combobox and textbox, where combox and textbox are inside datagrid. There are already two collections with them. One is binded with combobox and another is binded with datagrid. When the item is changes in combox its respective value is set to its respective textbox, and so on. and this pair of value is then set to the collection binded with datagrid. A user can add multiple items.

Now the main problem is that all these things are happening inside a user control which is added dynamically, that is on button click event. A user can add desired numbers of user controls to the form. problem is coming in this situtaion. Say I have added 3 controls. Now in 1st one if i add a code to the collection then it gets reflected in the next two controls too, as they are binded with same collection. So, I want to know is there anyway to regenrate/rename the same collection so that the above condition should not arise.

Answer 1

It's hard to answer your question without seeing the bigger picture, however I have a feeling you are going about this the wrong way. It appears that you are adding instances of your user control directly from code. Instead of doing that, you should create some kind of ItemsControl in your XAML, and in its ItemTemplate have your user control. Bind that ItemsControl to a collection in your view model, and only manipulate that collection.

You should not be referring to visual controls in your view model or code behind. Whenever you find yourself referencing visual elements directly from code, it should raise a warning flag in your mind "Hey! There's a better way than that!"...

Example:

The view model:

public class ViewModel
{
    public ObservableCollection<MyDataObject> MyDataObjects { get; set; }

    public ViewModel()
    {
        MyDataObjects = new ObservableCollection<MyDataObject>
        {
            new MyDataObject { Name="Name1", Value="Value1" },
            new MyDataObject { Name="Name2", Value="Value2" }
        };
    }
}

public class MyDataObject
{
    public string Name { get; set; }
    public string Value { get; set; }
}

The window XAML fragment containing the list box and the data template:

<Window.Resources>
    ...
    <DataTemplate x:Key="MyDataTemplate">
        <local:MyUserControl/>
    </DataTemplate>
</Window.Resources>
...
<ListBox ItemsSource="{Binding MyDataObjects}" 
         ItemTemplate="{StaticResource MyDataTemplate}" 
         HorizontalContentAlignment="Stretch"/>

The user control:

<UniformGrid Rows="1">
    <TextBlock Text="{Binding Name}"/>
    <TextBlock Text="{Binding Value}" HorizontalAlignment="Right"/>
</UniformGrid>