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);

运行的效果