BInding dynamic data to pivot header and pivot item

Question

I am trying to bind data dynamically to pivot header and item. Here is the coding how i am binding the data.

Class:

public class SubMenu
{
    public SubMenu()
    {
        TestList = new List<SubMenu>();
        ArticleDetails = new List<ArticleDetails>();
    }

    public string SectionId { get; set; }

    public string ParentSectionId { get; set; }

    public string TitleofAccess { get; set; }

    public string SMenu { get; set; }

    public string Headline { get; set; }

    public List<ArticleDetails> ArticleDetails { get; set; }

    public List<SubMenu> TestList { get; set; }
}

XAML.cs code:

private async Task GetArticlesListingData()
{
    try
    {
        var subMenuList = new DataModel.SubMenu();
        List<DataModel.ArticleDetails> detail = new List<DataModel.ArticleDetails>();

        HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Get, Constants.Constants.URL.LiveUrl + "/api/Menu/GetSubMenuList?parentSectionId=1");
        request.Headers.Add("UserAgent", "Windows 8 app client");
        HttpClient client = new HttpClient();
        HttpResponseMessage response = await client.SendAsync(request, HttpCompletionOption.ResponseHeadersRead);
        var result = await response.Content.ReadAsStringAsync();
        var rootObject = JArray.Parse(result);

        for (var i = 0; i < rootObject.Count; i++)
        {
            subMenuList.TestList.Add(new DataModel.SubMenu()
            {
                SMenu = rootObject[i]["Title"].ToString(),
                SectionId = rootObject[i]["SectionId"].ToString()                       
            });  
        }

        HttpRequestMessage request1 = new HttpRequestMessage(HttpMethod.Get, "http://52.70.18.77:84/api/News/NewsHome/Listing?recordCount=20&sectionName=National&districtName=chennai");
        request1.Headers.Add("UserAgent", "Windows 8 app client");
        request1.Headers.Accept.Add(new System.Net.Http.Headers.MediaTypeWithQualityHeaderValue("application/json"));
        request1.Headers.Add("Authorization", "bearer " + accessToken);

        HttpClient client1 = new HttpClient();
        HttpResponseMessage response1 = await client1.SendAsync(request1, HttpCompletionOption.ResponseHeadersRead);
        var result1 = await response1.Content.ReadAsStringAsync();
        result1 = Regex.Replace(result1, "<[^>]+>", string.Empty);
        var rootObject1 = JArray.Parse(result1);
        int mainitemsCount = rootObject1.Count();

        for (int i = 0; i < mainitemsCount; i++)
        {                    
            subMenuList.ArticleDetails.Add(new DataModel.ArticleDetails
            {
                Articleid = rootObject1[i]["ArticleId"].ToString(),
                Abstract = rootObject1[i]["Abstract"].ToString(),
                URL = rootObject1[i]["Url"].ToString(),
                HeadLine = rootObject1[i]["HeadLine"].ToString(),                       
            });                    
        }
        pivotSubMenu.ItemsSource = subMenuList;                
    }
    catch ()
    {  
    }
}

And here is my XAML code where I am trying to bind the data:

<Pivot x:Uid="Pivot" x:Name="pivotSubMenu"                                CommonNavigationTransitionInfo.IsStaggerElement="True"
       SelectionChanged="pivotSubMenu_SelectionChanged">
    <Pivot.HeaderTemplate>
        <DataTemplate>
            <ListView ItemsSource="{Binding TestList}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                     <TextBlock Text="{Binding SMenu}"/>
                    </DataTemplate>
                </ListView.ItemTemplate>                                        
            </ListView>                                    
        </DataTemplate>
    </Pivot.HeaderTemplate>
    <PivotItem>
        <ListView Background="Brown" ItemsSource="{Binding ArticleDetails}"
                  ItemTemplate="{StaticResource ArticlesLisitngTemplate}" Margin="-17 0 -15 0">
        </ListView>
    </PivotItem>                            
</Pivot>

resulting in the output of my Pivot

I want to bind the data from one list to header and other to PivotItem. Is there anything wrong in the code. I am not able to view data in the UI. And I am getting empty screen.

Please anyone suggest to proceed further.

Answer 1

I have posted an answer to a very similar issue here: Working with Pivot

Basically, you have to specify a template for HeaderTemplate and ItemTemplate attributes of your Pivot control.

Answer 2

Do

pivotSubMenu.DataContext = subMenuList; 

instead of

pivotSubMenu.ItemsSource = subMenuList;  

Pivot header code:

 <PivotItem>
   <PivotItem.Header>
     <ListView ItemsSource="{Binding TestList}">
       <ListView.ItemTemplate>
         <DataTemplate>
           <TextBlock Text="{Binding SMenu}"/>
         </DataTemplate>
       </ListView.ItemTemplate>                                        
     </ListView>   
   </PivotItem.Header>  
 </PivotItem>