UWP Bind Child to Grid within Parent Grid - xaml

Question

How do I bind the properties of a grid of child objects within a grid of parent objects? I wish to display the components of a product within a grid of products, but I get this error:
BindingExpression path error: 'Product' property not found on 'Orders.Product'. BindingExpression: Path='Product.ComponentDescription' DataItem='Orders.Product'; target element is 'Windows.UI.Xaml.Controls.TextBox' (Name='null'); target property is 'Text' (type 'String')How do I display a list of components for each product by nesting a Components grid within a Products grid?
The Models and ViewModel look like this
namespace Orders
{
public class Order
{
public List<Product> Products { get; set; }
}
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 string ComponentCode { get; set; }
public string ComponentDescription { get; set; }
public override string ToString()
{
return this.ComponentCode;
}
}
public class OrderPageViewModel
{
public ObservableCollection<Product> Products { get; set; } = new ObservableCollection<Product>();
public OrderPageViewModel()
{
List<Component> componentList = new List<Component>()
{
new Component { ComponentCode="C1", ComponentDescription="Component One"},
new Component { ComponentCode="C2", ComponentDescription="Component Two"},
new Component { ComponentCode="C3", ComponentDescription="Component Three"}
};
Products = new ObservableCollection<Product>()
{
new Product {ProductCode="P1", ProductDescription="Product One", Components=componentList },
new Product {ProductCode="P2", ProductDescription="Product Two", Components=componentList },
new Product {ProductCode="P3", ProductDescription="Product Three", Components=componentList }
};
}
}
}
EDIT 1: The Xaml looks like this
<Page
x:Class="Orders.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Orders"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.DataContext>
<local:OrderPageViewModel x:Name="OrderPageViewModel" />
</Page.DataContext>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListView
Name="ProductsList"
ItemsSource="{Binding Products}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:Product">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<TextBox Text="{Binding ProductCode}"></TextBox>
<TextBox Text="{Binding ProductDescription}"></TextBox>
</StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListView
Name="ComponentsList"
ItemsSource="{Binding Products.Components}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:Component">
<StackPanel>
<TextBox Text="{Binding Product.ComponentCode}"></TextBox>
<TextBox Text="{Binding Product.ComponentDescription}"></TextBox>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Page>
If I remove the grid of components, the products display correctly. How do I correctly bind the properties of components?

Answer 1

To display list you need to use ListView or any other ItemsControl. Here is the code snippet for the same
<ListView
Name="ComponentsList"
ItemsSource="{Binding Components}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:Component">
<StackPanel>
<TextBox Text="{Binding ComponentCode}"></TextBox>
<TextBox Text="{Binding ComponentDescription}"></TextBox>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>