《ListBox》———实现分页追加效果

（1）、效果描述：

　　原始数据数为100项， 每次加载8项

　　当已显示的加载项数为100时和原始数据项数小于8项时，Button隐藏掉，其他情况显示Button

（2）、实现思路

　　a、ListBox数据源

　　　　原始数据源和ListBox实际绑定数据源分开，实际数据源第一次加载8项，之后每次在其基础上追加8项。

　　b、UI效果

　　　　把ListBox和Button使用ScrollViewer包起来，这样看起来Button就像是ListBox的最后一项Item，当然要把ListBox里的纵向滚动条设置为Disabled。

　　c、Button的动态显示

　　　　Button的显示与否是有 原始数据项数  和 当前实际绑定数据源项数决定的；

　　　　因此我们可以设计一个值转换器来完成这个效果，在这里我们通过一个封装的类MoreButonVis（我这里定义为MoreButonVis）来包含 原始数据源项数 和 当前实际数据源项数，在这里进行判断处理。

（3）、实现过程中遇到的小麻烦

　　描述：由于我是将ListBox原始数据源和MoreButonVis类 封装到一个LstBoxModel类中，当我们改变LstBoxModel类中的MoreButonVis类里面属性值时，UI页面并没有收到改变通知，所以呢这个“加载更多”按钮会一直显示。

　　解决方法：我们可以设置一个delegate，在MoreButonVis类中加入delegate成员变量， 而在LstBoxModel中为MoreButonVis中的delegate注册处理方法，也就是通知页面UI  MoreButonVis 发生改变。

（4）、主要代码片段：

　　a、数据源定义 SimpleModel、MoreButonVis 和 LstBoxModel

using System;
using System.ComponentModel;

namespace LoadingDataDemo
{
    public class SimpleModel : INotifyPropertyChanged
    {
        /// <summary>
        /// name or title
        /// </summary>
        protected string SelfName = string.Empty;
        public string Name 
        {
            get { return SelfName; }
            set 
            {
                SelfName = value;
                NotifyPropertyChanged("Name");
            }
        }

        /// <summary>
        /// fuction description 
        /// </summary>
        protected string SelfDescription = string.Empty;
        public string Discription
        {
            get { return SelfDescription; }
            set 
            {
                SelfDescription = value;
                NotifyPropertyChanged("Discription");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

public class MoreButonVis : INotifyPropertyChanged
    {
        public NotifyPanlChanged NofityChangedPanl;

        #region attribute

        private int SelfAppLstModelCount = 0;
        public int AppLstModelCount
        {
            get { return SelfAppLstModelCount; }
            set
            {
                if (SelfAppLstModelCount != value)
                {
                    SelfAppLstModelCount = value;
                    if (NofityChangedPanl != null)
                        NofityChangedPanl();
                    NotifyPropertyChanged("AppLstModelCount");
                }
            }
        }

        private int SelfPageLstModelCount = 0;
        public int PageLstModelCount //是个索引值
        {
            get { return SelfPageLstModelCount; }
            set
            {
                if (SelfPageLstModelCount != value)
                {
                    SelfPageLstModelCount = value;
                    if (NofityChangedPanl != null)
                        NofityChangedPanl();
                    NotifyPropertyChanged("PageLstModelCount");
                }
            }
        }

        #endregion //attribute

        #region overwritten INotifyPropertyChanged

        public event PropertyChangedEventHandler PropertyChanged;
        protected void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        #endregion //INotifyPropertyChanged
    }

public class LstBoxModel : INotifyPropertyChanged, INotifyCollectionChanged
    {
        public LstBoxModel()
        {
            SelfMore = new MoreButonVis();
            SelfMore.PropertyChanged += new PropertyChangedEventHandler(SelfMore_PropertyChanged);
            SelfLstModel = new ObservableCollection<SimpleModel>();
        }

        void SelfMore_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            NotifyPropertyChanged("More");
        }

        #region attribute

        /// <summary>
        /// whether or not the data is loaded 
        /// </summary>
        public bool IsDataLoaded { get; private set; }

        /// <summary>
        /// ListBox's Itemsource
        /// </summary>
        private ObservableCollection<SimpleModel> SelfLstModel = null;
        public ObservableCollection<SimpleModel> LstModel
        {
            get 
            {
                if (SelfLstModel != null)
                    More.AppLstModelCount = SelfLstModel.Count;
                return SelfLstModel;
            }
            set 
            {
                SelfLstModel = value;
                NotifyPropertyChanged("LstModel");
            }
        }

        /// <summary>
        /// The more Button show 
        /// </summary>
        private MoreButonVis SelfMore = null;
        public MoreButonVis More
        {
            get { return SelfMore; }
            set 
            {
                SelfMore = value;
                NotifyPropertyChanged("More");
            }
        }
        
        #endregion //attribute

        #region overwritten INotifyPropertyChanged

        public event PropertyChangedEventHandler PropertyChanged;
        protected void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public event NotifyCollectionChangedEventHandler CollectionChanged;
        protected void NotifyCollectionChanged(string collectionName)
        {
            if (CollectionChanged != null)
            {
                CollectionChanged(this, new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Replace));
            }
        }

        #endregion //INotifyPropertyChanged

        /// <summary>
        /// Load data
        /// </summary>
        public void LoadData()
        {
            for (int i = 0; i < 100; i++)
            {
                LstModel.Add(new SimpleModel() { Name = "第" + i + "项", Discription = "这是第" + i + "项数据" });
            }

            IsDataLoaded = true;
        }
    }

　　b、delegate定义

public delegate void NotifyPanlChanged();

　　c、值转换器定义

public class NumToButonVis : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value is MoreButonVis)
            {
                if (((MoreButonVis)value).AppLstModelCount > 8
                    && ((MoreButonVis)value).PageLstModelCount < ((MoreButonVis)value).AppLstModelCount -1)
                    return Visibility.Visible;
                else
                    return Visibility.Collapsed;
            }
            else 
                return null;
        }
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
    }

　　d、UI xaml

<phone:PhoneApplicationPage 
    x:Class="LoadingDataDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" xmlns:locat="clr-namespace:LoadingDataDemo"
    d:DataContext="{d:DesignData Design/SampleDataDesign.xaml}">

    <phone:PhoneApplicationPage.Resources>
        <ResourceDictionary>
            <locat:NumToButonVis x:Key="NumToButonVis1" />
        </ResourceDictionary>
    </phone:PhoneApplicationPage.Resources>

    <!--Sample code showing usage of ApplicationBar-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/icon_delete.png" Text="删除" Click="ApplicationBarIconButton_Click"/>
            <shell:ApplicationBarIconButton IconUri="/Images/icon_choose.png" Text="全选" Click="ApplicationBarIconButton_Click_1"/>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="LOADING DATA TEST" Style="{StaticResource PhoneTextNormalStyle}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ScrollViewer>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    
                    <ListBox Grid.Row="0" x:Name="LstBox" Margin="15,0" SelectionMode="Multiple" ItemsSource="{Binding LstModel}" ScrollViewer.VerticalScrollBarVisibility="Disabled">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal" Margin="0,0,0,20">
                                    <Rectangle Height="100" Width="100" Fill="#FFE5001b" Margin="0,0,9,0"/>
                                    <StackPanel>
                                        <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextLargeStyle}"/>
                                        <TextBlock Text="{Binding Discription}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                                    </StackPanel>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>

                    <Button Grid.Row="1" x:Name="Buton" Height="72" Content="加载更多" Click="Buton_Click" Visibility="{Binding More, Converter={StaticResource NumToButonVis1}}"/>
                </Grid>
            </ScrollViewer>
        </Grid>
    </Grid>
 
</phone:PhoneApplicationPage>

　　e、UI xaml.cs

using System;
using System.Windows;
using System.ComponentModel;
using Microsoft.Phone.Controls;
using System.Collections.ObjectModel;

namespace LoadingDataDemo
{
    public partial class MainPage : PhoneApplicationPage, INotifyPropertyChanged
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            App.ViewModel.More.PageLstModelCount = 0;
            SelfModel = new ObservableCollection<SimpleModel>();

            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            DataContext = App.ViewModel;
            LstBox.ItemsSource = Model;
        }

        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
            if (!App.ViewModel.IsDataLoaded)
            {
                App.ViewModel.LoadData();
            }
            LoadData15();
            base.OnNavigatedTo(e);
        }

        private void ApplicationBarIconButton_Click(object sender, EventArgs e)
        {
            foreach (var item in LstBox.SelectedItems)
            { 
                if(item is SimpleModel)
                {
                    Model.Remove((SimpleModel)item);
                    App.ViewModel.LstModel.Remove((SimpleModel)item);
                }
            }
            App.ViewModel.More.PageLstModelCount = 0;
            Model.Clear();
            LoadData15();
        }

        private void ApplicationBarIconButton_Click_1(object sender, EventArgs e)
        {
            LstBox.SelectAll();
        }

        private void Buton_Click(object sender, RoutedEventArgs e)
        {
            LoadData15();
        }

        private ObservableCollection<SimpleModel> SelfModel = null;
        public ObservableCollection<SimpleModel> Model
        {
            get { return SelfModel; }
            set
            {
                SelfModel = value;
                NotifyPropertyChanged("Model");
            }
        }

        private void LoadData15()
        {
            for (int i = 0; i < 8; i++)
            {
                if (App.ViewModel.More.PageLstModelCount < App.ViewModel.LstModel.Count)
                {
                    Model.Add(App.ViewModel.LstModel[App.ViewModel.More.PageLstModelCount]);
                    App.ViewModel.More.PageLstModelCount++;
                }
                else
                { 
                    return;
                }
            }
        }


        public event PropertyChangedEventHandler PropertyChanged;
        protected void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

（5）完成工程代码：猛击