Search code examples
c#wpfdata-bindingcomboboxwpf-controls

How to bind one ObservableCollection as ItemsSource to different comboBoxes (models) if using wpf ItemsControl with MVVM pattern?


I dynamically create a list of comboBoxes to different Models using wpf ItemsControl element using MVVM pattern. I want to have a logic like if i select an element in one of the comboBoxes, then in all the others it will not appear. I have difficulty with that when i use ItemsControl (ItemsSource - list of my Models) and create elements for it in VievModel - binding is not working, it works only when i have a comboBox items list for each of Models (Model class), not for all comboBoxes (in ViewModel class). Can i have, for example, 1 ObservableCollection for comboBox items in ViewModel and use also ItemsControl to create comboBoxes?

My View :

    <ItemsControl ItemsSource="{Binding Items}" Grid.Row="1">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"  />
                            <ColumnDefinition Width="*"  />
                        </Grid.ColumnDefinitions>
                        <Label  Content="{Binding Name}" Grid.Column="0" />
                        <ComboBox  ItemsSource="{Binding ComboBoxItems}" Grid.Column="1"  
                                   SelectedItem="{Binding SelectedItem}"/>
</Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

ViewModel:

public ObservableCollection<Model> Items { get; set; }

// if I add here public ObservableCollection<string> ComboBoxItems { get; set; } 
// binding isn't working, so I add it to Model class, but in it it does not work as I need.

public ViewModel()
{
Items = new ObservableCollection<Model>();
Items.Add(new Model {Name = "11111"});
Items.Add(new Model {Name = "22222"});
}

Model:

 public string Name
    {
        get { return _name; }
        set
        {
            _name = value;
            OnPropertyChanged("Name");
        }
    }
 public string SelectedItem
    {
        get { return _selectedItem; }
        set
        {
            _selectedItem = value;
            OnPropertyChanged("SelectedItem");
        }
    }

public ObservableCollection<string> ComboBoxItems {get;set;}

public Model()
{
ComboBoxItems = new ObservableCollection<string>();
ComboBoxItems.Add("q");
ComboBoxItems.Add("w");
ComboBoxItems.Add("e");
ComboBoxItems.Add("r");
ComboBoxItems.Add("t");
ComboBoxItems.Add("y");
}

Solution

  • 1 ObservableCollection for comboBox items in ViewModel and use also ItemsControl to create comboBoxes This means u wanna bind the same ObservableCollection to ur ItemsControl and ComboBox if not please let me know in comment

    Ans

       <ItemsControl ItemsSource="{Binding Items}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"  />
                                <ColumnDefinition Width="*"  />
                            </Grid.ColumnDefinitions>
                            <Label  Content="{Binding Name}" Grid.Column="0" />
                            <ComboBox  ItemsSource="{Binding Items ,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ItemsControl}}" Grid.Column="1"  
                                      DisplayMemberPath="Name" SelectedItem="{Binding SelectedItem}"/>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
    

    i Binded Items to ComboBox