ListView(UWP)中的分页 [英] Pagination in ListView (UWP)

问题描述

我在UWP上的xaml上有ListView.

I have UWP where I have ListView on xaml.

这是我如何接收json的代码，将其设置为List

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));
    }
}

}

在XAML中，我像这样显示它:

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>

我需要对这个ListView进行分页-每页仅显示10个帖子(现在我的列表中有50个帖子)

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

我该怎么做?

推荐答案

使用两个列表(一个用于所有项目，另一个用于显示10个项目)

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);

别忘了使用INotifyPropertyChanged来更新ListViewItems(OR)在List处使用ObservableCollection并使用

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

这篇关于ListView(UWP)中的分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！