寻求支持先向下再向右流式排列子元素的WPF布局控件

WPF自带面板无法直接实现你需要的垂直优先（先向下再向右）、列数固定、行高匹配该行最高元素且子元素水平拉伸的布局效果，以下是自定义Panel的解决方案：

自定义VerticalFlowPanel控件 #

创建继承自Panel的自定义控件，添加Columns依赖属性指定列数，重写MeasureOverride和ArrangeOverride实现核心布局逻辑：

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;

public class VerticalFlowPanel : Panel
{
    // 列数依赖属性，修改后自动触发布局更新
    public static readonly DependencyProperty ColumnsProperty =
        DependencyProperty.Register("Columns", typeof(int), typeof(VerticalFlowPanel),
            new FrameworkPropertyMetadata(2, FrameworkPropertyMetadataOptions.AffectsMeasure));

    public int Columns
    {
        get => (int)GetValue(ColumnsProperty);
        set => SetValue(ColumnsProperty, value);
    }

    protected override Size MeasureOverride(Size availableSize)
    {
        int itemCount = InternalChildren.Count;
        if (itemCount == 0 || Columns <= 0)
            return new Size(0, 0);

        // 计算总行数：向上取整(元素总数/列数)
        int totalRows = (int)Math.Ceiling((double)itemCount / Columns);
        // 按列分组元素：先填满第一列所有行，再分配到下一列
        List<List<UIElement>> columnGroups = new();
        for (int col = 0; col < Columns; col++)
        {
            columnGroups.Add(new List<UIElement>());
        }
        for (int i = 0; i < itemCount; i++)
        {
            int colIndex = i / totalRows;
            if (colIndex >= Columns) colIndex = Columns - 1;
            columnGroups[colIndex].Add(InternalChildren[i]);
        }

        // 计算每行的最大高度
        double[] rowMaxHeights = new double[totalRows];
        for (int row = 0; row < totalRows; row++)
        {
            double maxHeight = 0;
            foreach (var col in columnGroups)
            {
                if (row < col.Count)
                {
                    var element = col[row];
                    element.Measure(new Size(availableSize.Width / Columns, double.PositiveInfinity));
                    maxHeight = Math.Max(maxHeight, element.DesiredSize.Height);
                }
            }
            rowMaxHeights[row] = maxHeight;
        }

        // 计算面板总尺寸：宽度填满可用空间，高度为各行高度之和
        double totalHeight = 0;
        foreach (var height in rowMaxHeights) totalHeight += height;
        return new Size(availableSize.Width, totalHeight);
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
        int itemCount = InternalChildren.Count;
        if (itemCount == 0 || Columns <= 0)
            return finalSize;

        int totalRows = (int)Math.Ceiling((double)itemCount / Columns);
        List<List<UIElement>> columnGroups = new();
        for (int col = 0; col < Columns; col++)
        {
            columnGroups.Add(new List<UIElement>());
        }
        for (int i = 0; i < itemCount; i++)
        {
            int colIndex = i / totalRows;
            if (colIndex >= Columns) colIndex = Columns - 1;
            columnGroups[colIndex].Add(InternalChildren[i]);
        }

        // 重新计算每行最大高度，确保与Measure阶段一致
        double[] rowMaxHeights = new double[totalRows];
        for (int row = 0; row < totalRows; row++)
        {
            double maxHeight = 0;
            foreach (var col in columnGroups)
            {
                if (row < col.Count)
                {
                    maxHeight = Math.Max(maxHeight, col[row].DesiredSize.Height);
                }
            }
            rowMaxHeights[row] = maxHeight;
        }

        double columnWidth = finalSize.Width / Columns;
        double currentY = 0;

        // 逐行排列元素：每行元素宽度均分，高度取该行最大值
        for (int row = 0; row < totalRows; row++)
        {
            double rowHeight = rowMaxHeights[row];
            for (int col = 0; col < Columns; col++)
            {
                if (row < columnGroups[col].Count)
                {
                    var element = columnGroups[col][row];
                    element.Arrange(new Rect(col * columnWidth, currentY, columnWidth, rowHeight));
                }
            }
            currentY += rowHeight;
        }

        return finalSize;
    }
}

在ItemsControl/ListBox中使用 #

将自定义面板设置为ItemsPanel，即可直接应用到列表控件中：

<ItemsControl>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- 指定列数为2，可根据需求修改 -->
            <local:VerticalFlowPanel Columns="2" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <!-- 示例子元素，实际可绑定数据源 -->
    <Button Content="元素1" Height="50" />
    <Button Content="元素2" Height="80" />
    <Button Content="元素3" Height="60" />
    <Button Content="元素4" />
</ItemsControl>

关键逻辑说明 #

• 垂直优先分配：通过i / totalRows计算元素所属列，先填满第一列所有行，再分配到下一列，实现先向下再向右的排列顺序。
• 行高统一：在测量阶段计算每行的最大高度，排列阶段让该行所有元素使用此高度，确保同一行元素高度一致。
• 水平拉伸：将面板总宽度平均分配给每列，元素排列时宽度设为列宽，实现水平填充效果。
• 适配列表控件：自定义Panel符合WPF面板规范，可直接作为ItemsPanelTemplate使用，支持数据绑定场景。

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