sbaeumlisberger/VirtualizingWrapPanel

Add support for different sized items

Closed this issue · 9 comments

sbaeumlisberger commented

Goal of this issue is to support different sized items.
See: #21

Progress

  • proof of concept
  • preview release
  • stable release
julesx commented

this would be so good

ScarletKuro commented

This is really necessary feature. I found the package in nuget and was hoping this is supported out of the box.

sbaeumlisberger commented

Short update: I experimented a bit today and started to implement a first proof-of-concept. I will continue to work on this over the next few weeks and publish the code to the repository. I aim to have a first preview release ready in December.

image

  • 🎉2
sbaeumlisberger commented

first preview is out: https://www.nuget.org/packages/VirtualizingWrapPanel/2.0.0-preview1

Please note: There might be some bugs or performance issues. Furthermore there are some breaking changes when updating from 1.x and more may be coming until the stable version.

In order to use different sized items the property AllowDifferentSizedItems must be set to true. If this property is enabled, it is strongly recommended to also set the ItemSizeProvider property to an instance of the IItemSizeProvider interface. Otherwise, the position of the items is not guaranteed to be correct when the user is scrolling fast.

If you have any feedback please let me know.

  • 👍2
ScarletKuro commented

Hello. Thank you for such a nice gift for NY.
I haven't found much problems yet (I will try it in production in mid of January).
Maybe the only problem I found is that:
When I use WrapPanel

<WrapPanel Orientation="Horizontal" HorizontalAlignment="Center" />

The row container is alignment in the center but the items will start from the left, like on the image below:

When I try do the same with VirtualizingWrapPanel

<controls:VirtualizingWrapPanel Orientation="Horizontal" HorizontalAlignment="Center" SpacingMode="None" AllowDifferentSizedItems="True"/>

You can see that the items are not aligned correctly. They are way too left.

Currently I changed to SpacingMode="StartAndEndOnly" and it looks fine, the only difference is that the 3rd row items are in the center, but for the current use case it's acceptable.

I also don't really understand the purpose of the IItemSizeProvider with the AllowDifferentSizedItems=true
It wants me to calculate the size, but how can I do if it's dynamic (depending on the top/bottom text size), the only thing I can provide is the UIElement.DesiredSize but you already have this information. Unless, if I make a mechanism like I define a default size, and will calculate the top and bottom text size in pixels, but looks unnecessary.

sbaeumlisberger commented

Hi. Thank you for the fast feedback.

I have uploaded an new preview with some fixes to nuget. When you set HorizontalAlignment="Center" the panel is now centered correctly. When using this with SpacingMode=None it should be fine for your use case (rows have always the same width).

The purpose of the IItemSizeProvider is to provide the size of the items based on the data. For example, when displaying images or other data where you know the resulting size. The problem is that if the user scrolls quickly, it is not possible to realize all the items and get the desired size. If this would be done, the performance would be really bad. Therefore, if you don't use the IItemSizeProvider, the size of the items is assumed based on the size of the already realized items . Since the size is assumed, it is not possible to guarantee that the items will always be shown at the right position. In your case this should not be a big problem, because all elements seem to have the same width, which means that will be always on the same row. But if the items have different width and the is user scrolls quickly down and up, it is possible that the same item will be shown on different rows. I hope this explanation helps. If you have further questions, feel free to ask.

  • 👍1
Kamaew commented

Hello. As far as I understand. so it can't be done?

sbaeumlisberger commented

@Kamaew If you mean the layout from your image, that should be possible.