使用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);
运行的效果
转载于:https://blog.51cto.com/linzheng/1078356