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屋!