使用x綁定來自2個不同來源的數據元素的數據綁定：綁定

Question

我需要使用x：綁定將我的數據透視頭模板綁定到Course_Tab數據和項目模板內部的gridview到Course_Products數據。我已經成功地完成了數據透視表頭模板的綁定，但是由於某些數據模板錯誤，獲取gridview的項目源對我來說有點困難。 這裏是代碼片段：

public ObservableCollection<CourseList> Course_Tab { get; set; } 
public ObservableCollection<Productdetails> Course_Products { get; set; } 


[DataContract] 
public class CourseList 
{ 
    [DataMember] 
    public int CourseID { get; set; } 
    [DataMember] 
    public string CourseCategoryCode { get; set; } 
    [DataMember] 
    public string BoardCode { get; set; } 
    [DataMember] 
    public string CourseCode { get; set; } 
    [DataMember] 
    public string CourseName { get; set; } 
    [DataMember] 
    public string CourseDisplayName { get; set; } 
    [DataMember] 
    public string CourseShortName { get; set; } 
} 

[DataContract] 
public class Productdetails 
{ 
    [DataMember] 
    public int ProductId { get; set; } 
    [DataMember] 
    public string ProductCode { get; set; } 
    [DataMember] 
    public string ProductName { get; set; } 
    [DataMember] 
    public string ProductDescription { get; set; } 
    [DataMember] 
    public string AcademicYearCode { get; set; } 
    [DataMember] 
    public string SubjectName { get; set; } 
    [DataMember] 
    public string Product_Type { get; set; } 
    [DataMember] 
    public string Product_Subtype { get; set; } 
    [DataMember] 
    public string SDcardsize { get; set; } 
    [DataMember] 
    public string Duration { get; set; } 
    [DataMember] 
    public string Graphics { get; set; } 
} 


<Pivot x:Name="Pivot1" ItemsSource="{x:Bind Course_Tab}" SelectionChanged="Pivot1_SelectionChanged"> 
       <Pivot.HeaderTemplate> 
        <DataTemplate x:DataType="data:CourseList"> 
         <TextBlock Text="{x:Bind CourseDisplayName}"/> 
        </DataTemplate> 
       </Pivot.HeaderTemplate> 

       <Pivot.ItemTemplate> 
        <DataTemplate> 
         <GridView ItemsSource="{x:Bind Course_Products}"> 
          <GridView.ItemTemplate> 
           <DataTemplate x:DataType="data:Productdetails"> 
            <Image Source="{x:Bind Graphics}"/> 
           </DataTemplate> 
          </GridView.ItemTemplate> 
         </GridView> 
        </DataTemplate> 
       </Pivot.ItemTemplate> 

      </Pivot> 

Answer 1

你真正想要做的是嵌套GridView控件綁定內樞紐。在您的代碼中，您將ItemsSource綁定到Pivot控件，然後您想要將集合綁定到Pivot項目內的GridView。所以對於GridView的集合，它是一個嵌套集合。

要結合這一點，我們需要改變的CourseList數據模型的Course_Products添加爲喜歡的CourseList屬性之一如下：

public class CourseList 
{ 
    [DataMember] 
    public int CourseID { get; set; } 
    [DataMember] 
    public string CourseCategoryCode { get; set; } 
    [DataMember] 
    public string BoardCode { get; set; } 
    [DataMember] 
    public string CourseCode { get; set; } 
    [DataMember] 
    public string CourseName { get; set; } 
    [DataMember] 
    public string CourseDisplayName { get; set; } 
    [DataMember] 
    public string CourseShortName { get; set; } 

    public ObservableCollection<Productdetails> Course_Products { get; set; } 

}

而XAML代碼：

<Pivot x:Name="Pivot1" ItemsSource="{x:Bind Course_Tab}" SelectionChanged="Pivot1_SelectionChanged"> 
    <Pivot.HeaderTemplate> 
     <DataTemplate x:DataType="local:CourseList"> 
      <TextBlock Text="{x:Bind CourseDisplayName}"/> 
     </DataTemplate> 
    </Pivot.HeaderTemplate> 
    <Pivot.ItemTemplate> 
     <DataTemplate x:DataType="local:CourseList"> 
      <GridView ItemsSource="{x:Bind Course_Products}"> 
       <GridView.ItemTemplate> 
        <DataTemplate x:DataType="local:Productdetails"> 
         <Image Source="{x:Bind Graphics}"/> 
        </DataTemplate> 
       </GridView.ItemTemplate> 
      </GridView> 
     </DataTemplate> 
    </Pivot.ItemTemplate> 
</Pivot> 

而樣品爲數據源：

Course_Tab = new ObservableCollection<CourseList> 
{ 
    new CourseList {CourseDisplayName="displayname1" ,Course_Products= new ObservableCollection<Productdetails> 
    { 
     new Productdetails {Graphics="Assets/caffe1.jpg" }, 
     new Productdetails {Graphics="Assets/caffe2.jpg" } 
    }}, 
    new CourseList {CourseDisplayName="displayname2" ,Course_Products= new ObservableCollection<Productdetails> 
    { 
      new Productdetails {Graphics="Assets/caffe1.jpg" } 
    }} 
};