WPF开发一个瀑布排列的Panel控件

一、控件介绍

所谓瀑布排列，实际上就是从上至下堆叠排列，从下图分析可以看出，它不像其它Panel控件一样有明确的行，除最靠顶部的子控件以外，所有其它子控件都是按Y轴方向上的上一个子控件位置来堆叠排列的。

二、实现思路

其核心思想就是维护一个排序的Y坐标列表（仅最后一行），该Y坐标为同一列的上一个控件的Y坐标+高度，每添加一次子控件就更新一下这个列表，使列表的Y值始终保持正序状态，当添加新的子控件时在列表中取第一个Y坐标值（也就是列表中最小的Y坐标）作为该控件的Y坐标，然后移除列表中的第一个Y坐标。当然实际操作可能还需要记录其它信息，比如X坐标等，这里只做业务逻辑分析。

三、关键代码

3.1 定义一个保存待填补位置的列表，主要是Ｘ以及Y坐标，列表以Y坐标正序排列。

// 待填补的空位
private readonly List<Point> vacantPositions = new List<Point>();

3.2 计算坐标信息。

var height = element.DesiredSize.Height;
// 下一个Y坐标及位置信息
var position = new Point(x, y + height);

3.3 维持正序排列。

var plist = vacantPositions.Select(item => item.Y).ToList();
var index = plist.BinarySearch(position.Y);
if (index < 0)
{
    index = ~index;
}
vacantPositions.Insert(index, position);

3.4 参数更新

x = vacantPositions[0].X;
y = vacantPositions[0].Y;
vacantPositions.RemoveAt(0);

四、运行效果

4.1 正常效果

4.2 添加动画后的效果

---------------完结---------------

以下为博主创建的微信及QQ群，欢迎加入。