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.
If you set
Orientation
toVertical
you should also set render height. For example toWrapPanel
,Height="150"
.Finally got something that works but it needs code. I agree with all of you when you say that we need to resize height of the WrapPanel to make that works. Here is my solution :
Here is the CodeBehind :
The only way to do this with a
WrapPanel
is to explicitly set theHeight
.It looks like you want the items to be spread out evenly over the columns with the left column having at most one more item than the column to the right. If that is what you are looking for then you'll need to create your own custom panel. Take a look at this to see how to get started. You'll need an ItemWidth and ItemHeight dependency properties and calculate how many columns you can have by using the ItemWidth and available width.
That sort of behavior is not possible with a
WrapPanel
without defining itsHeight
One alternative you could use is a
Grid
, where inOnLoaded
andOnSizeChanged
, it calculates how many columns will fit, then sets the Row/Column definitions of the Grid and theGrid.Row
/Grid.Column
of each object in the code-behind. It's not pretty, but it should be fairly simple to put together and will work.The other option would be creating your own Custom Panel that arranges the items how you want. You might even be able to find something available online that already does that