A Xamarin.Forms Infinite Scrolling ListView
from:http://www.codenutz.com/lac09-xamarin-forms-infinite-scrolling-listview/
The last few months have been crazy busy working on ItsMonkie Solutions, whether it be website rework, defining the value proposition or outreach emails, I’ve had very little time and as such Codenutz.com and the Live App Challenge has suffered. I don’t want to bore you by writing about my work schedule here, but I will be producing articles here on Codenutz with greater consistency, but lower frequency.
Anyway I’ve been hitting Xamarin.Forms pretty hard over the last few weeks with some okay results. I have to be totally honest, its been a rocky ride – the documentation isn’t brilliant, there are bugs, the updates often introduce new bugs and the framework itself sometimes feels a little bit lacking, albeit constantly improving.
Xamarin.Forms Extensibility
The really great thing about Xamarin.Forms is that its pretty extensible, and adding features isn’t too complicated by adding custom renderers, and / or extending existing controls.
I thought the best way to demonstrate this was create a really trivial example
Xamarin.Forms Infinite ListView
To demonstrate a really basic example of this I created a simple infinite scrolling listview and demo project on GitHub:
https://github.com/mattwhetton/Codenutz.XF.InfiniteListView
The code is incredibly simple, and the solution contains demo projects for how to use it.
What does it do
One of the first things that I really wanted in Xamarin.Forms was an infinite scrolling ListView, i.e. a ListView control that could theoretically keep going and going, dynamically loading the content as it needed to. It also really had to be MVVM and XAML friendly – the MVVM pattern is incredibly useful for writing cleanly separated user interfaces, but thats for another day!
How does it work
I implemented this by simply sub classing the built in ListView and adding in a few hooks:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
public class InfiniteListView : ListView
{
public static readonly BindableProperty LoadMoreCommandProperty = BindableProperty.Create<InfiniteListView,ICommand>(bp => bp.LoadMoreCommand, default(ICommand));
public ICommand LoadMoreCommand
{
get { return (ICommand) GetValue(LoadMoreCommandProperty); }
set { SetValue(LoadMoreCommandProperty, value); }
}
public InfiniteListView()
{
ItemAppearing += InfiniteListView_ItemAppearing;
}
void InfiniteListView_ItemAppearing(object sender, ItemVisibilityEventArgs e)
{
var items = ItemsSource as IList;
if (items != null && e.Item == items[items.Count - 1])
{
if(LoadMoreCommand != null && LoadMoreCommand.CanExecute(null))
LoadMoreCommand.Execute(null);
}
}
}
|
The basic idea behind this control is to expose a bindable command called LoadMoreCommand
. This command fires whenever the last item in the listview appears. This was achieved using the readily available ItemAppearing
event.
How do you use it
The concept is pretty straight forward, you add an InfiniteListView to your page, bind up the ItemsSource to an ObservableCollection on your ViewModel and also a command that instructs your ViewModel to load more content. Here’s a snippet from the XAML in my sample project:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:Controls="clr-namespace:Codenutz.XF.Controls;assembly=Codenutz.XF.Controls.InfiniteListView"
x:Class="Codenutz.XF.InfiniteListView.Shared.View.InfiniteListViewSampleView"
Title="{Binding Title}">
<Controls:InfiniteListView
ItemsSource="{Binding MarvelCharacters}"
SelectedItem="{Binding SelectedCharacter}"
LoadMoreCommand="{Binding LoadCharactersCommand}">
</Controls:InfiniteListView>
</ContentPage>
|
Here I’m simply binding the ItemsSource to a MarvelCharacters observable collection (yeah, its always comics!), and the LoadMoreCommand to a LoadCharacters command. Ignore the SelectedItem part – thats just for fun!
When the view model initially loads it fetches the first 50 characters from the repository (there are thousands hard coded in the sample). When the load more command is triggered the view model simply loads the next 50.
Demo
Here’s a really simple demonstration of what this looks like on an iPhone 6 simulator:
The example is trivial, but nicely represents how easy this kind of thing is to achieve with a little bit of work extending the Xamarin.Forms controls.
Wrapping up
The full source code for this example is available on Github so if you want more detail feel free to dig in.
I hope to bring a lot more on the Xamarin front, and will hopefully get some useful posts out. If you have any questions or suggestions about post topics, I’d love to hear them.
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
2010-01-04 SQL0803N INSERT 语句、UPDATE 语句或由 DELETE 语句导致的外键更新中的一个或多个值无效,因为由 "1" 标识的主键、唯一约束或者唯一索引将表
2009-01-04 下载:HD AUDIO For XP SP3修正补丁
2009-01-04 超级兔子现在提供的功能真的太实用了,谢谢!
2009-01-04 U盘几种工作模式的区别(ZIP,FDD,HDD)