ListView(UWP)中的分页

时间:2017-06-20 06:33:32

标签: c# xaml listview pagination uwp

我有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个帖子)

我怎么能这样做?

1 个答案:

答案 0 :(得分: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