在 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屋！