x：Bindを使用して2つの異なるソースからのピボット要素でのデータバインディング

Question

ピボットヘッダーテンプレートをCourse_Tabデータにバインドし、アイテムテンプレート内のgridviewをx：Bindを使用して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コントロールにバインドし、ピボットアイテム内の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" } 
    }} 
};