Windows Phone 7 ListBox 清單項目漸顯載入動畫學習筆記

標籤：style   http   color   io   使用   ar   for   sp   資料   

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

　　我們不得不想盡辦法讓UI儘快載入。所以有一種可行的方案，就是像QQ聊天列表一樣，從上至下，清單項目逐一載入(載入完第一項，再載入第二項，再載入第三項，給使用者儘快的UI響應，也不至於等待到顯示所有的清單項目。

　　在我們的例子中，我還給每個清單項目顯示的過程中加入了漸顯動畫，這樣當清單項目足夠複雜時，也能表現出比較好的展示效果。

　　實現的基本原理：

　　實現的原理也不難，主要的思路是：

　　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 = newobject();

        //當UILoad隊列中 全部UI load成功，會回調這個函數
        public  event RoutedEventHandler LoadedComplete;
         
        public voidPushLoadAction(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 inBeginInvoke!");
                        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 scaleanimation
            double from = 0;
            double to = 1;

            TimeSpan timespan =TimeSpan.FromSeconds(0.8);
            IEasingFunctioneasingFunction = new ExponentialEase { EasingMode = EasingMode.EaseInOut };
            ret = new Storyboard();


            DoubleAnimationanimationOpacity = 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;
        }

 

這也是我在IT線上教育平台麥子學院學習時做的一篇筆記，這裡整理一下，希望能拋磚引玉。

Windows Phone 7 ListBox 清單項目漸顯載入動畫學習筆記