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