Setting separate data binding for controls in User Control

Question

I am relatively new to WPF and I am attempting to design my first project using MVVM pattern.

Now I have the main window as my view.I have an user control on this.Now the user control has 2 expanders and each need to pull it's own data.

  <Expander Header="Electrical Components" Name="EC"
                  IsExpanded="True">
            <ItemsControl ItemsSource="{Binding ElecViewModel.ToolBoxItems }">
                ............
     <Expander Header="Structural Components" Name="SC"
                  IsExpanded="True">
            <ItemsControl ItemsSource="{Binding StructViewModel.ToolBoxItemsS}">
                .............

So I created 2 view models with the idea that I can do a data bind for each of the expanders. The idea is to pull some images under each expander. First expander I attach to this view model

public class ElecViewModel
{
    private List<ToolBoxData> toolBoxItems = new List<ToolBoxData>();
    public ElecViewModel()
    {           
        toolBoxItems.Add(new ToolBoxData("../Images/Inverter.jpg", typeof(InverterDesignerItemViewModel)));          
        toolBoxItems.Add(new ToolBoxData("../Images/Recombiner.jpg", typeof(RecombinerDesignerItemViewModel)));
    }
    public List<ToolBoxData> ToolBoxItems
    {
        get { return toolBoxItems; }
    }
  }

..And second one to this view model

public class StructViewModel
{
    private List<ToolBoxData> toolBoxItemsS = new List<ToolBoxData>();

    public StructViewModel()
    {

        toolBoxItemsS.Add(new ToolBoxData("../Images/SafetySwitch.jpg", typeof(SafetySwitchDesignerItemViewModel)));         
        toolBoxItemsS.Add(new ToolBoxData("../Images/ScadaPanel.jpg", typeof(ScadaDesignerItemViewModel)));
    }

    public List<ToolBoxData> ToolBoxItemsS
    {
        get { return toolBoxItemsS; }
    }
}

Now my first expander is getting loaded with the correct images.whereas the second one doesn't. The public list of the second view model does not get hit even though I have binded to it like the first list ? Is there an obvious reason for that ?I tried setting the binding source of second expander to first list and it gets populated suggesting the list I am creating for second one has some issue in getting binded to a control. Please suggest as i am not able to identify any obvious issue.

Answer 1

In your condition don't set the DataContext of your usercontrol explicitly. Assuming your MainViewModel has two properties for ViewModel instances ElecViewModel and StructViewModel. And MainViewModel is DataContext of your Window, you can bind these expanders like

<Expander Header="Electrical Components" Name="EC"
                  IsExpanded="True">
            <ItemsControl ItemsSource="{Binding ElecViewModel.ECData}">
            ............
<Expander Header="Structural Components" Name="SC"
                  IsExpanded="True">
            <ItemsControl ItemsSource="{Binding StructViewModel.SCData}">
            .............