Xaml UWP将子网格绑定到父网格中的网格

如何在父对象网格中绑定子对象网格的属性？我希望在产品网格中显示产品的组件，但出现以下错误：

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?

模型和ViewModel如下所示

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

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

名称空间顺序
{
公共阶级秩序
{
公共列表产品{get；set；}
}
公共类产品
{
公共字符串ProductCode{get；set；}
公共字符串ProductDescription{get；set；}
公共列表组件{get；set；}
公共重写字符串ToString（）
{
返回此.ProductCode；
}
}
公共类组件
{
公共字符串组件代码{get；set；}
公共字符串组件描述{get；set；}
公共重写字符串ToString（）
{
返回此.ComponentCode；
}
}
公共类OrderPageViewModel
{
公共ObservableCollection产品{get；set；}=new ObservableCollection（）；
public OrderPageViewModel（）
{
列表组件列表=新列表（）
{
新组件{ComponentCode=“C1”，ComponentDescription=“Component One”}，
新组件{ComponentCode=“C2”，ComponentDescription=“Component Two”}，
新组件{ComponentCode=“C3”，ComponentDescription=“Component Three”}
};
Products=新的ObservableCollection（）
{
新产品{ProductCode=“P1”，ProductDescription=“Product One”，Components=componentList}，
新产品{ProductCode=“P2”，ProductDescription=“产品二”，Components=componentList}，
新产品{ProductCode=“P3”，ProductDescription=“产品三”，Components=componentList}
};
}
}
}

编辑1:Xaml如下所示

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

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

---

如果删除组件网格，则产品将正确显示。如何正确绑定组件的属性？

要显示列表，需要使用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>

---

要显示列表，您需要使用ListView或任何其他Items控件。下面是同样的代码片段

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

您应该尝试

{Binding Components[0].ComponentCode}

谢谢@Archana的建议，但是

组件[1]会怎么样呢。。。组件[n-1]

？如果您需要查看所有项目，请使用ListView再次感谢@Archana。我添加了一个ListView Refer EDIT 1，但是出现了相同的错误，并且没有显示任何组件。产品按预期呈现。只需添加此

Text=“{Binding ComponentCode}”

Product

不是必需的，Listview绑定将是

ItemsSource=“{Binding Components}”

您应该尝试

{Binding Components[0]。ComponentCode}

谢谢@Archana的建议，但是

组件[1]会发生什么情况 ... 组件[n-1]

？如果您需要查看所有项目，请使用ListView再次感谢@Archana。我添加了一个ListView Refer EDIT 1，但是出现了相同的错误，并且没有显示任何组件。产品按预期呈现。只需添加此

Text=“{Binding Components code}”

Product

，Listview绑定将是

ItemsSource=“{Binding Components}”