（仿QQ聊天消息列表加載）wp7 listbox 列表項逐一加載的一種實現方式，以及加入漸顯動畫

在wp7程序中，當程序功能越來越複雜時，性能問題是我們不得不考慮的一個問題。在聊天列表中，如果聊天項過多，而且項目UI組件足夠複雜時，

我們不得不想盡辦法讓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)

 

http://www.cnblogs.com/sonyye/archive/2012/03/11/2389694.html