UWP將子對象綁定到父對象網格內

Question

如何在父對象網格內綁定子對象網格的屬性？我要的產品在網格中顯示產品的成分，但我得到這個錯誤：

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? 

模型和視圖模型看起來像這樣

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 } 
      }; 
     } 
    } 
} 

編輯1： XAML中看起來像這樣

<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> 

如果我刪除組件的網格，產品將正確顯示。我如何正確綁定組件的屬性？

Answer 1

要顯示列表，您需要使用ListView或任何其他ItemsControl。下面是同一

      <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>