使用樞軸

Question

我有2個列表。樞軸控件中的樞軸標題和樞軸項目的另一個列表。我無法如此綁定

下面是一個.cs部分。

public class ViewModel 
{ 
    List<Feed> feeds = new List<Feed>(); 

    public ViewModel() 
    { 
     GetArticlesListingData(); 
    } 

    public List<Feed> Feeds { get { return this.feeds; } } 

    private async Task GetArticlesListingData() 
    { 
     try 
     { 
      for (var k = 0; k < 6; k++) 
      { 
       Feed feed1 = new Feed(); 
       feed1.Title = "National" + k; 



       HttpRequestMessage request1 = new HttpRequestMessage(HttpMethod.Get, "FEEDURL"); 
       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(); 

       List<Article> articleList = new List<Article>(); 
       for (int i = 0; i < mainitemsCount; i++) 
       { 
        string strHeadline = rootObject1[i]["HeadLine"].ToString(); 
        articleList.Add(new Article 
        { 
         Title = rootObject1[i]["Abstract"].ToString(), 
         HeadLine = rootObject1[i]["HeadLine"].ToString() 
        }); 
       } 

       feed1.Articles = articleList; 
       feeds.Add(feed1); 

      } 
     } 
     catch (Exception ex) 
     { 

     } 
    } 
} 


public class Feed 
{ 
    public string Title { get; set; } 
    public List<Article> Articles { get; set; } 
} 

public class Article 
{ 
    public string Title { get; set; } 
    public string HeadLine { get; set; } 
} 

下面是我的XAML部分，

<Page.Resources> 
    <local:ViewModel x:Key="ViewModel" /> 
    <DataTemplate x:Key="headerTemplate"> 
     <TextBlock Text="{Binding Title}" /> 
    </DataTemplate> 
    <DataTemplate x:Key="pivotTemplate"> 
     <ListView Name="ListBox" ItemsSource="{Binding Articles}"> 
      <ListView.ItemTemplate> 
       <DataTemplate> 
        <StackPanel> 
         <TextBlock Text="{Binding Title}" /> 
         <TextBlock Text="{Binding HeadLine}"/> 
        </StackPanel> 
       </DataTemplate> 
      </ListView.ItemTemplate> 
     </ListView> 
    </DataTemplate> 
</Page.Resources> 

<Pivot DataContext="{StaticResource ViewModel}" x:Name="pivot" HeaderTemplate="{StaticResource headerTemplate}" ItemTemplate="{StaticResource pivotTemplate}" ItemsSource="{Binding Feeds}" ></Pivot> 

請指引我來解決這個問題。我想綁定數據如下圖像中的支點風格

Answer 1

這裏是工作示例。

首先，我建立了一個非常基本的視圖模型來同時存儲菜單條目和文章​​。它是帶有標題（菜單條目）和文章列表的Feed列表。

public class ViewModel : BindableBase 
{ 
    ObservableCollection<Feed> feeds = new ObservableCollection<Feed>(); 

    public ViewModel() 
    { 

    } 

    public async Task LoadFeeds() 
    { 
     var myFeeds = new ObservableCollection<Feed>(); 
     Feed feed1 = new Feed(); 
     feed1.Title = "Feed A"; 
     feed1.Articles = new List<Article>() { new Article() { Title = "Article 1", HeadLine = "Headline 1" }, 
     new Article() { Title = "Article 2", HeadLine = "Headline 2"}, 
     new Article() { Title = "Article 3", HeadLine = "Headline 3"}}; 
     myFeeds.Add(feed1); 

     Feed feed2 = new Feed(); 
     feed2.Title = "Feed B"; 
     feed2.Articles = new List<Article>() { new Article() { Title = "Article 4", HeadLine = "Headline 4" } }; 
     myFeeds.Add(feed2); 

     Feed feed3 = new Feed(); 
     feed3.Title = "Feed C"; 
     feed3.Articles = new List<Article>() { new Article() { Title = "Article 5", HeadLine = "Headline 5" }, 
     new Article() { Title = "Article 6", HeadLine = "Headline 6"}}; 
     myFeeds.Add(feed3); 

     Feeds = myFeeds; 
    } 

    public ObservableCollection<Feed> Feeds 
    { 
     get { return this.feeds; } 
     set 
     { 
      Set<ObservableCollection<Feed>>(ref this.feeds, value); 
     } 
    } 
} 

public class Feed 
{ 
    public string Title { get; set; } 
    public List<Article> Articles { get; set; } 
} 

public class Article 
{ 
    public string Title { get; set; } 
    public string HeadLine { get; set; } 
} 

public abstract class BindableBase : INotifyPropertyChanged 
{ 
    public event PropertyChangedEventHandler PropertyChanged; 

    public virtual bool Set<T>(ref T storage, T value, [CallerMemberName]string propertyName = null) 
    { 
     if (object.Equals(storage, value)) 
      return false; 

     storage = value; 
     this.RaisePropertyChanged(propertyName); 
     return true; 
    } 

    public virtual void RaisePropertyChanged([CallerMemberName]string propertyName = null) 
    { 
     if (Windows.ApplicationModel.DesignMode.DesignModeEnabled) 
      return; 

     var handler = PropertyChanged; 
     if (!object.Equals(handler, null)) 
     { 
      var args = new PropertyChangedEventArgs(propertyName); 
      handler.Invoke(this, args); 

     } 
    } 
} 

添加以下到您的瀏覽代碼隱藏：

protected async override void OnNavigatedTo(NavigationEventArgs e) 
{ 
    var viewModel = pivot.DataContext as ViewModel; 
    await viewModel.LoadFeeds(); 
} 

，然後將XAML爲樞軸控件。您需要指定HeaderTemplate和ItemTemplate。

<Page 
    x:Class="PivotApp.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:PivotApp" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 

    <Page.Resources> 
     <local:ViewModel x:Key="ViewModel" /> 
     <DataTemplate x:Key="headerTemplate"> 
      <TextBlock Text="{Binding Title}" /> 
     </DataTemplate> 
     <DataTemplate x:Key="pivotTemplate"> 
      <ListView Name="ListBox" ItemsSource="{Binding Articles}"> 
       <ListView.ItemTemplate> 
        <DataTemplate> 
         <StackPanel> 
          <TextBlock Text="{Binding Title}" /> 
          <TextBlock Text="{Binding HeadLine}"/> 
         </StackPanel> 
        </DataTemplate> 
       </ListView.ItemTemplate> 
      </ListView> 
     </DataTemplate> 
    </Page.Resources> 

    <Pivot DataContext="{StaticResource ViewModel}" x:Name="pivot" HeaderTemplate="{StaticResource headerTemplate}" ItemTemplate="{StaticResource pivotTemplate}" ItemsSource="{Binding Feeds}" > 
    </Pivot> 
</Page> 

最終的結果是：