I have a .Net MAUI page that lists news stories; the list typically contains 10-100 items. To add visual variety, every 10th item uses a "big photo" DataTemplate while the others use a "regular" DataTemplate. This is handled with a datatemplateselector.

In MAUI today (July 2023), when a CollectionView shows a GridItemsLayout with multiple columns, all items on a row are rendered with the same height (that of the tallest item on the row). As such, when showing 2 or more columns, the "big photo" item appears properly, but the regular items on its row are set within a space that's overly tall for them, making the app look messy. Until something like VariableSizeWrapGrid comes to MAUI, I'd like to make all items on the "big photo" row use the "big photo" template. That part is easy with some changes to my datatemplateselector.

My problem is how to handle window size changes. If a phone is rotated from portrait to landscape, the number of columns in the CollectionView GridItemsLayout would change from 1 to 2. requiring items 2, 12, 22, etc. in the CollectionView to switch from the "regular" to the "big photo" DataTemplate since they'd then be on the same row as the "big photo" items (1, 11, 21, etc.). I don't know how to get the CollectionView to become aware of the need to recompute the DataTemplates for each item in the collection and then adjust its visuals to show the changes.

Questions: 1) Is attempting to do this a bad idea for some reason and what's that reason(s)? 2) If it's not a bad idea, how can I get the CollectionView to re-call OnSelectTemplate so that the stories that need to switch their datatemplates can?

I haven't tried anything yet because I don't see a way to cause the CollectionView to re-invoke the call to select a DataTemplate for each item in the collection. I have considered and ruled out clearing the BindingContext then resetting it because it seems like an inefficient way to achieve the goal and would have the side effect of losing the relative scroll position of the CollectionView.

Finally, this is my first question here. I'm sorry for the long-winded explanation that's devoid of code.

0

There are 0 best solutions below