c# - WPF 2 列レイアウト コンテナー

Question

アイテムを 2 列に積み重ね、左側の列に十分なスペースがなかった残りのアイテムに右側の列を使用するものとして使用できるレイアウト コンテナーを作成するにはどうすればよいですか (ラップと混合された均一なグリッドのようなItemsPanelもの)ItemsControlパネル）。

例えば：

ほぼ同じ高さの 4 つのアイテムは、次のように表示されます。

2 つのアイテムの幅が大幅に小さい 4 つのアイテムは、次のように表示されます。

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 とパネルでユーザーが指定できるプロパティ Columns があります。その列の値よりも多くは作成されません

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; 
    }
}

xaml

 <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>

出力

xaml

 <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>

出力

xaml

<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>

出力