如何在WPF中实现类似Unsplash的可滚动响应式图片网格

这个问题我之前也遇到过，用多个ListBox分栏的思路确实会遇到独立滚动的问题——每个ListBox都是独立的容器，哪怕禁用了它们的滚动，Grid的高度只会由最高的那个ListBox决定，不会触发自身的滚动行为。下面给你两个可行的解决方案，从快速实现到更贴近Unsplash的瀑布流效果：

方案一：用ScrollViewer + WrapPanel快速实现 #

WrapPanel可以自动按指定方向排列元素，我们只需要把所有图片直接放到WrapPanel里，再用ScrollViewer包裹就能实现整体滚动。

修改后的XAML代码 #

<ScrollViewer VerticalScrollBarVisibility="Visible">
    <!-- 设置Orientation为Vertical，让元素先填满列再换行 -->
    <WrapPanel x:Name="ImageWrapPanel" Orientation="Vertical" Width="750" />
</ScrollViewer>

后台填充代码 #

Random rnd = new Random();
for (int i = 0; i < 20; i++)
{
    Rectangle temp = new Rectangle();
    temp.Width = 250;
    temp.Height = rnd.Next(100, 300);
    temp.Fill = GetRandColor();
    // 不用再分ListBox，直接加到WrapPanel中
    ImageWrapPanel.Children.Add(temp);
}

原理：WrapPanel的Vertical方向会先从上到下填满第一列，再开始第二列，所有元素都在同一个容器里，当总高度超过ScrollViewer的视口时，就会触发整体垂直滚动。这个方案优点是简单快速，缺点是列高度可能不平衡（比如第一列全是高图，后面列都是矮图）。

方案二：自定义瀑布流Panel实现平衡布局 #

如果想要更贴近Unsplash的效果（每列高度尽可能均匀），原生控件做不到，我们可以自定义一个WaterfallPanel，自动把元素分配到当前最矮的列中。

自定义WaterfallPanel代码 #

public class WaterfallPanel : Panel
{
    public static readonly DependencyProperty ColumnCountProperty =
        DependencyProperty.Register("ColumnCount", typeof(int), typeof(WaterfallPanel), 
            new FrameworkPropertyMetadata(3, FrameworkPropertyMetadataOptions.AffectsArrange | FrameworkPropertyMetadataOptions.AffectsMeasure));

    public int ColumnCount
    {
        get { return (int)GetValue(ColumnCountProperty); }
        set { SetValue(ColumnCountProperty, value); }
    }

    protected override Size MeasureOverride(Size availableSize)
    {
        if (Children.Count == 0) return new Size(0, 0);

        int columnCount = Math.Max(1, ColumnCount);
        double columnWidth = availableSize.Width / columnCount;
        Size childAvailableSize = new Size(columnWidth, double.PositiveInfinity);

        // 记录每列的当前高度
        double[] columnHeights = new double[columnCount];

        foreach (UIElement child in Children)
        {
            child.Measure(childAvailableSize);
            // 找到当前最矮的列
            int shortestColumn = 0;
            for (int i = 1; i < columnCount; i++)
            {
                if (columnHeights[i] < columnHeights[shortestColumn])
                {
                    shortestColumn = i;
                }
            }
            // 将当前元素的高度加到最矮列
            columnHeights[shortestColumn] += child.DesiredSize.Height;
        }

        // 面板总高度为最高列的高度
        double totalHeight = columnHeights.Max();
        return new Size(availableSize.Width, totalHeight);
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
        if (Children.Count == 0) return finalSize;

        int columnCount = Math.Max(1, ColumnCount);
        double columnWidth = finalSize.Width / columnCount;
        double[] columnHeights = new double[columnCount];

        foreach (UIElement child in Children)
        {
            // 找到当前最矮的列
            int shortestColumn = 0;
            for (int i = 1; i < columnCount; i++)
            {
                if (columnHeights[i] < columnHeights[shortestColumn])
                {
                    shortestColumn = i;
                }
            }

            // 排列当前元素到目标列
            double x = shortestColumn * columnWidth;
            double y = columnHeights[shortestColumn];
            child.Arrange(new Rect(x, y, columnWidth, child.DesiredSize.Height));

            // 更新该列的高度
            columnHeights[shortestColumn] += child.DesiredSize.Height;
        }

        return finalSize;
    }
}

使用自定义Panel的XAML代码 #

<ScrollViewer VerticalScrollBarVisibility="Visible">
    <!-- 指定列数为3，和你原来的布局一致 -->
    <local:WaterfallPanel x:Name="WaterfallContainer" ColumnCount="3" />
</ScrollViewer>

后台填充代码 #

和方案一一样，直接把元素加到WaterfallContainer的Children中即可：

Random rnd = new Random();
for (int i = 0; i < 20; i++)
{
    Rectangle temp = new Rectangle();
    temp.Width = 250;
    temp.Height = rnd.Next(100, 300);
    temp.Fill = GetRandColor();
    WaterfallContainer.Children.Add(temp);
}

原理：自定义Panel在测量和排列阶段会跟踪每列的高度，每次把新元素放到当前最矮的列，这样最终每列的高度会尽可能平衡，完美还原Unsplash的瀑布流效果。

为什么原来的方案不行？ #

你原来用Grid三列+三个ListBox的布局，每个ListBox都是独立的ItemsControl，它们的内容高度是各自独立计算的。Grid的高度会自动适应最高的那个ListBox，不会因为整体内容超出视口而触发滚动——因为Grid本身并没有被内容“撑大”，自然不会激活它的ScrollViewer。

内容的提问来源于stack exchange，提问作者user16480720