Hello,
I’m just trying to place a set of items within an iterator into a WrapPanel… That is working fine as far as I provide a explicit Width and Height for each item, or even just with a Width and auto-calculated Height based on Aspect and Boxsizing:
<WrapPanel>
<Each Count="10">
<Panel Width="100pt" Aspect="1" BoxSizing="FillAspect" Margin="2" Background="Gray" />
</Each>
</WrapPanel>
The issue is that in order to be liquid and responsive, I want each item to take 33% of the available width and suddenly, if I change just the Width for the inner panel to Width=“33%” rather than Width=“100pt”, everything stops working:
<WrapPanel>
<Each Count="10">
<Panel Width="33%" Aspect="1" BoxSizing="FillAspect" Margin="2" Background="Gray" />
</Each>
</WrapPanel>
Is there anyway to solve this issue? I found some crappy solutions but don’t work when iterating an unknown list of items, where length is unknown or where I’m doing an infinite scroll loading items when reaching the end.
Other issue is, how can I get the “index” value within an tag? Can I use that to calculate a Mod and create a template?
Thank you so much.
Bests,
Miguel.
Hi,
If you want each item to take 33% of available width, why not use a <Grid Columns="1*,1*,1*"> ?
Other issue is, how can I get the “index” value within an tag? Can I use that to calculate a Mod and create a template?
Do this in JavaScript. You can use .map(function(item, index) { .. and then do something based on the ìndex.
Hello Anders,
The grid was my first option, but it doesn’t work because I have to specify the Column for each item, haven’t I? A WrapPanel is doing exactly what I need, just needs to take the units properly, and it’s probably a bug or a feature lacking. It works when using PT as units.
Do you have a way to automatically map items to a column without specifying the Column attribute?
Doing the map was used for the grid alternative, but if the dataset in the Items collection is changing constantly the layout doesn’t update properly and messes everything up. So it works if the dataset is of known length.
All of them seem pretty noisy for something as simple as adding a % unit support to the WrapPanel, because if I change the WrapPanel for a regular Panel, it works perfectly also. Coming from XAML and WPF it seems a real feature missing, with messy workarounds to solve it.
Bests,
Miguel.
The grid was my first option, but it doesn’t work because I have to specify the Column for each item, haven’t I?
You don’t need to specify column for each item, it is automatically assigned left-to-right.
Doing the map was used for the grid alternative, but if the dataset in the Items collection is changing constantly the layout doesn’t update properly and messes everything up. So it works if the dataset is of known length.
Changes in the dataset should work fine, otherwise we would love to see a test case of that.
All of them seem pretty noisy for something as simple as adding a % unit support to the WrapPanel
Its not about adding the “feature”, it is already there. However % is interpreted relative to available space. When stacking horizontally, there is “infinite” available space in that direction.
Coming from XAML and WPF it seems a real feature missing, with messy workarounds to solve it.
I’m curious, how would you solve this case in WPF? To my knowledge, WPF doesn’t support % at all.
In conclusion, the proper solution here is to use a grid and proportion-based layout.
If you think about it, it is pretty nasty to have users specify fractions in %. How many decimal places do you want to type in? 33.333333333333%? 
Better to use 1*,1*,1*
Thank you so much!
Didn’t know about the auto-column placing for items within a Grid. That solved everything and makes it simpler!
Better to use