c# - Pagination in ListView (UWP)

Question

I have UWP where I have ListView on xaml.

Here is code how I receive json, set it to List

 public class TopPostsViewModel : INotifyPropertyChanged
{
    private List<Child> postsList;

    public List<Child> PostsList
    {
        get { return postsList; }
        set { postsList = value; OnPropertyChanged(); }
    }

    public TopPostsViewModel()
    {
        Posts_download();
    }


    public async void Posts_download()
    {
        string url = "https://www.reddit.com/top/.json?count=50";

        var json = await FetchAsync(url);


        RootObject rootObjectData = JsonConvert.DeserializeObject<RootObject>(json);
        PostsList = new List<Child>(rootObjectData.data.children);


    }
    private async Task<string> FetchAsync(string url)
    {
        string jsonString;

        using (var httpClient = new System.Net.Http.HttpClient())
        {
            var stream = await httpClient.GetStreamAsync(url);
            StreamReader reader = new StreamReader(stream);
            jsonString = reader.ReadToEnd();
        }

        return jsonString;
    }
    public event PropertyChangedEventHandler PropertyChanged;

    //[NotifyPropertyChangedInvocator]
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

}

In XAML I show it Like this:

 <ListView x:Name="OrderList"  ItemsSource="{Binding PostsList}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid x:Name="GridInf" Height="204" BorderBrush="#FFFBF8F8" BorderThickness="0,0,0,1">
                    <Image x:Name="Image" HorizontalAlignment="Left" Height="200"  Width="200" Tapped="Image_Tapped">
                        <Image.Source>
                            <BitmapImage UriSource="{Binding data.thumbnail}" />
                        </Image.Source>
                    </Image>
                    <TextBlock Text="{Binding data.title}" HorizontalAlignment="Left" Margin="252,10,0,0" TextWrapping="Wrap"  VerticalAlignment="Top" Height="134" Width="1028"/>
                    <TextBlock HorizontalAlignment="Left" Margin="252,139,0,0" TextWrapping="Wrap"  VerticalAlignment="Top" Height="97" Width="218">
                        <Run Text="Comments:  "/>
                        <Run Text="{Binding data.num_comments}"/>
                    </TextBlock>
                    <TextBlock HorizontalAlignment="Left" Margin="470,134,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Height="102" Width="312"/>
                    <TextBlock HorizontalAlignment="Left" Margin="787,139,0,0" TextWrapping="Wrap"  VerticalAlignment="Top" Height="97" Width="493">
                        <Run Text="Author:   "/>
                        <Run Text="{Binding data.author}"/>
                    </TextBlock>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>



</Grid>

I need to paginate this ListView - show only 10 posts per page (now I have 50 posts in my List)

How I can do this?

Answer 1

Use two List(One is for all items and another is for the 10 items to be displayed)

private List<ItemSource> postsList = new List<ItemSource>(); //Given List
private List<ItemSource> displayPostsList = new List<ItemSource>(); //List to be displayed in ListView
int pageIndex = -1;
int pageSize = 10; //Set the size of the page

private void NextButton_Click(object sender, RoutedEventArgs e)
{
    pageIndex++;
    displayPostsList = postsList.Skip(pageIndex * pageSize).Take(pageSize).ToList();
}

private void PreviousButton_Click(object sender, RoutedEventArgs e)
{
    pageIndex--;
    displayPostsList = postsList.Skip(pageIndex * pageSize).Take(pageSize).ToList();
}

//Call NextButton_Click in page Constructor to show defalut 10 items
NextButton_Click(null, null);

Don't forget to use INotifyPropertyChanged in order to update the ListViewItems (OR) Use ObservableCollection in the place of List and use this answer to convert List into ObservableCollection