Monish Koyott Monish Koyott - 2 months ago 24
C# Question

data binding in pivot element from 2 different sources using x:Bind

I need to bind my pivot header template to Course_Tab data and the gridview inside item template to Course_Products data using x:Bind. I have successfully completed the binding of the pivot header template but getting the item source for the gridview has been a bit difficult for me because of some datatemplate error.
Here is the code snippet:

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

What you actually want to do is to bind nested GridView inside Pivot. In your code, you bind a ItemsSource to the Pivot control and then you want to bind a collection to a GridView which is inside the Pivot item. So for the GridView's collection it is a nested collection.

To bind this, we need to change the data model of CourseList to add the Course_Products as one of the properties of CourseList like follows:

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

}

And the XAML code:

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

And sample for data source:

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