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.
A Xamarin.Forms Infinite Scrolling ListView的更多相关文章
- Xamarin.Forms中的ListView的ItemTrapped事件与ItemSelected事件的区别
今天对Xamarin.Forms中的ListView的两个事件(ItemTrapped和ItemSelected)做了小小的研究,发现有以下几点区别: 1.ItemTrapped事件会优先被触发. 2 ...
- xamarin.forms之实现ListView列表倒计时
做商城类APP时经常会遇到抢购倒计时的功能,之前做小区宝iOS的时候也有类似的功能,想着参考iOS做的思路,自定义一个Cell,在Cell中每秒刷新一下控件的文本值,但使用xamarin.forms实 ...
- Xamarin.Forms 开发资源集合(复制)
复制:https://www.cnblogs.com/mschen/p/10199997.html 收集整理了下 Xamarin.Forms 的学习参考资料,分享给大家,稍后会不断补充: UI样式 S ...
- Xamarin.Forms 开发资源集合
收集整理了下 Xamarin.Forms 的学习参考资料,分享给大家,稍后会不断补充: UI样式 Snppts: Xamarin Forms UI Snippets. Prebuilt Templat ...
- Xamarin自定义布局系列——ListView的一个自定义实现ItemsControl(横向列表)
在以前写UWP程序的时候,了解到在ListView或者ListBox这类的列表空间中,有一个叫做ItemsPannel的属性,它是所有列表中子元素实际的容器,如果要让列表进行横向排列,只需要在Xaml ...
- Xamarin.Forms: 无限滚动的ListView(懒加载方式)
说明 在本博客中,学习如何在Xamarin.Forms应用程序中设计一个可扩展的无限滚动的ListView.这个无限滚动函数在默认的Xamarin.Forms不存在,因此我们需要为此添加插件.在这里我 ...
- Xamarin.Forms 简介
An Introduction to Xamarin.Forms 来源:http://developer.xamarin.com/guides/cross-platform/xamarin-forms ...
- 老司机学新平台 - Xamarin Forms开发框架之MvvmCross插件精选
在前两篇老司机学Xamarin系列中,简单介绍了Xamarin开发环境的搭建以及Prism和MvvmCross这两个开发框架.不同的框架,往往不仅仅使用不同的架构风格,同时社区活跃度不同,各种功能模块 ...
- Xamarin.Forms入门-使用 Xamarin.Forms 来创建跨平台的用户界面
Xamarin.Forms 是一个跨平台的.基于原生控件的UI工具包,开发人员可以轻松的创建适用于 Android,iOS 以及 Windows Phone的用户界面.Xamarin.Forms 通过 ...
随机推荐
- 完全背包问题 POJ1384
完全背包即物品的数量不收限制, 根据01背包的思想,因为每件物品只能选1个,则要求我们不能依赖已选择物品i的选项的时候,所以需要逆序遍历 则在完全背包问题中,我们需要正序遍历. 此题时要求求出最小价值 ...
- Hibernate学习(一)
一.基本概念 ORM(Object Relational Mapping)---是一种为了解决面向对象与关系型数据库存在的互不匹配的现象的技术.简单说: ORM 是通过使用描述对象和数据库之间映射的元 ...
- 問題排查:建立選單時的錯誤 errcode:40016, errmsg:invalid button size hint: [RI68La0851vr18]
可能原因: 1.如提示所說,第一層選單個數超過限制 (最多3個) 2.選單的 json 格式有誤,目前已知少了括弧會提示此錯誤
- [MOSEK] Mosek求解中遇到的奇葩内存问题
在使用mosek优化库的时候,使用http://docs.mosek.com/7.0/capi/MSK_getxx_.html的 MSKrescodee MSK_getxx ( MSKtask_t t ...
- 包含min函数的栈
题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈最小元素的min函数 解法一: 思路:采用java中自带的迭代函数进行处理. public class Solution{ /** * @pa ...
- 一个关于AM335X比较全面的笔记博客
http://www.eefocus.com/marianna/blog/cate_18142_0.html
- public <T> void show(T t),void前面的泛型T是什么作用
public <T>这个T是个修饰符的功能,表示是个泛型方法,就像有static修饰的方法是个静态方法一样. <T> 不是返回值,表示传入参数有泛型 public static ...
- [译]GLUT教程 - glutPostRedisplay函数
Lighthouse3d.com >> GLUT Tutorial >> Avoiding the Idle Func >> glutPostRedisplay 直 ...
- [转]关闭ORACLE数据库
SQL> shutdown immediateORA-24324: 未初始化服务句柄ORA-24323: 不允许此值ORA-01090: 正在关闭 - 不允许连接 SQL> shutdow ...
- 「zigbee - 1」工欲善其事必先利其器 - IAR for 8051 IDE customization
最近在实验室做一些 Zigbee 相关的事情,然而一直没在博客上记录啥东西,也不像原来在公司有动力在 Confluence wiki 上扯东扯西.直到前些阵子,跑到 feibit 论坛上(国内较大的一 ...