项未绑定到Windows Phone 8.1 Pivot项

Question

I cannot bind the list to the pivot items. Please guide me to solve this.

Below is my design part (.xaml)

 <Page.Resources>
        <ViewModels:ArticleViewModel x:Key="ViewModel" />
        <DataTemplate x:Key="headerTest">
            <TextBlock Text="{Binding HeadLine}" FontSize="16"/>
        </DataTemplate>
        <DataTemplate x:Key="pivotTemplate">
            <StackPanel>
                <Grid>
                    <TextBlock Text="Test"></TextBlock>
                    <Image Source="{Binding ImageURL}" ></Image>
                    <Grid>
                        <Border VerticalAlignment="Bottom" Height="65" Background="Black" Opacity="0.5">
                        </Border>
                        <TextBlock Text="{Binding HeadLine}" VerticalAlignment="Bottom" Margin="5 0 0 15" TextWrapping="Wrap" FontSize="{ThemeResource ContentControlFontSize}" Foreground="White" FontWeight="Bold" />
                    </Grid>
                </Grid>
            </StackPanel>
        </DataTemplate>
    </Page.Resources>
    <Page.BottomAppBar>
        <CommandBar>
            <CommandBar.PrimaryCommands>                
                <AppBarButton x:Uid="Share">
                    <AppBarButton.Icon>
                        <BitmapIcon UriSource="/Assets/Share.png"/>
                    </AppBarButton.Icon>
                </AppBarButton>
                <AppBarButton Icon="Favorite"/>
                <AppBarButton Icon="Comment"></AppBarButton>
            </CommandBar.PrimaryCommands>
        </CommandBar>
    </Page.BottomAppBar>

    <Grid Background="Gray">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="60"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>

            <Grid Grid.Row="0">
                <Image Source="Assets/Maalaimalar_logo.png" HorizontalAlignment="Center" Margin="1 5 0 0"></Image>
            </Grid>

            <ScrollViewer Grid.Row="1">
                <Pivot DataContext="{StaticResource ViewModel}" x:Name="pivot" 
                                 HeaderTemplate="{StaticResource headerTest}" 
                       ItemTemplate="{StaticResource pivotTemplate}" ItemsSource="{Binding articlesList}">
                </Pivot>
            </ScrollViewer>
        </Grid>
    </Grid>

Below is my code behind(.xaml.cs)

 protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            data = e.Parameter as Feed;
            List<Article> feedList = new List<Article>();
            feedList = data.Articles;
            var viewModel = pivot.DataContext as ArticleViewModel;
            viewModel.BindListToView(feedList);
        }

Below is my ArticleViewModel

public class ArticleViewModel : BindableBase
    {
        ObservableCollection<Article> articlesList = new ObservableCollection<Article>();

        public ArticleViewModel()
        {

        }

        public void BindListToView(List<Article> articleList)
        {
            articlesList = new ObservableCollection<Article>(articleList);
        }

        /// <summary>
        /// 
        /// </summary>
        public ObservableCollection<Article> Articles
        {
            get { return this.articlesList; }
            set
            {
                Set<ObservableCollection<Article>>(ref this.articlesList, value);
            }
        }
    }

Below is the class Article

public class Article
    {
        /// <summary>
        /// 
        /// </summary>
        public string Title { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public string HeadLine { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public string ImageURL { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public string Abstract { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public string ArticleDetail { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public string ArticleId { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public Article()
        {

        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="title"></param>
        /// <param name="headline"></param>
        /// <param name="imageURL"></param>
        /// <param name="articleAbstract"></param>
        /// <param name="articleDetail"></param>
        public Article(string title, string headline, string imageURL, string articleAbstract, string articleDetail, string articleId)
        {
            Title = title;
            HeadLine = headline;
            ImageURL = imageURL;
            Abstract = articleAbstract;
            ArticleDetail = articleDetail;
            ArticleId = articleId;
        }
    }

It doesn't bind to the pivot item. Please guide me what i'm wrong

Answer 1

I can see 2 issues:

On the Binding to Pivot.ItemsSource , the binding should be on the property not on the class field:

ItemsSource="{Binding Articles}

BindListToView method should set the new list on the property, not on the internal fields of the class in order to trigger the PropertyChanged event.

public void BindListToView(List<Article> articleList)
{
    Articles = new ObservableCollection<Article>(articleList);
}