wp8用LongListSelector做列表(可用QQ好友动态,微博列表各种地方),加入上拉加载

最近在做一个动态列表(想QQ空间那样),都没发现有现成的可以让我去捡,只能自己去搞了,发现用listbox实现有点困难,就换了LongListSelector,但是LongListSelector看到写的上拉加载不满意,就参考了几篇文章自己写了一个,来先看看做的效果

下面说说如何实现吧,xaml代码(LongListSelector样式的就不传了,只是调整他的UI):

  <local:ViewModel x:Key="viewmodel"/>

        <DataTemplate x:Key="listHeader">
            <Grid>
                <Image Source="/Image/矩形-6.png"/>
                <Image Source="/Image/图层-1.png" Height="113" Width="113" HorizontalAlignment="Left" Margin="30,80,0,0" />
                <TextBlock Text="小槽君" FontSize="30" Foreground="#333334" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,30,50,0"/>
                <TextBlock Text="25岁" FontSize="22" Foreground="#545455" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,120,10,0"/>
                <Image Width="22" VerticalAlignment="Center" HorizontalAlignment="Center" Source="/Image/矢量智能对象-副本-9.png" Margin="0,120,110,0"/>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="itemTemplate">
            <Grid Height="300" Background="White" Margin="10,0,10,10">
                <TextBlock Text="{Binding}" Foreground="#494949" FontSize="30" Margin="123,0,0,0"/>
                <Image Source="/Image/图层-1.png" Height="113" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="listFooter">
            <TextBlock Text="加载中..." HorizontalAlignment="Center" FontSize="22" />
        </DataTemplate>

<Grid DataContext="{StaticResource viewmodel}" Background="#494949">
        <phone:LongListSelector Name="lls" ItemsSource="{Binding List}"
              ListHeaderTemplate="{StaticResource listHeader}"
              ItemTemplate ="{StaticResource itemTemplate}"
              ListFooterTemplate ="{StaticResource listFooter}"
              Style="{StaticResource LongListSelectorStyle1}" >
            <i:Interaction.Triggers>
                <local:ScrollBarTrigger>
                    <i:InvokeCommandAction Command="{Binding MoreItemCommand}"/>
                </local:ScrollBarTrigger>
            </i:Interaction.Triggers>
        </phone:LongListSelector>
    </Grid>

这里利用LongListSelector的ListHeaderTemplate做一个头,ListFooterTemplate做一个拉倒底部时的加载状态(可以自己加入个动画),利用Triggers自己做一个滑动的触发事件,去执行一个Command

下面给个上拉加载的部分比较关键的代码(其他都在源码里面)

    public class ScrollBarTrigger : TriggerBase<DependencyObject>
    {
        ScrollBar ScrollView;

        public event EventHandler ScrollTrigger;

        protected override void OnAttached()
        {
            base.OnAttached();

            if (this.AssociatedObject != null && this.AssociatedObject is FrameworkElement)
            {
                (this.AssociatedObject as FrameworkElement).SizeChanged += control_SizeChanged;
            }
        }

        protected override void OnDetaching()
        {
            base.OnDetaching();

            if (ScrollView != null)
                ScrollView.ValueChanged -= ScrollView_ValueChanged;

            if (this.AssociatedObject != null && this.AssociatedObject is FrameworkElement)
            {
                (this.AssociatedObject as FrameworkElement).SizeChanged -= control_SizeChanged;
            }
        }

        void control_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            if (this.AssociatedObject == null || !(this.AssociatedObject is FrameworkElement))
                return;

            ScrollBar Scroll = this.AssociatedObject.GetFirstDescendantOfType<ScrollBar>();
            if (Scroll != null)
            {
                AttachedScroll(Scroll);
                (this.AssociatedObject as FrameworkElement).SizeChanged -= control_SizeChanged;
            }

        }

        void AttachedScroll(ScrollBar Scroll)
        {
            if (Scroll != null)
            {
                ScrollView = Scroll;
                ScrollView.ValueChanged += ScrollView_ValueChanged;
            }
        }

        void ScrollView_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            OnOffsetChanged();
        }

        void OnOffsetChanged()
        {
            if (ScrollView == null)
                return;

            ScrollBar Scroll = ScrollView;

                        if (Scroll.ViewportSize == 0 || Scroll.Value + 200 < Scroll.Maximum)
                            return;

            if (ScrollTrigger != null)
            {
                ScrollTrigger(this.AssociatedObject, new EventArgs());
            }
            base.InvokeActions(null);

        }
    }

上拉加载主要是获取LongListSelector的ScrollBar,通过判断ScrollBar当前滑动值和范围可最大滑动值比较判断是否到底部,到达底部用InvokeActions触发关联事件这样就完工啦。

担心虚拟化被破坏的小朋友,我已经测试过了,不用担心,还想更进一步实现的,比如好友恢复你的动态什么的如何插入到列表中,我提供一下思路(代码就不给啦,还要从自己项目剥离下来太麻烦了),一个可以在你的ItemTemplate里面设置一个behavior自己去加呀,笨一点的方法在里面在加个listbox,还可以利用GroupFooterTemplate这个还是比较好用的

源码:http://download.csdn.net/detail/qq593295212/8428635

时间: 2024-10-11 16:26:30

wp8用LongListSelector做列表(可用QQ好友动态,微博列表各种地方),加入上拉加载的相关文章

ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新

发了十篇教程,现在向我问问题的朋友越来越少了.可能我接触到的学习ionic的就这么些人吧! 可能大家已经觉得我写的东西都太过基础了,没什么值得参考借鉴的地方. 开始有人叫我说直接防类似饿了吗,折八百这样的网站,做一个Demo. 其实我也知道有些朋友就想要这种网上的免费劳动力. 但是其实这个建议还是不错的. 等我把现在这个demo讲完,我可能会考虑找一个成熟的上线的项目进行说明. 这个列表页一说,写完这个的朋友就可以尝试着接手项目了. 我不是说ionic简单,内容少. 我只是说我这些时间里面提到的

安卓listView实现下拉刷新上拉加载滑动仿QQ的删除功能

大家对这些功能都是看的多了,然后对上拉刷新和下拉加载的原理都是非常清楚的,所以实现这功能其实也就是为了让大家能够从众多的同行们来进行比较学习而已,虽然即使是这样,但是面试的时候面试官还是会问你上拉和下拉是怎么实现的,滑动删除功能是怎么实现,其实要实现这些功能又不是唯一的方法,但是基本上思想都是一致的.然后gitup上的这些例子是非常的多,然后实现的也是大同小异但是也不能不让我们去球童存异.作为天朝的程序员即使是一个伸手党也不必太觉得羞耻,能把别人的东西来改一改或者沿用别人的思想来模仿也是不错的.

wepy小程序实现列表分页上拉加载(1)

使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 列表页效果图: 1.新建列表页 (1)在pages里面新建一个list.wpy文件 初始代码结构如下: <style lang="less"> </style> <template> <view> </view> </template> <script> import wepy from 'wep

wepy小程序实现列表分页上拉加载(2)

第一篇:wepy小程序实现列表分页上拉加载(1) 本文接着上一篇内容: 4.优化-添加加载动画 (1)首先写加载动画的结构和样式 打开list.wpy文件 template结构代码: <template> <view class="list-wrapper"> <!-- 滚动列表 --> <scroll-view scroll-y="true" style="height: 400px;" bindscr

7-5 高级功能列表下拉刷新与上拉加载更多功能实现

数组还是那个数组,只不过这里由静态类型改成了非静态类型. 改成了有状态的widget 用RefreshIndicator包裹ListView.这样ListView就有了下拉刷新的能力. 下拉,松开的的手的时候会执行刷新,也就是onRefresh这个方法.这个方法要求我们传递一个必须带有Future返回值的方法 所以这里我们定义了带有Future返回值的方法.这个方法里面如果我们不想返回值的内容,就在Future的泛型设置为Null.也就是Future<Null> 下拉刷新的方法,延迟2秒钟,修

angual+mui 双栏上拉加载,微信里面禁用默认事件可用,可以防止浏览器回弹效果

//html 部分 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #2eafa9 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #596972 }

zepto.js + iscroll.js上拉加载 下拉加载的 移动端 新闻列表页面

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width,initial-scale=1.0

Android:仿手机QQ好友动态的ListView

1.介绍: 本博客使用XListView模仿Android版QQ好友动态的ListView效果.效果截图例如以下: 效果图1 效果图2 这里面主要涉及的是ListView的布局问题,让我们看一下Item的布局文件吧. <?xml version="1.0" encoding="utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&

如何制作带有下拉刷新和下拉加载更多的列表

一般的APP软件都是需要下拉刷新,下拉加载这两个功能的,今天我们就来学习怎么样实现这两个功能. 我们先来讲一下他们的原理,这里我们将采取的方案是使用组合View的方式,先自定义一个布局继承自LinearLayout,然后在这个布局中加入下拉头和ListView这两个子元素,并让这两个子元素纵向排列.初始化的时候,让下拉头向上偏移出屏幕,这样我们看到的就只有ListView了.然后对ListView的touch事件进行监听,如果当前ListView已经滚动到顶部并且手指还在向下拉的话,那就将下拉头