List Items Vertically on a WrapPanel and take advantage of multiple columns

danbord picture danbord · Jul 5, 2012 · Viewed 10.8k times · Source

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

I first tried that :

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

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

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.

Answer

Zabavsky picture Zabavsky · Jul 5, 2012

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