在WrapPanel上垂直列出项目并利用多列 [英] List Items Vertically on a WrapPanel and take advantage of multiple columns

问题描述

我需要垂直(使用ScrollViewer)列出所有大小相同的项目.如果容器足够大，可以显示 x 列

I need to list items (all of same size) vertically (with a ScrollViewer). I want the items to spread through x columns if the container is large enough to display x columns

我首先尝试过:

<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的工作方式与我想要的一样，但是我的商品是按从左到右"的顺序排列的(不是垂直排列的

Result - The WrapPanel works like I want but my items are ordered from "Left to Right" (not vertically

然后，我尝试将WrapPanel的方向设置为"垂直":

Then I tried to seet the Orientation of the WrapPanel to "Vertical" :

结果-我的项目是按垂直顺序排列的，但没有分布在多列上.

Result - My items are ordered vertically but not spreaded on multiple columns.

这就是我想要呈现的项目的方式:

Here is how I'd like items to be rendered :

我真的很希望避免编写代码来监控控件的大小，以根据控件的大小创建/删除列.

I'd really like to avoid having to write code monitoring the control size to create/remove columns depending on its size.

推荐答案

如果将Orientation设置为Vertical，则还应该设置渲染高度.例如WrapPanel，Height="150".

If you set Orientation to Vertical you should also set render height. For example to WrapPanel, Height="150".

这篇关于在WrapPanel上垂直列出项目并利用多列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！