说明

在本博客中，学习如何在Xamarin.Forms应用程序中设计一个可扩展的无限滚动的ListView。这个无限滚动函数在默认的Xamarin.Forms不存在，因此我们需要为此添加插件。在这里我们需要知道无限滚动时如何工作的。首先，显示固定的数据。一旦用户滚动到末尾，我们可以在列表的末尾添加更多的数据，这样，列表就会不断滚动，直到数据结束。

让我们开始吧

第一步

创建一个新的Xamarin.Forms工程，打开Visual Studio，点击新建->项目->在对话框中选择移动应用(Xamarin.Forms)，并点击下一步**

（未使用原文图片）

第二步

接下来，出现一个新的对话框，在这里给出应用程序和解决方案的名称，名字为：XFInfiniteScroll，然后点击创建（未使用原文图片）

第三步

之后，在新的对话框窗口中，选择你的Xamarin.Forms应用模板类型和平台之后点击确定,在这里，我选择选项卡式模板和Android,iOS平台。因为这里选择空模板时，没有成功，改选用选项卡模板（未使用原文图片）

第四步

在项目创建完成之后，安装Xamarin.Forms.Extended.Infinitescrolling NuGet包。右键点击解决方案并选择管理解决方案的NuGet程序包，注：需要选中包括预发行版选项

第五步

现在，在项目XFInfiniteScroll 选中Models文件夹，右击添加一个类，名称为：InfiniteItems,代码如下：

namespace XFInfiniteScroll.Models
{public class InfiniteItems{public string Id { get; set; }public string Text { get; set; }public string Title { get; set; }public string Description { get; set; }}
}

第六步

继续在项目XFInfiniteScroll中，添加一个文件夹，名称为：FakeDataSource，在文件夹中添加一个相当于提供模拟数据的类，名称为：InfiniteDataItems，代码如下（占用空间较大，已删除，可以在Github上面阅读源码）

第七步

由于本项目采用的是选项卡模板，并且目前已使用Shell方式（可以参考：Xamarin.Forms Shell。修改AppShell.xaml文件代码如下：

    <TabBar><Tab Title="Infinite Scroll" Icon="icon_about.png"><ShellContent Title="Single"><local:SingleViewPage></local:SingleViewPage></ShellContent><ShellContent Title="Group"><local:GroupViewPage></local:GroupViewPage></ShellContent></Tab><ShellContentTitle="About"ContentTemplate="{DataTemplate local:AboutPage}"Icon="icon_about.png"Route="AboutPage" /><ShellContentTitle="Browse"ContentTemplate="{DataTemplate local:ItemsPage}"Icon="icon_feed.png" /></TabBar>

此处，对于TabbedPage的用法出现错误，因此只能采用此种方法处理页面的布局

在文件夹Views中分别添加SingleViewPage和GroupViewPage内容页。直接在下面图片中修改文件名即可。

SingleViewPage页面布局

<?xml version="1.0" encoding="utf-8" ?>
<ContentPagex:Class="XFInfiniteScroll.Views.SingleViewPage"xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"xmlns:extended="clr-namespace:Xamarin.Forms.Extended;assembly=Xamarin.Forms.Extended.InfiniteScrolling"BackgroundColor="Red"><ContentPage.Content><ListViewx:Name="ListSingleItems"HasUnevenRows="True"HorizontalOptions="FillAndExpand"VerticalOptions="FillAndExpand"><ListView.Behaviors><extended:InfiniteScrollBehavior IsLoadingMore="{Binding IsWorking}"></extended:InfiniteScrollBehavior></ListView.Behaviors><ListView.ItemTemplate><DataTemplate><ViewCell><Grid Padding="12"><Grid.RowDefinitions><RowDefinition Height="20" /><RowDefinition Height="20" /></Grid.RowDefinitions><Label Grid.Row="0" Text="{Binding Text}"></Label><Label Grid.Row="1" Text="{Binding Description}"></Label></Grid></ViewCell></DataTemplate></ListView.ItemTemplate><ListView.Footer><Grid Padding="6"><LabelHorizontalOptions="Center"IsVisible="{Binding IsWorking}"Text="Loading..."VerticalOptions="Center"></Label></Grid></ListView.Footer></ListView></ContentPage.Content>
</ContentPage>

GroupViewPage页面布局

<?xml version="1.0" encoding="utf-8" ?>
<ContentPagex:Class="XFInfiniteScroll.Views.GroupViewPage"xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"xmlns:extended="clr-namespace:Xamarin.Forms.Extended;assembly=Xamarin.Forms.Extended.InfiniteScrolling"><ContentPage.Content><ListViewx:Name="GroupItems"HasUnevenRows="True"HorizontalOptions="FillAndExpand"IsGroupingEnabled="True"VerticalOptions="FillAndExpand"><ListView.Behaviors><extended:InfiniteScrollBehavior IsLoadingMore="{Binding IsWorking}" /></ListView.Behaviors><ListView.ItemTemplate><DataTemplate><ViewCell><Grid Padding="12"><Grid.ColumnDefinitions><ColumnDefinition Width="*"></ColumnDefinition></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="20"></RowDefinition><RowDefinition Height="20"></RowDefinition></Grid.RowDefinitions><LabelGrid.Row="0"Text="{Binding Text}"TextColor="Black"></Label><LabelGrid.Row="1"Text="{Binding Description}"TextColor="Black"></Label></Grid></ViewCell></DataTemplate></ListView.ItemTemplate><ListView.GroupHeaderTemplate><DataTemplate><ViewCell Height="25"><Grid BackgroundColor="White"><LabelFontAttributes="None"FontSize="16"HorizontalTextAlignment="Center"Text="{Binding Header}"TextColor="Blue"VerticalTextAlignment="Center"></Label></Grid></ViewCell></DataTemplate></ListView.GroupHeaderTemplate><ListView.Footer><Grid Padding="6"><LabelHorizontalOptions="Center"IsVisible="{Binding IsWorking}"Text="Load..."TextColor="Black"VerticalOptions="Center"></Label></Grid></ListView.Footer></ListView></ContentPage.Content>
</ContentPage>

对于后台代码，可以在GitHub上面参考。https://github.com/mzy666888/XFInfiniteScroll

第八步

现在，可以运行你的Xamarin.Forms应用程序，并可以看到以下的输出内容。在本机上运行界面：视频地址（可以查看下一条的视频）或者移步到：https://www.zhihu.com/zvideo/1338425998501240832

看一下原文中的动图显示

由于iOS & Android运行结果动图的帧数超过300帧，上传失败，需要看的可以移步到知乎查看

— END —

「扩展阅读」

[GitHub] 75+的 C# 数据结构和算法实现

谁说.NET不适合搞BD，ML、AI

推荐一个集录屏、截图、音频于一体的软件给大家

10个用于C＃.NET开发的基本调试工具

Xamarin.Forms 二维码扫描实践

在Asp.Net Core MVC 开发过程中遇到的问题总结

前端小白在asp.net core mvc中使用ECharts

基于Asp.Net Core MVC和AdminLTE的响应式管理后台之侧边栏处理

[译]如何在C#中调试LINQ查询

C# 语言性能提升方法

使用MQTTnet搭建Mqtt服务器

OxyPlot在WinForm中的应用

「公众号推荐」

回复：「redis」 获取5.0.9版的Windows安装包（exe）

回复：「ca」 获取  截图、GIF等工具三件套，便携版和安装版全部包括

回复：「新书」 获取《ASP.NET Core 3框架揭秘》购书链接

回复：「cv」 获取《OpenCV 4快速入门》购书链接

回复：「进阶」 获取 《CLR via C#（第4版）》购书链接

回复：「本质论」获取 《C# 7.0本质论》购书链接

回复：「WPF」获取 WPF 电子书

「加号主回复”入群“」即可加入群聊