Set ItemsSource of UWP ComboBox to ViewModel Property - xaml

Question

I am trying to set the ItemsSource of a UWP ComboBox to a property of the ViewModel, but I get an error:
Error: BindingExpression path error: 'componentsLookup' property not found on 'Orders.Component'
The relevant bit of XAML looks like this:
<Page.DataContext>
<local:OrderPageViewModel x:Name="OrderPageViewModel" />
</Page.DataContext>
<ListView
Name="ComponentsList"
ItemsSource="{Binding Components}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ComboBox
ItemsSource="{Binding componentsLookup,Mode=TwoWay}"
DisplayMemberPath="ComponentCode"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The relevant bit of the ViewModel looks like this:
public class OrderPageViewModel
{
public ObservableCollection<Product> Products { get; set; } = new ObservableCollection<Product>();
public List<Component> componentsLookup = new List<Component>();
Edit 1: The models look like this
public class Product
{
public string ProductCode { get; set; }
public string ProductDescription { get; set; }
public List<Component> Components { get; set; }
public override string ToString()
{
return this.ProductCode;
}
}
public class Component
{
public Guid ComponentId { get; set; }
public Product Product { get; set; }
public string ComponentCode { get; set; }
public string ComponentDescription { get; set; }
public string ComponentColor { get; set; }
public decimal ComponentHeight { get; set; }
public decimal ComponentWidth { get; set; }
public override string ToString()
{
return this.ComponentCode;
}
}
How do I set the ItemsSource to componentsLookup

Answer 1

Nested binding is what you actually want to do. Since the ComboBox is nested inside the ListView, ItemsSource of ComboBox need to be a sub collection of ListView. componentsLookup should be a property of class Orders.Component in your code snippet. You can use a nested source structure like follows for binding:
public class OrderPageViewModel
{
public ObservableCollection<Product> Products { get; set; } = new ObservableCollection<Product>()
{
new Product
{
productname="productname",
componentsLookup=new List<Component>
{
new Component {componentname="test1" },
new Component {componentname="test2" }
}
},
new Product
{
componentsLookup=new List<Component>
{
new Component {componentname="test1" },
new Component {componentname="test2" }
}
}
};
}
public class Component
{
public string componentname { get; set; }
}
public class Product
{
public string productname { get; set; }
public List<Component> componentsLookup { get; set; }
}
XAML Code
<Page.DataContext>
<local:OrderPageViewModel x:Name="OrderPageViewModel" />
</Page.DataContext>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" >
<ListView Name="ComponentsList" ItemsSource="{Binding Products}" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding productname}"></TextBlock>
<ComboBox DisplayMemberPath="ComponentCode" ItemsSource="{Binding componentsLookup, Mode=TwoWay}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
More details please reference the official data binding document.