UWP组合框的设置的ItemsSource到视图模型属性

Question

我想一个UWP ComboBox的的ItemsSource设置为视图模型的属性，但我得到一个错误：

Error: BindingExpression path error: 'componentsLookup' property not found on 'Orders.Component' 

XAML的相关位看起来像这样：

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

视图模型的相关位看起来是这样的：

public class OrderPageViewModel 
{ 
    public ObservableCollection<Product> Products { get; set; } = new ObservableCollection<Product>(); 
    public List<Component> componentsLookup = new List<Component>(); 

编辑1：的模型看起来像这样

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

我如何设置的ItemsSource到componentsLookup

Answer 1

嵌套的结合是你真正想做的事。由于ComboBox嵌套在ListView内，所以ComboBox的ItemsSource需要是ListView的子集合。 componentsLookup应该是代码片段中类Orders.Component的一个属性。您可以使用嵌套的源结构类似如下的结合：

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

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

更多细节请参考official data binding document。