0

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.

manicottiK
  • 1
  • *"I haven't tried anything yet because..."*, *"I don't know how to get the CollectionView to become aware of the need to recompute"*, *"I have considered and ruled out ..."*: Then you DO know a way to proceed; you've just ruled it out, fearing that it is inefficient. I recommend writing code, test it with various content. Then come back here, show code, describe performance issues. Customizing Layout means customizing CollectionVIew's [LayoutManager](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.layouts.layoutmanager). Might have to find in Maui source code. – ToolmakerSteve Jul 08 '23 at 20:08
  • ToolmarkerSteve, I appreciate the pointer to LayoutManager. As to my "I don't know a way" comment, I did provide two reasons, but just the one that you referenced. Either one is a problem. However, I did try to way that I thought would perform badly and it did. – manicottiK Jul 12 '23 at 20:37
  • Exactly my point. So, show the code you tried. It’s possible that there is some tweak that will improve its performance. (You’ll notice that no one has come along and suggested a solution. If there were a completely different approach, you likely would have found it via Google.) This is the type of performance problem XF had, that Maui is trying to overcome. May need devs to fix something. Start by seeing what you have. – ToolmakerSteve Jul 12 '23 at 20:39
  • I’d also like to see a public GitHub repo, with just enough code to show the poor performance. – ToolmakerSteve Jul 12 '23 at 20:51
  • I'll see what I can put together. I haven't had time to work on this project in the last week, but hope to get back to in the coming week. Thanks. – manicottiK Jul 16 '23 at 14:19
  • As a test, how is the redraw performance (when rotate) if ALL items use same template (all are "big photo")? No Selector; just a single DataTemplate. If that's slow, then maybe CollectionView has to re-build all items anyway. In which case, the Selector isn't the issue. SIDE NOTE: Find a way to display a small pic in a tall space, that doesn't look as messy. Give the pic a frame, and vertically center that framed pic within available height. If text label, have that "float" at bottom of space, so they line up. Any extra space is outside of the frame (pic floats in grid's background color). – ToolmakerSteve Jul 20 '23 at 08:03

0 Answers0