Windows Phone 7 如何實現高效率的橫向排版ListBox

    使用ListBox進行數據綁定的時候默認都是豎向的排版方式，意思就是一個Item會占用一行的位置，豎向地並排下去。當我們使用ListBox時，使用橫向排版的時候該怎么辦呢？也就是說要在一行的位置上放兩個或者兩個以上的Item。通常的解決方法，我們會使用toolkit控件里面的WrapPanel排版。

    例如：

            <ListBox Name="StackPanelListBox">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                            <TextBlock Text="{Binding Name}" Height="110" Width="110"></TextBlock>
                    </DataTemplate>
                </ListBox.ItemTemplate>
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel></toolkit:WrapPanel>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
            </ListBox>

     通過設置ListBox的ItemsPanel屬性的模板為WrapPanel控件的排版方式就會自動地根據Item的寬度大小並排地排在一行上，當排滿了一行的時候就會繼續排列在下面的一行上，如此類推不斷地排下去，就實現了橫向的數據綁定排版。但是這種方式有一個很致命的性能缺陷，因為會一次性地把所有的Item都初始化完成並展現在UI上，當Item的數量很多的時候就需要耗費很長的響應時間，導致用戶體驗很差，也會影響程序的性能。

      下面使用一種新的方法來解決WrapPanel橫向排版引發的性能問題。

       當我們使用ListBox默認的排版方式綁定數據時，它不會一次性地將所有的Item全部初始化完畢並展示在UI上，它會根據屏幕的位置初始化部分的Item，這部分Item是在你看到的屏幕上的Item和屏幕上下一屏的Item。那就利用這種原理來設計一個橫向排版的ListBox數據綁定。

       實現的方法是先將Item進行分組，一行要排列多少個Item那么就一組有多少個Item，分好組之后再把組作為一個新的Item構建一個新的數據綁定源。假如我們需要綁定的數據源的Item有200個，那么我們一行要排4個Item就要分50組，這時候構成的新的數據綁定源就是50行，在整體的ListBox里面是豎向排版，在一行的數據里面是橫向排版，這就實現了跟WrapPanel的自動排版一樣的綁定效果了，但是性能卻比WrapPanel的自動排版要好很多。

       實例：

Item.cs  數據源的Item

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;
using System.Windows.Media;
using System.Threading;

namespace GridListDemo
{
    public class Item : INotifyPropertyChanged
    {
        private string _name;

        public string Name
        {
            get
            {
                return this._name;
            }
            set
            {
                if (this._name != value)
                {
                    this._name = value;
                    RaisePropertyChanged("Name");
                }
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        public void RaisePropertyChanged(string info)
        {
            PropertyChangedEventHandler propertyChanged = this.PropertyChanged;
            if (propertyChanged != null)
            {
                propertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }
    }
}

GridDataRow.cs 組的數據源集合

using System;
using System.Collections;
using System.Collections.Generic;
using System.Reflection;

namespace GridListDemo
{

    public class GridDataRow<T> : IList<T>, ICollection<T>, IEnumerable<T>, IEnumerable
    {
        private IList<T> _items;//所有的item集合
        private int _offset;//偏移量 即 前面的item數量
        private int _rowItemCount;//行數

        public GridDataRow(IList<T> itemsList, int offset, int rowItemCount)
        {
            this._items = itemsList;
            this._offset = offset;
            this._rowItemCount = rowItemCount;
        }

        public void Add(T item)
        {
            throw new NotImplementedException();
        }

        public void Clear()
        {
            throw new NotImplementedException();
        }

        public bool Contains(T item)
        {
            throw new NotImplementedException();
        }

        public void CopyTo(T[] array, int arrayIndex)
        {
            throw new NotImplementedException();
        }

        public IEnumerator<T> GetEnumerator()
        {
            throw new NotImplementedException();
        }

        public int IndexOf(T item)
        {
            throw new NotImplementedException();
        }

        public void Insert(int index, T item)
        {
            throw new NotImplementedException();
        }

        public bool Remove(T item)
        {
            throw new NotImplementedException();
        }

        public void RemoveAt(int index)
        {
            throw new NotImplementedException();
        }

        IEnumerator IEnumerable.GetEnumerator()
        {
            throw new NotImplementedException();
        }

        public int Count
        {
            get
            {
                //取行數和剩下的條數的最小的一個
                int num = this._items.Count - this._offset;
                return Math.Min(this._rowItemCount, num);
            }
        }

        public bool IsReadOnly
        {
            get
            {
                return true;
            }
        }

        public T this[int index]
        {
            get
            {
                return this._items[this._offset + index];
            }
            set
            {
                throw new NotImplementedException();
            }
        }
    }
}

RowCollection.cs 行的綁定數據源的集合

using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.ComponentModel;
using System.Reflection;
using System.Threading;
using System.Windows;

namespace GridListDemo
{
    public class RowCollection<T> : IList<GridDataRow<T>>, IList where T : new()
    {
        private IList<T> _itemsCollection;
        private int _rowItemCount;//一行的數量

        public RowCollection(IList<T> itemsCollection, int rowItemCount)
        {
            this._itemsCollection = itemsCollection;
            this._rowItemCount = rowItemCount;
        }

        public void Add(GridDataRow<T> item)
        {
            throw new NotImplementedException();
        }

        public int Add(object value)
        {
            throw new NotImplementedException();
        }

        public void Clear()
        {
            throw new NotImplementedException();
        }

        public bool Contains(object value)
        {
            throw new NotImplementedException();
        }

        public bool Contains(GridDataRow<T> item)
        {
            throw new NotImplementedException();
        }

        public void CopyTo(Array array, int index)
        {
            throw new NotImplementedException();
        }

        public void CopyTo(GridDataRow<T>[] array, int arrayIndex)
        {
            throw new NotImplementedException();
        }

        public IEnumerator<GridDataRow<T>> GetEnumerator()
        {
            throw new NotImplementedException();
        }

        public int IndexOf(object value)
        {
            return -1;
        }

        public int IndexOf(GridDataRow<T> item)
        {
            return -1;
        }

        public void Insert(int index, GridDataRow<T> item)
        {
            throw new NotImplementedException();
        }

        public void Insert(int index, object value)
        {
            throw new NotImplementedException();
        }

        public void Remove(object value)
        {
            throw new NotImplementedException();
        }

        public bool Remove(GridDataRow<T> item)
        {
            throw new NotImplementedException();
        }

        public void RemoveAt(int index)
        {
            throw new NotImplementedException();
        }

        IEnumerator IEnumerable.GetEnumerator()
        {
            throw new NotImplementedException();
        }

        public int Count
        {
            get
            {
                //總數處於一行的數量等於列表的行數
                return Convert.ToInt32(Math.Ceiling((double)(((double)this._itemsCollection.Count) / ((double)this._rowItemCount))));
            }
        }

        public bool IsFixedSize
        {
            get
            {
                return false;
            }
        }

        public bool IsReadOnly
        {
            get
            {
                throw new NotImplementedException();
            }
        }

        public bool IsSynchronized
        {
            get
            {
                return false;
            }
        }

        public GridDataRow<T> this[int index]
        {
            get
            {
                return new GridDataRow<T>(this._itemsCollection, index * this._rowItemCount, this._rowItemCount);
            }
            set
            {
                throw new NotImplementedException();
            }
        }

        public object SyncRoot
        {
            get
            {
                return this;
            }
        }

        object IList.this[int index]
        {
            get
            {
                return this[index];
            }
            set
            {
                throw new NotImplementedException();
            }
        }
    }
}

MyGridRow.cs 自定義的組控件

using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;

namespace GridListDemo
{
    /// <summary>
    /// 橫向排版，繼承Canvas控件
    /// </summary>
    public class MyGridRow : Canvas
    {
        //定義ItemsSource屬性
        public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register("ItemsSource", typeof(IList<Item>), typeof(MyGridRow), new PropertyMetadata(new PropertyChangedCallback(MyGridRow.OnItemsSourceChanged)));
        /// <summary>
        /// 初始化GridRow控件
        /// </summary>
        private void ApplyRaw()
        {
            if ((this.ItemsSource == null) || (this.ItemsSource.Count != base.Children.Count))
            {
                base.Children.Clear();
                if (this.ItemsSource != null)
                {
                    for (int i = 0; i < this.ItemsSource.Count<Item>(); i++)
                    {
                        Item item = this.ItemsSource[i];
                        TextBlock tb = new TextBlock
                        {
                            DataContext = item,
                            Width = 80.0,
                            Height = 80.0
                        };
                        Binding binding = new Binding("Name")
                        {
                            FallbackValue = null
                        };
                        BindingOperations.SetBinding(tb, TextBlock.TextProperty, binding);
                        //添加目標到Canvas控件里面
                        base.Children.Add(tb);
                        Canvas.SetLeft(tb, (double)(i * 0x72));
                    }
                }
            }
            else
            {
                for (int j = 0; j < this.ItemsSource.Count<Item>(); j++)
                {
                    Item item2 = this.ItemsSource[j];
                    TextBlock tb2 = (TextBlock)base.Children[j];
                    tb2.Text = item2.Name;
                }
            }
        }
        /// <summary>
        /// ItemsSource改變事件
        /// </summary>
        /// <param name="d"></param>
        /// <param name="e"></param>
        private static void OnItemsSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            (d as MyGridRow).ApplyRaw();
        }
        //ItemsSource屬性
        public IList<Item> ItemsSource
        {
            get
            {
                return (IList<Item>)base.GetValue(ItemsSourceProperty);
            }
            set
            {
                base.SetValue(ItemsSourceProperty, value);
            }
        }
    }
}

在頁面中實現

    <phone:PhoneApplicationPage.Resources>
        <DataTemplate x:Key="GridViewTemplate">
            <myControl:MyGridRow ItemsSource="{Binding}" Height="114" Width="480" />
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>
.......
<ListBox Name="GridItemsListBox" HorizontalAlignment="Left"
                 ItemTemplate="{StaticResource GridViewTemplate}" />

  List<Item> source = new List<Item>();
            for (int i = 0; i < 200; i++)
            {
                source.Add(new Item { Name = "name" + i });
            }
            this.GridItemsListBox.ItemsSource = new RowCollection<Item>(source, 4);

運行的效果