Windows Phone 7 如何实现高效率的横向排版ListBox

swsrl

　　使用ListBox进行数据绑定的时候默认都是竖向的排版方式，意思就是一个Item会占用一行的位置，竖向地并排下去。当我们使用ListBox时，使用横向排版的时候该怎么办呢？也就是说要在一行的位置上放两个或者两个以上的Item。通常的解决方法，我们会使用toolkit控件里面的WrapPanel排版。
　　例如：



            











　　通过设置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 : IList, ICollection, IEnumerable, IEnumerable
{
private IList _items;//所有的item集合
private int _offset;//偏移量 即 前面的item数量
private int _rowItemCount;//行数
public GridDataRow(IList 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 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 : IList, IList where T : new()
{
private IList _itemsCollection;
private int _rowItemCount;//一行的数量
public RowCollection(IList itemsCollection, int rowItemCount)
{
this._itemsCollection = itemsCollection;
this._rowItemCount = rowItemCount;
}
public void Add(GridDataRow 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 item)
{
throw new NotImplementedException();
}
public void CopyTo(Array array, int index)
{
throw new NotImplementedException();
}
public void CopyTo(GridDataRow[] array, int arrayIndex)
{
throw new NotImplementedException();
}
public IEnumerator GetEnumerator()
{
throw new NotImplementedException();
}
public int IndexOf(object value)
{
return -1;
}
public int IndexOf(GridDataRow item)
{
return -1;
}
public void Insert(int index, GridDataRow 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 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 this[int index]
{
get
{
return new GridDataRow(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
{
///
/// 横向排版，继承Canvas控件
///
public class MyGridRow : Canvas
{
//定义ItemsSource属性
public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register("ItemsSource", typeof(IList), typeof(MyGridRow), new PropertyMetadata(new PropertyChangedCallback(MyGridRow.OnItemsSourceChanged)));
///
/// 初始化GridRow控件
///
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(); i++)
{
Item item = this.ItemsSource;
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(); j++)
{
Item item2 = this.ItemsSource[j];
TextBlock tb2 = (TextBlock)base.Children[j];
tb2.Text = item2.Name;
}
}
}
///
/// ItemsSource改变事件
///
///
///
private static void OnItemsSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
(d as MyGridRow).ApplyRaw();
}
//ItemsSource属性
public IList ItemsSource
{
get
{
return (IList)base.GetValue(ItemsSourceProperty);
}
set
{
base.SetValue(ItemsSourceProperty, value);
}
}
}
}
　　在页面中实现



   




.......



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