瀑布流已经有点年代了吧，不过wp上还真是挺少资料的。今天抽空把自己之前搞过的东西写出来，避免大家重复劳动。
一、简单的瀑布流排版加入ui虚拟化。
最近看了 段博琼 ui虚拟化的一篇博文，链接：http://www.cnblogs.com/hebeiDGL/p/3410575.html
觉得还不错，于是下载了他的demo稍微改了一下瀑布流效果。
demo截图如下：
主要改动：
1：自定义WaterFallPanel继承Panel，用于实现瀑布流排版，并保持容器children距离顶部高度的信息：
public class WaterFallPanel : Panel
{
public WaterFallPanel()
{
/**默认2列**/
ColumnCount = ;
ColumnHeight = new double[ColumnCount];
childwidth = / ColumnCount;
} double childwidth;
static double[] ColumnHeight; /// <summary>
/// 列数
/// </summary>
public int ColumnCount
{
get { return (int)this.GetValue(ColumnCountProperty); }
set { this.SetValue(ColumnCountProperty, value); }
} public static DependencyProperty ColumnCountProperty = DependencyProperty.Register("WaterFallPanel", typeof(int), typeof(WaterFallPanel), new PropertyMetadata(new PropertyChangedCallback((o, e) =>
{
ColumnHeight = new double[(int)e.NewValue];
if (o == null || e.NewValue == e.OldValue)
return;
o.SetValue(ColumnCountProperty, e.NewValue);
}))); protected override Size MeasureOverride(Size availableSize)
{ Size resultSize = new Size(, );
//List<DependencyObject> Children = this.GetVisualChildren().ToList();
for (int i = ; i < Children.Count; i++)
{
Children[i].Measure(availableSize);
}
#region 测量值
for (int i = ; i < ColumnHeight.Count(); i++)
{
ColumnHeight[i] = ;
}
heightlist.Clear();
for (int i = ; i < Children.Count; i++)
{
double miniheight = ColumnHeight.Min();
int h = ;
for (; h < ColumnHeight.Length; h++)
{
if (ColumnHeight[h] == miniheight)
{
break;
}
}
ColumnHeight[h] += Children[i].DesiredSize.Height; heightlist.Add(ColumnHeight.Min());
}
#endregion resultSize.Height = ColumnHeight.Max();
if (Children.Count == )
{
resultSize.Height = ;
resultSize.Width = ;
}
else
{
resultSize.Width = (Children.Count + ) * Children[].DesiredSize.Width;
} return resultSize;
} protected override Size ArrangeOverride(Size finalSize)
{
for (int i = ; i < ColumnHeight.Count(); i++)
{
ColumnHeight[i] = ;
} #region 排列值
heightlist.Clear();
for (int i = ; i < Children.Count; i++)
{
double miniheight = ColumnHeight.Min();
int h = ;
for (; h < ColumnHeight.Length; h++)
{
if (ColumnHeight[h] == miniheight)
{
break;
}
}
Children[i].Arrange(new Rect(new Point(Children[i].DesiredSize.Width * h, ColumnHeight[h]), Children[i].DesiredSize));
ColumnHeight[h] += Children[i].DesiredSize.Height;
if (h == )
{
if (Children[i].DesiredSize.Width > childwidth)
{
ColumnHeight[h + ] += Children[i].DesiredSize.Height;
}
}
heightlist.Add(ColumnHeight.Min());
}
if (Children.Count < ColumnCount)
finalSize.Width = childwidth * (Children.Count + );
else
finalSize.Width = childwidth * (ColumnCount + ); #endregion return finalSize;
}
private List<double> heightlist = new List<double>();
public double GetItemHeight(int item)
{
if (item >= && item < heightlist.Count)
{
return heightlist[item];
}
else
{
return ;
}
}
}
2：MainPage.xaml中修改itemspanl
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<LocalControl:WaterFallPanel x:Name="test" Loaded="test_Loaded"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
3：MainPage.cs中修改虚拟化的计算方式：
void Visualizition()
{
// 自定义一个“字典”，用来保存每项的 Y坐标 和它“本身”的引用
Dictionary<double, StackPanel> dic = new Dictionary<double, StackPanel>(); double height_sum = 0;
for (int i = 0; i < listbox.Items.Count; i++)
{
// 因为 ListBox 是通过数据绑定生成的列表，所以需要通过 ItemContainerGenerator 获得
// 每一项的 StackPanel 这个父控件
FrameworkElement fe = listbox.ItemContainerGenerator.ContainerFromIndex(i) as FrameworkElement;
StackPanel sp = FindFirstElementInVisualTree<StackPanel>(fe); dic.Add(height_sum, sp); // 累加 Y高度
if (height_sum <= waterpanel.GetItemHeight(i))
{
height_sum = waterpanel.GetItemHeight(i)+1;
}
else
{
height_sum = waterpanel.GetItemHeight(i);
} // 设置它的高度为自己的实际高度
sp.Height = sp.ActualHeight;
} // 每0.5秒钟，循环检查一次列表中，哪些项在屏幕内，如果在屏幕内，则显示，如果
// 在屏幕外，则隐藏
Observable.Interval(TimeSpan.FromSeconds(.5)).ObserveOnDispatcher().Subscribe((_) =>
{
foreach (var keyValue in dic)
{
if (((scrollViewer.VerticalOffset - 700) > keyValue.Key || keyValue.Key > (scrollViewer.VerticalOffset + 900)))
{
keyValue.Value.Children[0].Visibility = System.Windows.Visibility.Collapsed;
keyValue.Value.Children[1].Visibility = System.Windows.Visibility.Collapsed;
}
else
{
keyValue.Value.Children[0].Visibility = System.Windows.Visibility.Visible;
keyValue.Value.Children[1].Visibility = System.Windows.Visibility.Visible;
}
}
});
}
其中WaterFallPanel的获取用了比较奇葩的一个方式。
这样做的好处是代码简单明了，适合新手了解ui虚拟化。不好的地方则是每次想实现瀑布流排版，都得手动写入虚拟化计算代码。代码耦合过高。
二、通过自定义listbox实现瀑布流&虚拟化。降低代码耦合度。
demo截图：
1、自定义PowerListBox继承listbox
public class PowerListBox:ListBox
{
// 自定义一个“字典”，用来保存每项的 Y坐标 和它“本身”的引用
Dictionary<double, Border> dic = new Dictionary<double, Border>(); public PowerListBox()
{
DefaultStyleKey = typeof(PowerListBox);
Loaded += PowerListBox_Loaded;
Unloaded += PowerListBox_Unloaded;
}
private ScrollViewer _scrollView;
private bool _isScrolling;
void PowerListBox_Loaded(object sender, System.Windows.RoutedEventArgs e)
{
if (DesignerProperties.GetIsInDesignMode(this))
return;
ApplyTemplate();
_scrollView.ScrollToVerticalOffset(_scrollView.VerticalOffset); var border = _scrollView.Descendants<Border>().FirstOrDefault();
Debug.Assert(border != null);
var vsGroup = VisualStateManager.GetVisualStateGroups(border).OfType<VisualStateGroup>().FirstOrDefault(s => s.Name == "ScrollStates");
Debug.Assert(vsGroup != null);
vsGroup.CurrentStateChanging += vsGroup_CurrentStateChanging; if (ItemsRootPanel != null && ItemsRootPanel.Children != null)
{
double height_sum=;
dic.Clear();
for (int i = ; i < ItemsRootPanel.Children.Count; i++)
{
// 因为 ListBox 是通过数据绑定生成的列表，所以需要通过 ItemContainerGenerator 获得
// 每一项的 StackPanel 这个父控件
Border fe = VisualTreeHelper.GetChild(ItemsRootPanel.Children[i], ) as Border;
dic.Add(height_sum, fe); // 累加 Y高度
//var height = .GetItemHeight(i);
if (height_sum <= (ItemsRootPanel as WaterFallPanel).GetItemHeight(i))
{
height_sum = (ItemsRootPanel as WaterFallPanel).GetItemHeight(i) + ;
}
else
{
height_sum = (ItemsRootPanel as WaterFallPanel).GetItemHeight(i);
} // 设置它的高度为自己的实际高度
fe.Height = fe.ActualHeight;
} } }
void PowerListBox_Unloaded(object sender, System.Windows.RoutedEventArgs e)
{
var border = _scrollView.Descendants<Border>().FirstOrDefault();
Debug.Assert(border != null);
var vsGroup = VisualStateManager.GetVisualStateGroups(border).OfType<VisualStateGroup>().FirstOrDefault(s => s.Name == "ScrollStates");
Debug.Assert(vsGroup != null);
vsGroup.CurrentStateChanging -= vsGroup_CurrentStateChanging;
} public override void OnApplyTemplate()
{
base.OnApplyTemplate();
_scrollView = GetTemplateChild("ScrollViewer") as ScrollViewer;
Debug.Assert(_scrollView != null);
} void vsGroup_CurrentStateChanging(object sender, VisualStateChangedEventArgs e)
{
if (e.NewState.Name == "NotScrolling")
{
_isScrolling = false;
CompositionTarget.Rendering -= CompositionTarget_Rendering;
}
else
{
_isScrolling = true;
CompositionTarget.Rendering += CompositionTarget_Rendering;
}
}
void CompositionTarget_Rendering(object sender, EventArgs e)
{
RefreshDisplayArea();
} void RefreshDisplayArea()
{
foreach (var keyValue in dic)
{
if (((_scrollView.VerticalOffset - ) > keyValue.Key || keyValue.Key > (_scrollView.VerticalOffset + )))
{
keyValue.Value.Child.Visibility = Visibility.Collapsed;
}
else
{
keyValue.Value.Child.Visibility = Visibility.Visible;
}
}
//for (int i = 0; i < ItemsRootPanel.Children.Count; i++)
//{
// var item = GetItem(i);
// var height = (ItemsRootPanel as WaterFallPanel).GetItemHeight(i) ;
// if (((_scrollView.VerticalOffset - 20) > height || height > (_scrollView.VerticalOffset + 607)))
// {
// FrameworkElement fe = VisualTreeHelper.GetChild(item, 0) as FrameworkElement;
// fe.Visibility = Visibility.Collapsed;
// //keyValue.Value.Children[0].Visibility = System.Windows.Visibility.Collapsed;
// //keyValue.Value.Children[1].Visibility = System.Windows.Visibility.Collapsed;
// }
// else
// {
// FrameworkElement fe = VisualTreeHelper.GetChild(item, 0) as FrameworkElement;
// fe.Visibility = Visibility.Visible; // //keyValue.Value.Children[0].Visibility = System.Windows.Visibility.Visible;
// //keyValue.Value.Children[1].Visibility = System.Windows.Visibility.Visible;
// }
//} } private ListBoxItem GetItem(int index)
{
if (index < || index >= Items.Count)
return null;
if (ItemsSource != null)
{
var isVirtualizing = VirtualizingStackPanel.GetIsVirtualizing(this);
if (!isVirtualizing)
{
Debug.Assert(ItemsRootPanel != null);
return ItemsRootPanel.Children[index] as ListBoxItem;
}
Debug.Assert(ItemContainerGenerator != null);
return ItemContainerGenerator.ContainerFromIndex(index) as ListBoxItem;
}
return Items[index] as ListBoxItem;
} #region FirstVisibleIndex
public static readonly DependencyProperty FirstVisibleIndexProperty =
DependencyProperty.Register("FirstVisibleIndex", typeof(int), typeof(PowerListBox), new PropertyMetadata()); public int FirstVisibleIndex
{
get { return (int)GetValue(FirstVisibleIndexProperty); }
private set { SetValue(FirstVisibleIndexProperty, value); }
}
#endregion #region LastVisibleIndex
public static readonly DependencyProperty LastVisibleIndexProperty =
DependencyProperty.Register("LastVisibleIndex", typeof(int), typeof(PowerListBox), new PropertyMetadata()); public int LastVisibleIndex
{
get { return (int)GetValue(LastVisibleIndexProperty); }
private set { SetValue(LastVisibleIndexProperty, value); }
}
#endregion
private Panel _itemsRootPanel;
private Panel ItemsRootPanel
{
get
{
if (_itemsRootPanel == null && ItemsPresenter != null)
{
_itemsRootPanel = ItemsPresenter.ChildrenEx().FirstOrDefault() as Panel;
}
return _itemsRootPanel;
}
} private ItemsPresenter _itemsPresenter;
private ItemsPresenter ItemsPresenter
{
get { return _itemsPresenter ?? (_itemsPresenter = _scrollView.Descendants<ItemsPresenter>().FirstOrDefault()); }
} }
其他见demo。
备注：
1、虚拟化过程中：注意容器的高度为自己的实际高度
// 设置它的高度为自己的实际高度
// 很重要，如果不为父容器指定固定高度，当子元素隐藏后，父容器高度变为0px
sp.Height = sp.ActualHeight;
2、计算虚拟化区域有很多种方法，demo中只是简单粗暴的计算，有很多可以进行优化。
3、瀑布流排版只是见当实现两行的，需要多行的话请自行改动，详见附加链接，当然林政的瀑布流排版有点问题，改改更健康。
4、demo2中 Dictionary<double, Border> dic的表只是在加载过程中进行一次初始化，在listbox动态加载过程中并没有修改，为此listbox可将虚拟化计算改为
void RefreshDisplayArea()
{
for (int i = ; i < ItemsRootPanel.Children.Count; i++)
{
var item = GetItem(i);
Border fe = VisualTreeHelper.GetChild(item, ) as Border;
fe.Height = fe.ActualHeight; var height = (ItemsRootPanel as WaterFallPanel).GetItemHeight(i);
if (((_scrollView.VerticalOffset - fe.Height ) > height || height > (_scrollView.VerticalOffset + )))
{
fe.Child.Visibility = Visibility.Collapsed;
}
else
{
fe.Child.Visibility = Visibility.Visible;
}
} }
其他代码敬请发挥。
demo链接：
1：http://files.cnblogs.com/fatlin/VirtualizationListBoxDemo.rar
2：http://files.cnblogs.com/fatlin/TextListbox.rar
其他相关链接：
瀑布流：http://www.cnblogs.com/Smallcode/archive/2012/10/19/2730810.html