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);
运行的效果
