(仿QQ聊天消息列表加载)wp7 listbox 列表项逐一加载的一种实现方式,以及加入渐显动画
2012-03-11 00:07
806 查看
在wp7程序中,当程序功能越来越复杂时,性能问题是我们不得不考虑的一个问题。在聊天列表中,如果聊天项过多,而且项目UI组件足够复杂时,
我们不得不想尽办法让UI尽快加载。所以有一种可行的方案,就是像QQ聊天列表一样,从上至下,列表项逐一加载(加载完第一项,再加载第二项,再加载第三项,给用户尽快的UI响应,也不至于等待到显示所有的列表项。
在我们的例子中,我还给每个列表项显示的过程中加入了渐显动画,这样当列表项足够复杂时,也能表现出比较好的展示效果。
在这里我不得不感谢一直支持我的卤面网版主,是他让我提起兴趣写了这么一篇文章,再次感谢卤面网,一个非常不错的wp7开发论坛,后面我也将再次向大家发布几篇高质量文章,请大家到卤面上找我吧,呵呵
进入正题:
实现的基本原理:
实现的原理也不难,主要的思路是:
1.列表项原本只是一个简单的自定义ContentControl(Codewp7ItemContainer),等到合适的时机再加载他的content(Codewp7ListBoxItem);
2.使用一个管理类LoadService,对UI列表项的加载进行控制,当加载了一项后,再进行第二项的加载,再进行第三项的加载....。
3.给每一个实际的列表项的显示加入渐显动画。
开始看我们的实现吧:
ListItemObject: 列表的实际数据
LoadService的队列控制实现
对于每一项加入渐显动画
有朋友反应,当加载200多项时,进入页面,再退出 ,再进入,可能就没办法加载了,
这里的确有这么一个bug,可以通过在页面退出时,将LoadService中的列表进行清空进行解决,谢谢大家反馈
我希望你能喜欢我的文章!如果你有更多想法,请到卤面网 wp7开发论坛(codewp7.com)问答区联系我,我会很高兴知道你在想什么。同时wp7交流QQ群172765887中,也能找到我的身影,感谢大家,也欢迎大家关注我的微薄(www.weibo.com/codewp7)
源码请猛击
我们不得不想尽办法让UI尽快加载。所以有一种可行的方案,就是像QQ聊天列表一样,从上至下,列表项逐一加载(加载完第一项,再加载第二项,再加载第三项,给用户尽快的UI响应,也不至于等待到显示所有的列表项。
在我们的例子中,我还给每个列表项显示的过程中加入了渐显动画,这样当列表项足够复杂时,也能表现出比较好的展示效果。
在这里我不得不感谢一直支持我的卤面网版主,是他让我提起兴趣写了这么一篇文章,再次感谢卤面网,一个非常不错的wp7开发论坛,后面我也将再次向大家发布几篇高质量文章,请大家到卤面上找我吧,呵呵
进入正题:
实现的基本原理:
实现的原理也不难,主要的思路是:
1.列表项原本只是一个简单的自定义ContentControl(Codewp7ItemContainer),等到合适的时机再加载他的content(Codewp7ListBoxItem);
2.使用一个管理类LoadService,对UI列表项的加载进行控制,当加载了一项后,再进行第二项的加载,再进行第三项的加载....。
3.给每一个实际的列表项的显示加入渐显动画。
开始看我们的实现吧:
ListItemObject: 列表的实际数据
public class ListItemObject { public string Title; public string Info; }
LoadService的队列控制实现
RoutedEventHandler itemLoaded; List<UILoadAction> LoadItems = new List<UILoadAction>(); object LoadArrayLock = new object(); //当UILoad队列中 全部UI load成功,会回调这个函数 public event RoutedEventHandler LoadedComplete; public void PushLoadAction(UILoadAction loadAction) { if (loadAction == null) return; lock (LoadArrayLock) { LoadItems.Add(loadAction); } if (LoadItems.Count <= 1) { PopLoadAction(); } } private void PopLoadAction() { if (LoadItems.Count <= 0) { // Log.d(TAG, "LoadedComplete!"); if (LoadedComplete != null) { LoadedComplete(null, null); } return; } mEle.Dispatcher.BeginInvoke(() => { lock (LoadArrayLock) { UILoadAction action; if (LoadItems.Count <= 0) { // Log.d(TAG, "LoadedComplete in BeginInvoke!"); if (LoadedComplete != null) { LoadedComplete(null, null); } return; } // Log.d(TAG, "LoadAction Array size:"+LoadItems.Count); action = LoadItems[0]; action(item_Loaded); // Log.d(TAG, "pop"); LoadItems.RemoveAt(0); } }); } void item_Loaded(object sender, RoutedEventArgs e) { PopLoadAction(); }
对于每一项加入渐显动画
private Storyboard getLoadStoryBoard() { Storyboard ret; // Prepare for scale animation double from = 0; double to = 1; TimeSpan timespan = TimeSpan.FromSeconds(0.8); IEasingFunction easingFunction = new ExponentialEase { EasingMode = EasingMode.EaseInOut }; ret = new Storyboard(); DoubleAnimation animationOpacity = new DoubleAnimation { From = from, To = to, Duration = timespan, EasingFunction = easingFunction }; Storyboard.SetTarget(animationOpacity, this); Storyboard.SetTargetProperty(animationOpacity, new PropertyPath(UIElement.OpacityProperty)); ret.Children.Add(animationOpacity); return ret; }
有朋友反应,当加载200多项时,进入页面,再退出 ,再进入,可能就没办法加载了,
这里的确有这么一个bug,可以通过在页面退出时,将LoadService中的列表进行清空进行解决,谢谢大家反馈
我希望你能喜欢我的文章!如果你有更多想法,请到卤面网 wp7开发论坛(codewp7.com)问答区联系我,我会很高兴知道你在想什么。同时wp7交流QQ群172765887中,也能找到我的身影,感谢大家,也欢迎大家关注我的微薄(www.weibo.com/codewp7)
源码请猛击
相关文章推荐
- (仿QQ聊天消息列表加载)wp7 listbox 列表项逐一加载的一种实现方式,以及加入渐显动画
- (仿QQ聊天消息列表加载)wp7 listbox 列表项逐一加载的一种实现方式,以及加入渐显动画
- WP7 ListBox 列表项渐显加载动画
- 实现app上对csdn的文章列表上拉刷新下拉加载以及加入缓存文章列表的功能 (制作csdn app 四)
- 实现app上对csdn的文章列表上拉刷新下拉加载以及加入缓存文章列表的功能 (制作csdn app 四)
- 实现app上对csdn的文章列表上拉刷新下拉加载以及加入缓存文章列表的功能 (制作csdn app 四)
- 实现app上对csdn的文章列表上拉刷新下拉加载以及加入缓存文章列表的功能 (制作csdn app 四)
- 实现app上对csdn的文章列表上拉刷新下拉加载以及加入缓存文章列表的功能 (制作csdn app 四)
- 实现app上对csdn的文章列表上拉刷新下拉加载以及加入缓存文章列表的功能 (制作csdn app 四)
- 实现app上对csdn的文章列表上拉刷新下拉加载以及加入缓存文章列表的功能 (制作csdn app 四)
- 用RecyclerView实现新闻列表页,包括头部的图片轮播,两种Item显示方式,下拉刷新和上拉加载以及限制列表的加载条目数
- Spring4.3+Webscket 实现聊天、消息推送详解原创之各种实现方式(一)
- volley+NetworkImageView实现列表界面的列表项中的左侧图标展现之【实现已经加载的列表项的图标上翻的时候不重新加载】
- [置顶] 一种新的Activity转换动画实现方式
- 即时通信系统中如何实现:聊天消息加密,让通信更安全? 【低调赠送:QQ高仿版GG 4.5 最新源码】
- 用Recyclerview实现列表分组、下拉刷新以及上拉加载更多
- RecyclerView下拉刷新、上拉加载更多以及复杂列表布局的实现
- Glide结合Recyclerview(也适用于Listview)实现列表滑动的时候图片不加载,滑动停止的时候加载(已修正Listview部分以及排版)
- Netty:实现同步发送并接收消息的一种方式
- Swift实现一个简单的加载动画,以及动画的详解