ListView 中的分页 (UWP)

Question

我有 UWP，而我在 xaml 上有 ListView。

这是我如何接收 json 的代码，将其设置为 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 中我这样显示：

 <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 个帖子）

我该怎么做？

Answer 1

使用两个列表（一个用于所有项目，另一个用于要显示的 10 个项目）

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（或）使用ObservableCollection 代替List 并使用this 答案将List 转换为ObservableCollection