最近有童鞋有这种需求，说实话我不知道这个Panel怎么起名字。

效果连接https://tuchong.com/tags/风光/

下面是我做成的效果，可以规定每个Row的Items个数

2个

3个

4个

代码在：

下面我来说一下我的思路

其实很早之前就写过这种可变大小的，但这次的跟这个需求有点变化，这个每一行个数一定，大小根据图片的大小进行填充。

微软默认的VariableSizedWrapGrid和Toolikt里面的StaggeredPanel都会导致ListView失去一些特性（虚拟化，增量加载）

之前做另一种。其实现在这个差不多。就是ListViewItem 就是每一行，那么每一行里面相当于一个水平的ListView。

我只需要做一个Panel来布局填充行就可以了。。垂直上面还是ListView自带的效果

除此之后，还需要一个数据源来把 一维的数据改为了 二维的（根据每一行的个数）

直接上代码：

FillRowViewSource这个类是把一个 一维的数据源改为了 二维的。主要方法是UpdateRowItems根据RowItemsCount把集合分割

private void UpdateRowItems()        {            if (sourceList == null)            {                return;            }            int i = 0;            var rowItems = sourceList.Skip(i * RowItemsCount).Take(RowItemsCount);            while (rowItems != null && rowItems.Count() != 0)            {                var rowItemsCount = rowItems.Count();                var item = this.ElementAtOrDefault(i);                if (item == null)                {                    item = new ObservableCollection
      
       ();                    this.Insert(i, item);                }                for (int j = 0; j < rowItemsCount; j++)                {                    var rowItem = rowItems.ElementAt(j);                    var temp = item.ElementAtOrDefault(j);                    if (temp==null || !temp.Equals(rowItem))                    {                        item.Insert(j, rowItem);                    }                }                while (item.Count > rowItemsCount)                {                    item.RemoveAt(item.Count - 1);                }                i++;                rowItems = sourceList.Skip(i * RowItemsCount).Take(RowItemsCount);            }            var rowCount = sourceList.Count / RowItemsCount + 1;            while (this.Count > rowCount)            {                this.RemoveAt(this.Count - 1);            }        }
      

FillRowViewPanel 最早的时候希望使用item.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));方式来获得每个元素的大小，但是像Image这些控件不是开始就有大小的，需要等待图片加载完毕，而且每个Item都进行Measure的话。性能也不佳。

最后还是按照老控件的方式IResizable 写了个接口。绑定的数据源对象必须继承这个。你需要告诉我你的每个Item的大小尺寸。这样计算起来就方便多了而且有效多了

public class FillRowViewPanel : Panel    {        public int MinRowItemsCount        {            get { return (int)GetValue(MinRowItemsCountProperty); }            set { SetValue(MinRowItemsCountProperty, value); }        }        // Using a DependencyProperty as the backing store for MinRowItemsCount.  This enables animation, styling, binding, etc...        public static readonly DependencyProperty MinRowItemsCountProperty =            DependencyProperty.Register("MinRowItemsCount", typeof(int), typeof(FillRowViewPanel), new PropertyMetadata(0));        protected override Size MeasureOverride(Size availableSize)        {            var size = base.MeasureOverride(availableSize);            return size;        }        protected override Size ArrangeOverride(Size finalSize)        {            double childrenWidth = 0;            //double maxheight = double.MinValue;            foreach (var item in Children)            {                if (item is ContentControl cc && cc.Content is IResizable iResizable)                {                    //item.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));                    var elementSize = iResizable;                    var width = elementSize.Width * finalSize.Height / elementSize.Height;                    //maxheight = Math.Max(elementSize.Height, maxheight);                    childrenWidth += width;                }            }            double ratio = childrenWidth / finalSize.Width;            double x = 0;            var count = Children.Count;            foreach (var item in Children)            {                if (item is ContentControl cc && cc.Content is IResizable iResizable)                {                    var elementSize = iResizable;                    var width = elementSize.Width * finalSize.Height / elementSize.Height;                    //if children count is less than MinRowItemsCount and chidren total width less than finalwidth                    //it don't need to stretch children                    if (count < MinRowItemsCount && ratio < 1)                    {                        //to nothing                    }                    else                    {                        width /= ratio;                    }                    var rect = new Rect(x, 0, width, finalSize.Height);                    item.Measure(new Size(rect.Width, finalSize.Height));                    item.Arrange(rect);                    x += width;                }            }            return base.ArrangeOverride(finalSize);        }    }

在Sample页面

原理就是Listview的Item其实是个ListView。而做为Item的ListView的Panel是FillRowViewPanel

记住给FillRowViewPanel的高度进行设置。相当于每个元素的高度

在整个ListViewSizechanged的时候我们再根据自己的需求调整RowItemsCount。

private void FillRowView_SizeChanged(object sender, SizeChangedEventArgs e)        {            if (e.NewSize.Width < 600)            {                source.UpdateRowItemsCount(2);            }            else if (e.NewSize.Width >= 600 && e.NewSize.Width < 900)            {                source.UpdateRowItemsCount(3);            }            else            {                source.UpdateRowItemsCount(4);            }        }

整个就差不多这样了。做的比较简单。一些东西也没有全部去考虑。比如SourceList_CollectionChanged的时候。只考虑了Reset这种方式。

算是比较针对这个需求做的东东吧，如果有其他需求。可以提出来。大家一起撸撸。

老规矩 开源有益：