列表项垂直于WrapPanel并利用多列(List Items Vertically on a Wr

我需要列出的项目（所有大小相同的），垂直（与ScrollViewer中）。 我想要的物品，通过x列传播，如果容器足够大，以显示x列

我第一次尝试是：

<ScrollViewer>
    <toolkit:WrapPanel Orientation="Horizontal" ItemHeight="30" ItemWidth="100">
        <Button Content="1" />
        <Button Content="2" />
        <Button Content="3" />
        <Button Content="4" />
        <Button Content="5" />
    </toolkit:WrapPanel>
</ScrollViewer>

结果 -该WrapPanel就像我想，但我的项目是从“从左到右”命令（不垂直

然后我试图SEET的WrapPanel以“ 垂直 ”的方向：

结果 -我的商品垂直排序，但不铺展在多个列上。

这里是我想呈现的项目：

我真的希望避免编写代码监视控制大小创建/取决于其大小删除列。

Answer 1:

如果你设定Orientation ，以Vertical您还应该设置呈现高度。 例如，为了WrapPanel ， Height="150"

Answer 2:

终于得到了一些作品，但它需要的代码。 我跟大家同意，当你说，我们需要调整WrapPanel的高度做出的作品。 这里是我的解决方案：

<ScrollViewer x:Name="scroll1" SizeChanged="ScrollViewer_SizeChanged" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
    <toolkit:WrapPanel x:Name="wp1" Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Left" ItemHeight="30" ItemWidth="250" >
        <Button Content="1" />
        <Button Content="2" />
        <Button Content="3" />
        <Button Content="4" />
        <Button Content="5" />
        <Button Content="6" />
        <Button Content="7" />
        <Button Content="8" />
    </toolkit:WrapPanel>
</ScrollViewer>

这里是代码隐藏：

private void ScrollViewer_SizeChanged(object sender, SizeChangedEventArgs e)
{
    // Stupid magical number because ViewPortHeight is sometimes not accurate
    Double MAGICALNUMBER = 2;

    // Ensure ViewPortSize is not 0
    if (scroll1.ViewportWidth <= MAGICALNUMBER || scroll1.ViewportHeight <= MAGICALNUMBER)
        return;

    Size contentSize = new Size(scroll1.ViewportWidth - MAGICALNUMBER, scroll1.ViewportHeight - MAGICALNUMBER);
    Size itemSize = new Size(wp1.ItemWidth, wp1.ItemHeight);

    Size newSize = CalculateSizeBasedOnContent(contentSize, wp1.Children.Count, itemSize);

    wp1.Width = newSize.Width;
    wp1.Height = newSize.Height;
}


private Size CalculateSizeBasedOnContent(Size containerSize, int itemsCount, Size itemSize)
{

    int iPossibleColumns = (int)Math.Floor(containerSize.Width / itemSize.Width);
    int iPossibleRows = (int)Math.Floor(containerSize.Height / itemSize.Height);

    // If all items can fit in first column without scrolling (or if container is narrow than the itemWidth)
    if (itemsCount <= iPossibleRows || containerSize.Width < itemSize.Width)
    return new Size(itemSize.Width, (itemsCount * itemSize.Height));

    // If all items can fit in columns without scrollbar
    if (iPossibleColumns * iPossibleRows > itemsCount)
    {
    int columnsNeededForDisplay = (int)Math.Ceiling((itemsCount/(Double) iPossibleRows));
    return new Size(columnsNeededForDisplay * itemSize.Width, containerSize.Height);
    }

    // Here scrolling is needed even after spreading in columns
    int itemsPerColumn = (int)Math.Ceiling(wp1.Children.Count / (Double)iPossibleColumns);
    return new Size(containerSize.Width, itemsPerColumn * itemSize.Height);

}

Answer 3:

那种行为是无法实现的WrapPanel没有定义它的Height

你可以用另一种方式是一个Grid ，其中OnLoaded和OnSizeChanged ，它计算多少列将如何适应，然后设置网格和的行/列的定义Grid.Row / Grid.Column在代码隐藏每个对象的。 它不漂亮，但它应该是相当简单的放在一起，并将努力。

另一种选择将创建安排你怎么想的项目自己的自定义面板。 你甚至可以找到一些可在网上已经做的是

Answer 4:

有做到这一点的唯一方法WrapPanel是显式设置的Height 。

它看起来像要均匀地涂抹在项目出过列具有至多一个比列向右更多项目左侧立柱。 如果这是你在找什么，那么你就需要创建自己的自定义面板。 看看这个 ，看看如何开始。 你需要一个ItemWidth和ItemHeight依赖属性和计算有多少列，你可以通过使用ItemWidth和可用宽度有。

文章来源: List Items Vertically on a WrapPanel and take advantage of multiple columns