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

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.

Always use observable collection when binding to the xaml view. It will update user interface when the source is updated — Eldho, Jun 16 '16 at 12:13
@eldho can u please explain in the example how to use observable collection in the to bind the data, i have not used it previously. Thank you. — Bhanuprakash Mankala, Jun 16 '16 at 12:47
ObservableCollection collection; This is observable collection of string you can create `ObservableCollection` http://stackoverflow.com/questions/4279185/what-is-the-use-of-observablecollection-in-net — Eldho, Jun 16 '16 at 13:10

score 1 · Answer 1 · edited Jun 10 '16 at 11:38

1

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>

edited Jun 10 '16 at 11:38

Jerry Jeremiah

9,045
2
23
32

answered Jun 10 '16 at 10:12

Chirag Shah

981
1
6
12

Thanks Chirag Shah. It is working for pivotitem. But the problem is in PivotHeader.I am having a count of 5 in the list but in UI showing only the item which is first in the list. Is there a way to bind all the data in the PivotHeader. Thank you in advance. – Bhanuprakash Mankala Jun 10 '16 at 10:23
I think we cannot declare Header inside PivotItem as you edited in the code.. – Bhanuprakash Mankala Jun 10 '16 at 11:17
ohh,sorry! made the chages. – Chirag Shah Jun 10 '16 at 11:21
even after the changes also i am not getting the header list. I have attached screenshot of my output in the question, please look into it. In the header list i have count of 5, but i am able to bind only first item. – Bhanuprakash Mankala Jun 10 '16 at 11:34

score 1 · Answer 2 · edited May 23 '17 at 12:32

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.

edited May 23 '17 at 12:32

Community

1
1

answered Jun 16 '16 at 11:30

Arnaud Develay

3,920
2
15
27

ok thanks @Arnaud. Let me check the code with my application and will let u know the outcome. – Bhanuprakash Mankala Jun 16 '16 at 12:49

BInding dynamic data to pivot header and pivot item

2 Answers2