WPF 2列布局容器

Question

如何创建布局容器，我可以作为使用ItemsPanel的ItemsControl 是堆叠在两列的项目，并使用正确的列未在左边的列（足够的空间像一个统一的网格包裹混合剩余项目面板）。

例如：

高度几乎相同的四个项目将显示如下：

其中两个宽度明显较小的四个项目将显示如下：

Answer 1

尝试使用垂直方向的WrapPanel

<WrapPanel Orientation="Vertical" Height="200">
    <Border BorderBrush="Red" BorderThickness="2" Height="100" Width="100"/>
    <Border BorderBrush="Red" BorderThickness="2" Height="100"  Width="100"/>
    <Border BorderBrush="Red" BorderThickness="2" Height="100"  Width="100"/>
    <Border BorderBrush="Red" BorderThickness="2" Height="100"  Width="100"/>
</WrapPanel>

输出

<WrapPanel Orientation="Vertical" Height="200">
    <Border BorderBrush="Red" BorderThickness="2" Height="100" Width="100" />
    <Border BorderBrush="Red" BorderThickness="2" Height="50"  Width="100" />
    <Border BorderBrush="Red" BorderThickness="2" Height="50"  Width="100" />
    <Border BorderBrush="Red" BorderThickness="2" Height="200"  Width="100" />
</WrapPanel>

输出量

编辑：正如您的评论所述wrappanel不符合您的要求。请根据您的要求创建我们的面板。

下面是一个“自定义面板”，它可以垂直设置控件，并且当子项的高度大于“面板高度”时，它将子项移动到与“垂直”方向的WrapPanel完全相同的下一列，但是它具有“列”属性，用户可以在xaml和面板中指定创建的内容不会超过“列”值

CustomPanel.cs

    public class CustomPanel : Panel
{
    //TODO :Create as Attached Property
    public int Columns { get; set; }

    // Default public constructor 
    public CustomPanel(): base()
    {
    }

    protected override Size MeasureOverride(Size availableSize)
    {
        Size size = ArrangeAndMeasure(availableSize, true);
        if (double.IsInfinity(availableSize.Height) || double.IsInfinity(availableSize.Width))
            return size;
        else
            return availableSize;
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
        return ArrangeAndMeasure(finalSize, false);
    }

    Size ArrangeAndMeasure(Size finalSize,bool isMeasure)
    {
        //if columns not specified set it value 1.
        Columns = Columns == 0 ? 1 : Columns;
        Size size = new Size(0, 0);
        double maxWidth = 0.0;
        int colCount = 1;

        foreach (UIElement child in InternalChildren)
        {
            if ((size.Height + child.DesiredSize.Height > finalSize.Height) && Columns >= colCount)
            {
                //if all height consumed move to next column
                size.Width += maxWidth;
                size.Height = 0.0;
                colCount++;
            }

            if (isMeasure)
                child.Measure(finalSize);
            else
                child.Arrange(new Rect(new Point(size.Width, size.Height), child.DesiredSize));

            size.Height += child.DesiredSize.Height;

            if (maxWidth < child.DesiredSize.Width)
                maxWidth = child.DesiredSize.Width;
        }
        return size; 
    }
}

a

 <local:CustomPanel Height="200" Columns="2">
    <Border BorderBrush="LimeGreen" BorderThickness="2" Height="200" Width="100"  />
    <Border BorderBrush="Red" BorderThickness="2" Height="50"  Width="100"  />
    <Border BorderBrush="Black" BorderThickness="2" Height="50"  Width="100"  />
    <Border BorderBrush="Blue" BorderThickness="2" Height="50"  Width="100"  />
    <Border BorderBrush="Yellow" BorderThickness="2" Height="50"  Width="100"  />
</local:CustomPanel>

输出

a

 <local:CustomPanel Height="200" Columns="2">
    <Border BorderBrush="Red" BorderThickness="2" Height="50"  Width="100"  />
    <Border BorderBrush="Black" BorderThickness="2" Height="50"  Width="100"  />
    <Border BorderBrush="Blue" BorderThickness="2" Height="50"  Width="100"  />
    <Border BorderBrush="Yellow" BorderThickness="2" Height="50"  Width="100"  />
</local:CustomPanel>

输出量

a

<local:CustomPanel Height="200" Columns="2">
    <Border BorderBrush="Red" BorderThickness="2" Height="50"  Width="100"  />
    <Border BorderBrush="Black" BorderThickness="2" Height="50"  Width="100"  />
    <Border BorderBrush="Blue" BorderThickness="2" Height="50"  Width="100"  />
    <Border BorderBrush="Yellow" BorderThickness="2" Height="200"  Width="100"  />
</local:CustomPanel>

输出量