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

时间:2016-11-30 01:57:07

标签: xaml uwp uwp-xaml

如何在父对象的网格中绑定子对象网格的属性?我希望在产品网格中显示产品的组件,但是我收到了这个错误:

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

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

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

1 个答案:

答案 0 :(得分: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>